<template>
  <div class="container">
    <search-table
      :form-model="formModel"
      :form-items="formItems"
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      title="网络设备管理"
      search-button-text="查询"
      reset-button-text="重置"
      @update:form-model="handleFormModelUpdate"
      @search="handleSearch"
      @reset="handleReset"
      @page-change="handlePageChange"
      @refresh="handleRefresh"
    >
      <template #toolbar-left>
        <a-button type="primary" @click="handleAdd">
          <template #icon>
            <icon-plus />
          </template>
          新增网络设备
        </a-button>
      </template>
      
      <!-- ID -->
      <template #id="{ record }">
        {{ record.id }}
      </template>
      
      <!-- 远程访问 -->
      <template #remote_access="{ record }">
        <a-tag :color="record.remote_access ? 'green' : 'gray'">
          {{ record.remote_access ? '已开启' : '未开启' }}
        </a-tag>
      </template>
      
      <!-- Agent配置 -->
      <template #agent_config="{ record }">
        <a-tag :color="record.agent_config ? 'green' : 'gray'">
          {{ record.agent_config ? '已配置' : '未配置' }}
        </a-tag>
      </template>
      
      <!-- CPU -->
      <template #cpu="{ record }">
        <div class="resource-display">
          <div class="resource-info">
            <span class="resource-label">CPU</span>
            <span class="resource-value">{{ record.cpu_info?.value || 0 }}%</span>
          </div>
          <a-progress 
            :percent="(record.cpu_info?.value || 0) / 100" 
            :color="getProgressColor(record.cpu_info?.value || 0)"
            size="small"
            :show-text="false"
          />
        </div>
      </template>
      
      <!-- 内存 -->
      <template #memory="{ record }">
        <div class="resource-display">
          <div class="resource-info">
            <span class="resource-laebl">内存</span>
            <span class="resource-value">{{ record.memory_info?.value || 0 }}%</span>
          </div>
          <a-progress 
            :percent="(record.memory_info?.value || 0) / 100" 
            :color="getProgressColor(record.memory_info?.value || 0)"
            size="small"
            :show-text="false"
          />
        </div>
      </template>
      
      <!-- 硬盘 -->
      <template #disk="{ record }">
        <div class="resource-display">
          <div class="resource-info">
            <span class="resource-label">硬盘</span>
            <span class="resource-value">{{ record.disk_info?.value || 0 }}%</span>
          </div>
          <a-progress 
            :percent="(record.disk_info?.value || 0) / 100" 
            :color="getProgressColor(record.disk_info?.value || 0)"
            size="small"
            :show-text="false"
          />
        </div>
      </template>
      
      <!-- 数据采集 -->
      <template #data_collection="{ record }">
        <a-tag :color="record.data_collection ? 'green' : 'gray'">
          {{ record.data_collection ? '已启用' : '未启用' }}
        </a-tag>
      </template>
      
      <!-- 状态 -->
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.status)">
          {{ getStatusText(record.status) }}
        </a-tag>
      </template>
      
      <!-- 操作栏 - 下拉菜单 -->
      <template #actions="{ record }">
        <a-space>
          <a-dropdown trigger="hover">
            <a-button type="primary" size="small">
              管理
              <icon-down />
            </a-button>
            <template #content>
              <a-doption @click="handleDetail(record)">
                <template #icon>
                  <icon-eye />
                </template>
                详情
              </a-doption>
              <a-doption @click="handleEdit(record)">
                <template #icon>
                  <icon-edit />
                </template>
                编辑
              </a-doption>
              <a-doption @click="handleDelete(record)" style="color: rgb(var(--danger-6))">
                <template #icon>
                  <icon-delete />
                </template>
                删除
              </a-doption>
            </template>
          </a-dropdown>
        </a-space>
      </template>
    </search-table>

    <!-- 新增/编辑对话框 -->
    <FormDialog
      v-model:visible="formDialogVisible"
      :record="currentRecord"
      @success="handleFormSuccess"
    />

    <!-- 快捷配置对话框 -->
    <QuickConfigDialog
      v-model:visible="quickConfigVisible"
      :record="currentRecord"
      @success="handleFormSuccess"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Message, Modal } from '@arco-design/web-vue'
import { 
  IconPlus, 
  IconDown,
  IconEdit,
  IconDesktop,
  IconDelete,
  IconRefresh,
  IconEye,
  IconSettings
} from '@arco-design/web-vue/es/icon'
import type { FormItem } from '@/components/search-form/types'
import SearchTable from '@/components/search-table/index.vue'
import { searchFormConfig } from './config/search-form'
import FormDialog from './components/FormDialog.vue'
import { columns as columnsConfig } from './config/columns'
import {
  fetchServerList,
  deleteServer,
} from '@/api/ops/server'

const router = useRouter()

// Mock 假数据
const mockServerData = [
  {
    id: 1,
    unique_id: 'NET-2024-0001',
    name: '核心交换机 -01',
    type: '交换机',
    manu: '华为',
    model_num: 'CE6857-48S6CQ',
    location: '数据中心 A-3 层 -24 机柜 -5U 位',
    tags: '核心，生产',
    ip: '192.168.1.1',
    protocol: 'SNMP',
    indicator: 'CPU:45%,内存:62%',
    status: 'online',
  },
  {
    id: 2,
    unique_id: 'NET-2024-0002',
    name: '汇聚路由器 -01',
    type: '路由器',
    manu: '思科',
    model_num: 'ISR4451-X/K9',
    location: '数据中心 A-3 层 -24 机柜 -6U 位',
    tags: '汇聚，生产',
    ip: '192.168.1.2',
    protocol: 'SNMP',
    indicator: 'CPU:78%,内存:85%',
    status: 'online',
  },
  {
    id: 3,
    unique_id: 'NET-2024-0003',
    name: '接入交换机 -01',
    type: '交换机',
    manu: '华三',
    model_num: 'S5560X-54C-EI',
    location: '数据中心 B-1 层 -12 机柜 -1U 位',
    tags: '接入，办公',
    ip: '192.168.2.1',
    protocol: 'SNMP',
    indicator: '-',
    status: 'offline',
  },
  {
    id: 4,
    unique_id: 'NET-2024-0004',
    name: '防火墙 -01',
    type: '防火墙',
    manu: '深信服',
    model_num: 'AF-2000',
    location: '数据中心 B-1 层 -12 机柜 -2U 位',
    tags: '安全，边界',
    ip: '192.168.1.254',
    protocol: 'SNMP',
    indicator: 'CPU:35%,内存:68%',
    status: 'online',
  },
  {
    id: 5,
    unique_id: 'NET-2024-0005',
    name: '负载均衡器 -01',
    type: '负载均衡',
    manu: 'F5',
    model_num: 'BIG-IP i2800',
    location: '数据中心 C-2 层 -8 机柜 -3U 位',
    tags: '负载，应用',
    ip: '192.168.3.1',
    protocol: 'SNMP',
    indicator: 'CPU:28%,内存:45%',
    status: 'maintenance',
  },
  {
    id: 6,
    unique_id: 'NET-2024-0006',
    name: '无线控制器 -01',
    type: '无线控制器',
    manu: '锐捷',
    model_num: 'WS6008',
    location: '数据中心 A-1 层 -05 机柜 -8U 位',
    tags: '无线，办公',
    ip: '192.168.4.1',
    protocol: 'SNMP',
    indicator: '-',
    status: 'retired',
  },
  {
    id: 7,
    unique_id: 'NET-2024-0007',
    name: '光模块交换机 -01',
    type: '交换机',
    manu: '华为',
    model_num: 'CE8850-64CQ-EI',
    location: '数据中心 A-2 层 -15 机柜 -10U 位',
    tags: '高速，存储网络',
    ip: '192.168.5.1',
    protocol: 'SNMP',
    indicator: 'CPU:55%,内存:72%',
    status: 'online',
  },
  {
    id: 8,
    unique_id: 'NET-2024-0008',
    name: '管理交换机 -01',
    type: '交换机',
    manu: 'TP-LINK',
    model_num: 'TL-SG3428',
    location: '数据中心 B-2 层 -18 机柜 -12U 位',
    tags: '管理，带外',
    ip: '192.168.100.1',
    protocol: 'SNMP',
    indicator: 'CPU:42%,内存:38%',
    status: 'online',
  },
]

// 状态管理
const loading = ref(false)
const tableData = ref<any[]>([])
const formDialogVisible = ref(false)
const quickConfigVisible = ref(false)
const currentRecord = ref<any>(null)
const formModel = ref({
  keyword: '',
  datacenter_id: undefined,
  rack_id: undefined,
  status: undefined,
})

const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
})

// 表单项配置
const formItems = computed<FormItem[]>(() => searchFormConfig)

// 表格列配置
const columns = computed(() => columnsConfig)

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

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

// 获取进度条颜色
const getProgressColor = (value: number) => {
  if (value >= 90) return '#F53F3F' // 红色
  if (value >= 70) return '#FF7D00' // 橙色
  if (value >= 50) return '#FFD00B' // 黄色
  return '#00B42A' // 绿色
}

// 获取网络设备列表（使用 Mock 数据）
const fetchServers = async () => {
  loading.value = true
  
  try {
    // 模拟网络延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 使用 Mock 数据
    tableData.value = mockServerData
    pagination.total = mockServerData.length
    
    // 如果有搜索条件，进行过滤
    if (formModel.value.keyword || formModel.value.status) {
      let filteredData = [...mockServerData]
      
      if (formModel.value.keyword) {
        const keyword = formModel.value.keyword.toLowerCase()
        filteredData = filteredData.filter(item => 
          item.name.toLowerCase().includes(keyword) ||
          item.unique_id.toLowerCase().includes(keyword) ||
          item.ip.toLowerCase().includes(keyword)
        )
      }
      
      if (formModel.value.status) {
        filteredData = filteredData.filter(item => item.status === formModel.value.status)
      }
      
      tableData.value = filteredData
      pagination.total = filteredData.length
    }
  } catch (error) {
    console.error('获取网络设备列表失败:', error)
    Message.error('获取网络设备列表失败')
    tableData.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  fetchServers()
}

// 处理表单模型更新
const handleFormModelUpdate = (value: any) => {
  formModel.value = value
}

// 重置
const handleReset = () => {
  formModel.value = {
    keyword: '',
    datacenter_id: undefined,
    rack_id: undefined,
    status: undefined,
  }
  pagination.current = 1
  fetchServers()
}

// 分页变化
const handlePageChange = (current: number) => {
  pagination.current = current
  fetchServers()
}

// 刷新
const handleRefresh = () => {
  fetchServers()
  Message.success('数据已刷新')
}

// 新增网络设备
const handleAdd = () => {
  currentRecord.value = null
  formDialogVisible.value = true
}

// 快捷配置
const handleQuickConfig = (record: any) => {
  currentRecord.value = record
  quickConfigVisible.value = true
}

// 编辑网络设备
const handleEdit = (record: any) => {
  currentRecord.value = record
  formDialogVisible.value = true
}

// 表单提交成功
const handleFormSuccess = () => {
  fetchServers()
}

// 重启网络设备
const handleRestart = (record: any) => {
  Modal.confirm({
    title: '确认重启',
    content: `确认重启网络设备 ${record.name} 吗？`,
    onOk: () => {
      Message.info('正在发送重启指令...')
    },
  })
}

// 查看详情 - 在当前窗口打开
const handleDetail = (record: any) => {
  router.push({
    path: '/dc/detail',
    query: {
      id: record.id,
      name: record.name,
      ip: record.ip,
      status: record.status,
    },
  })
}

// 远程控制 - 在新窗口打开
const handleRemoteControl = (record: any) => {
  const url = router.resolve({
    path: '/dc/remote',
    query: {
      id: record.id,
      name: record.name,
      ip: record.ip,
      status: record.status,
    },
  }).href
  window.open(url, '_blank')
}

// 删除网络设备
const handleDelete = async (record: any) => {
  try {
    Modal.confirm({
      title: '确认删除',
      content: `确认删除网络设备 ${record.name} 吗？`,
      onOk: async () => {
        // Mock 删除操作
        const index = mockServerData.findIndex(item => item.id === record.id)
        if (index > -1) {
          mockServerData.splice(index, 1)
          Message.success('删除成功')
          fetchServers()
        } else {
          Message.error('删除失败')
        }
      },
    })
  } catch (error) {
    console.error('删除网络设备失败:', error)
  }
}

// 初始化加载数据
fetchServers()
</script>

<script lang="ts">
export default {
  name: 'DataCenterServer',
}
</script>

<style scoped lang="less">
.container {
  margin-top: 20px;
}

.resource-display {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
  
  .resource-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > div {
      display: inline-block;
    }
    .resource-value {
      font-size: 12px;
      font-weight: 500;
      color: rgb(var(--text-1));
    }
  }
  
  :deep(.arco-progress) {
    margin: 0;
    
    .arco-progress-bar-bg {
      border-radius: 2px;
    }
    
    .arco-progress-bar {
      border-radius: 2px;
      transition: all 0.3s ease;
    }
  }
}
</style>
