<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      title="设备管理"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
      :pagination="pagination"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
      @refresh="search"
    >
      <template #top>
        <GiForm 
          v-model="searchForm" 
          search 
          :columns="queryFormColumns" 
          size="medium" 
          @search="search" 
          @reset="reset"
        />
      </template>
      
      <template #toolbar-left>
        <a-space>
          <a-button type="primary" @click="openAddModal">
            <template #icon><icon-plus /></template>
            <template #default>新增设备</template>
          </a-button>
          <a-button @click="batchImport">
            <template #icon><icon-import /></template>
            <template #default>批量导入</template>
          </a-button>
          <a-button @click="exportData">
            <template #icon><icon-export /></template>
            <template #default>导出数据</template>
          </a-button>
        </a-space>
      </template>
      
      <!-- 设备类型 -->
      <template #deviceType="{ record }">
        <a-tag :color="getDeviceTypeColor(record.deviceType)">
          {{ record.deviceType }}
        </a-tag>
      </template>
      
      <!-- 设备状态 -->
      <template #status="{ record }">
        <a-space>
          <div 
            :class="getStatusDotClass(record.status)"
            class="status-dot"
          ></div>
          <a-tag :color="getStatusColor(record.status)">
            {{ getStatusText(record.status) }}
          </a-tag>
        </a-space>
      </template>
      
      <!-- 健康状况 -->
      <template #healthStatus="{ record }">
        <a-tag :color="getHealthColor(record.healthStatus)">
          {{ record.healthStatus }}
        </a-tag>
      </template>
      
      <!-- 负载率 -->
      <template #loadRate="{ record }">
        <a-progress 
          :percent="record.loadRate"
          :color="getLoadColor(record.loadRate)"
          size="small"
        />
      </template>
      
      <!-- 位置信息 -->
      <template #location="{ record }">
        <span>{{ record.location.building }} - {{ record.location.room }}</span>
      </template>
      
      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="viewDetail(record)">详情</a-link>
          <a-link @click="editRecord(record)">编辑</a-link>
          <a-link @click="remoteControl(record)">远程控制</a-link>
          <a-link @click="viewMonitoring(record)">监控</a-link>
          <a-dropdown>
            <a-link>更多 <icon-down /></a-link>
            <template #content>
              <a-doption @click="deviceMaintenance(record)">设备维护</a-doption>
              <a-doption @click="powerControl(record)">电源控制</a-doption>
              <a-doption @click="deleteRecord(record)">删除设备</a-doption>
            </template>
          </a-dropdown>
        </a-space>
      </template>
    </GiTable>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'

// 搜索表单
const searchForm = reactive({
  deviceName: '',
  deviceType: '',
  status: '',
  location: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'deviceName',
    label: '设备名称',
    type: 'input' as const,
    props: {
      placeholder: '请输入设备名称'
    }
  },
  {
    field: 'deviceType',
    label: '设备类型',
    type: 'select' as const,
    props: {
      placeholder: '请选择设备类型',
      options: [
        { label: '服务器', value: '服务器' },
        { label: '交换机', value: '交换机' },
        { label: '路由器', value: '路由器' },
        { label: '存储设备', value: '存储设备' },
        { label: '防火墙', value: '防火墙' },
        { label: '打印机', value: '打印机' }
      ]
    }
  },
  {
    field: 'status',
    label: '设备状态',
    type: 'select' as const,
    props: {
      placeholder: '请选择设备状态',
      options: [
        { label: '在线', value: 'online' },
        { label: '离线', value: 'offline' },
        { label: '维护中', value: 'maintenance' },
        { label: '故障', value: 'error' }
      ]
    }
  },
  {
    field: 'location',
    label: '位置',
    type: 'input' as const,
    props: {
      placeholder: '请输入位置信息'
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '设备编号', dataIndex: 'deviceCode', width: 120 },
  { title: '设备名称', dataIndex: 'deviceName', width: 150 },
  { title: '设备类型', dataIndex: 'deviceType', slotName: 'deviceType', width: 120 },
  { title: 'IP地址', dataIndex: 'ipAddress', width: 130 },
  { title: 'MAC地址', dataIndex: 'macAddress', width: 150 },
  { title: '设备状态', dataIndex: 'status', slotName: 'status', width: 130 },
  { title: '健康状况', dataIndex: 'healthStatus', slotName: 'healthStatus', width: 100 },
  { title: '负载率', dataIndex: 'loadRate', slotName: 'loadRate', width: 120 },
  { title: '位置', dataIndex: 'location', slotName: 'location', width: 150 },
  { title: '负责人', dataIndex: 'manager', width: 100 },
  { title: '最后维护', dataIndex: 'lastMaintenance', width: 120 },
  { title: '采购日期', dataIndex: 'purchaseDate', width: 120 },
  { title: '保修期至', dataIndex: 'warrantyUntil', width: 120 },
  { title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
  { title: '操作', slotName: 'action', width: 200, fixed: 'right' }
]

// 数据状态
const loading = ref(false)
const dataList = ref([
  {
    id: 1,
    deviceCode: 'SRV-001',
    deviceName: '主服务器-01',
    deviceType: '服务器',
    ipAddress: '192.168.1.10',
    macAddress: '00:1B:21:3C:4D:5E',
    status: 'online',
    healthStatus: '良好',
    loadRate: 65,
    location: { building: 'A栋', room: '机房101' },
    manager: '张工程师',
    lastMaintenance: '2024-03-01',
    purchaseDate: '2023-01-15',
    warrantyUntil: '2026-01-15',
    remark: '核心业务服务器，24小时运行'
  },
  {
    id: 2,
    deviceCode: 'SW-001',
    deviceName: '核心交换机',
    deviceType: '交换机',
    ipAddress: '192.168.1.1',
    macAddress: '00:1B:21:3C:4D:5F',
    status: 'online',
    healthStatus: '良好',
    loadRate: 45,
    location: { building: 'A栋', room: '机房101' },
    manager: '李工程师',
    lastMaintenance: '2024-02-15',
    purchaseDate: '2023-03-20',
    warrantyUntil: '2026-03-20',
    remark: '网络核心设备'
  },
  {
    id: 3,
    deviceCode: 'FW-001',
    deviceName: '主防火墙',
    deviceType: '防火墙',
    ipAddress: '192.168.1.254',
    macAddress: '00:1B:21:3C:4D:60',
    status: 'maintenance',
    healthStatus: '注意',
    loadRate: 80,
    location: { building: 'A栋', room: '机房101' },
    manager: '王工程师',
    lastMaintenance: '2024-03-10',
    purchaseDate: '2023-05-10',
    warrantyUntil: '2026-05-10',
    remark: '安全防护设备，需要定期更新规则'
  },
  {
    id: 4,
    deviceCode: 'STO-001',
    deviceName: '存储阵列-01',
    deviceType: '存储设备',
    ipAddress: '192.168.1.20',
    macAddress: '00:1B:21:3C:4D:61',
    status: 'offline',
    healthStatus: '故障',
    loadRate: 0,
    location: { building: 'A栋', room: '机房102' },
    manager: '赵工程师',
    lastMaintenance: '2024-01-20',
    purchaseDate: '2023-08-01',
    warrantyUntil: '2026-08-01',
    remark: '主存储设备，目前离线维修中'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 4,
  showTotal: true,
  showPageSize: true
})

// 获取设备类型颜色
const getDeviceTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    '服务器': 'blue',
    '交换机': 'green',
    '路由器': 'cyan',
    '存储设备': 'purple',
    '防火墙': 'red',
    '打印机': 'orange'
  }
  return colorMap[type] || 'gray'
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'online': 'green',
    'offline': 'red',
    'maintenance': 'orange',
    'error': 'red'
  }
  return colorMap[status] || 'gray'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'online': '在线',
    'offline': '离线',
    'maintenance': '维护中',
    'error': '故障'
  }
  return textMap[status] || status
}

// 获取状态点样式
const getStatusDotClass = (status: string) => {
  const classMap: Record<string, string> = {
    'online': 'online-dot',
    'offline': 'offline-dot',
    'maintenance': 'maintenance-dot',
    'error': 'error-dot'
  }
  return classMap[status] || 'offline-dot'
}

// 获取健康状况颜色
const getHealthColor = (health: string) => {
  const colorMap: Record<string, string> = {
    '良好': 'green',
    '注意': 'orange',
    '故障': 'red',
    '未知': 'gray'
  }
  return colorMap[health] || 'gray'
}

// 获取负载颜色
const getLoadColor = (load: number) => {
  if (load >= 80) return '#ff4d4f'
  if (load >= 60) return '#faad14'
  return '#52c41a'
}

// 搜索和重置
const search = async () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

const reset = () => {
  Object.assign(searchForm, {
    deviceName: '',
    deviceType: '',
    status: '',
    location: '',
    page: 1,
    size: 10
  })
  pagination.current = 1
  search()
}

// 分页处理
const onPageChange = (page: number) => {
  searchForm.page = page
  pagination.current = page
  search()
}

const onPageSizeChange = (size: number) => {
  searchForm.size = size
  searchForm.page = 1
  pagination.pageSize = size
  pagination.current = 1
  search()
}

// 操作方法
const openAddModal = () => {
  Message.info('新增设备功能开发中...')
}

const batchImport = () => {
  Message.info('批量导入功能开发中...')
}

const exportData = () => {
  Message.info('导出数据功能开发中...')
}

const viewDetail = (record: any) => {
  Message.info(`查看设备详情: ${record.deviceName}`)
}

const editRecord = (record: any) => {
  Message.info(`编辑设备: ${record.deviceName}`)
}

const remoteControl = (record: any) => {
  Message.info(`远程控制: ${record.deviceName}`)
}

const viewMonitoring = (record: any) => {
  Message.info(`设备监控: ${record.deviceName}`)
}

const deviceMaintenance = (record: any) => {
  Message.info(`设备维护: ${record.deviceName}`)
}

const powerControl = (record: any) => {
  Message.info(`电源控制: ${record.deviceName}`)
}

const deleteRecord = (record: any) => {
  Message.info(`删除设备: ${record.deviceName}`)
}

onMounted(() => {
  search()
})
</script>

<style scoped>
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.online-dot {
  background-color: #52c41a;
}

.offline-dot {
  background-color: #d9d9d9;
}

.maintenance-dot {
  background-color: #faad14;
}

.error-dot {
  background-color: #ff4d4f;
}
</style> 