<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>
            
      <!-- 系统指标 -->
      <template #sys_indicator="{ 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 #middleware_indicator="{ record }">
        <div class="resource-display">
          <div class="resource-info">
            <span class="resource-label">内存</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 #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-button
            v-if="!record.agent_config"
            type="outline"
            size="small"
            @click="handleQuickConfig(record)"
          >
            <template #icon>
              <icon-settings />
            </template>
            快捷配置
          </a-button>
          <a-dropdown trigger="hover">
            <a-button type="primary" size="small">
              管理
              <icon-down />
            </a-button>
            <template #content>
              <a-doption @click="handleRestart(record)">
                <template #icon>
                  <icon-refresh />
                </template>
                重启
              </a-doption>
              <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="handleRemoteControl(record)">
                <template #icon>
                  <icon-desktop />
                </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 QuickConfigDialog from './components/QuickConfigDialog.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: 'MW-2024-0001',
    name: 'Nginx 服务器 -01',
    middleware: 'nginx',
    version: '1.24.0',
    location: '数据中心 A-1 楼 -机柜 01-U1',
    tags: 'Web,负载均衡',
    ip: '192.168.1.101',
    remote_access: true,
    agent_config: true,
    cpu_info: { value: 45, total: '8 核', used: '3.6 核' },
    memory_info: { value: 62, total: '32GB', used: '19.8GB' },
    data_collection: true,
    status: 'online',
  },
  {
    id: 2,
    unique_id: 'MW-2024-0002',
    name: 'Redis 缓存 -01',
    middleware: 'redis',
    version: '7.2.3',
    location: '数据中心 A-1 楼 -机柜 02-U1',
    tags: '缓存，高性能',
    ip: '192.168.1.102',
    remote_access: true,
    agent_config: true,
    cpu_info: { value: 78, total: '16 核', used: '12.5 核' },
    memory_info: { value: 85, total: '64GB', used: '54.4GB' },
    data_collection: true,
    status: 'online',
  },
  {
    id: 3,
    unique_id: 'MW-2024-0003',
    name: 'Tomcat 应用 -01',
    middleware: 'tomcat',
    version: '10.1.15',
    location: '数据中心 A-2 楼 -机柜 05-U2',
    tags: '应用，Java',
    ip: '192.168.1.103',
    remote_access: false,
    agent_config: false,
    cpu_info: { value: 0, total: '4 核', used: '0 核' },
    memory_info: { value: 0, total: '16GB', used: '0GB' },
    data_collection: false,
    status: 'offline',
  },
  {
    id: 4,
    unique_id: 'MW-2024-0004',
    name: 'Kafka 消息队列 -01',
    middleware: 'kafka',
    version: '3.6.0',
    location: '数据中心 A-2 楼 -机柜 06-U1',
    tags: '消息队列，分布式',
    ip: '192.168.1.104',
    remote_access: true,
    agent_config: true,
    cpu_info: { value: 35, total: '8 核', used: '2.8 核' },
    memory_info: { value: 68, total: '32GB', used: '21.8GB' },
    data_collection: true,
    status: 'online',
  },
  {
    id: 5,
    unique_id: 'MW-2024-0005',
    name: 'Elasticsearch-01',
    middleware: 'elasticsearch',
    version: '8.11.1',
    location: '数据中心 B-1 楼 -机柜 03-U1',
    tags: '搜索，日志分析',
    ip: '192.168.2.101',
    remote_access: true,
    agent_config: true,
    cpu_info: { value: 28, total: '12 核', used: '3.4 核' },
    memory_info: { value: 45, total: '48GB', used: '21.6GB' },
    data_collection: true,
    status: 'maintenance',
  },
  {
    id: 6,
    unique_id: 'MW-2024-0006',
    name: 'RabbitMQ-01',
    middleware: 'rabbitmq',
    version: '3.12.10',
    location: '数据中心 B-2 楼 -机柜 10-U1',
    tags: '消息队列，AMQP',
    ip: '192.168.2.102',
    remote_access: false,
    agent_config: false,
    cpu_info: { value: 0, total: '4 核', used: '0 核' },
    memory_info: { value: 0, total: '8GB', used: '0GB' },
    data_collection: false,
    status: 'retired',
  },
  {
    id: 7,
    unique_id: 'MW-2024-0007',
    name: 'Nginx 反向代理 -01',
    middleware: 'nginx',
    version: '1.25.3',
    location: '数据中心 A-1 楼 -机柜 08-U1',
    tags: '反向代理，负载均衡',
    ip: '192.168.1.105',
    remote_access: true,
    agent_config: true,
    cpu_info: { value: 55, total: '8 核', used: '4.4 核' },
    memory_info: { value: 72, total: '32GB', used: '23.0GB' },
    data_collection: true,
    status: 'online',
  },
  {
    id: 8,
    unique_id: 'MW-2024-0008',
    name: 'Redis 集群 -01',
    middleware: 'redis',
    version: '7.0.15',
    location: '数据中心 B-1 楼 -机柜 04-U1',
    tags: '缓存，集群',
    ip: '192.168.2.103',
    remote_access: true,
    agent_config: true,
    cpu_info: { value: 42, total: '16 核', used: '6.7 核' },
    memory_info: { value: 38, total: '64GB', used: '24.3GB' },
    data_collection: true,
    status: 'online',
  },
  {
    id: 9,
    unique_id: 'MW-2024-0009',
    name: 'Tomcat 集群 -01',
    middleware: 'tomcat',
    version: '9.0.83',
    location: '数据中心 A-2 楼 -机柜 07-U1',
    tags: '应用，集群',
    ip: '192.168.1.106',
    remote_access: true,
    agent_config: true,
    cpu_info: { value: 68, total: '8 核', used: '5.4 核' },
    memory_info: { value: 75, total: '16GB', used: '12GB' },
    data_collection: true,
    status: 'online',
  },
  {
    id: 10,
    unique_id: 'MW-2024-0010',
    name: 'Kafka 日志 -01',
    middleware: 'kafka',
    version: '3.5.2',
    location: '数据中心 B-2 楼 -机柜 12-U1',
    tags: '日志，流处理',
    ip: '192.168.2.104',
    remote_access: true,
    agent_config: true,
    cpu_info: { value: 0, total: '12 核', used: '0 核' },
    memory_info: { value: 0, total: '48GB', used: '0GB' },
    data_collection: true,
    status: 'offline',
  },
]

// 状态管理
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>
