<template>
  <div class="container">
    <search-table
      :form-model="formModel"
      :form-items="formItems"
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      title="办公PC管理"
      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>
          新增办公PC
        </a-button>
      </template>

      <!-- ID -->
      <template #id="{ record }">
        {{ record.id }}
      </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-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 #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 #collect_on="{ record }">
        <a-tag :color="record.collect_on ? 'green' : 'gray'">
          {{ record.collect_on ? '已启用' : '已禁用' }}
        </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="dialogVisible" :record="currentRecord" @success="handleFormSuccess" />

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

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Message, Modal } from '@arco-design/web-vue'
import { IconPlus, IconDown, IconEdit, IconDelete, IconEye, IconSettings, IconRefresh, IconDesktop } 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 { columns as columnsConfig } from './config/columns'
import { fetchPCList, deletePC, type PCItem } from '@/api/ops/pc'
import FormDialog from './components/FormDialog.vue'
import QuickConfigDialog from './components/QuickConfigDialog.vue'
import axios from 'axios'

// 创建独立的 axios 实例用于请求外部 agent，绕过全局拦截器
const agentAxios = axios.create({
  timeout: 5000,
})

const router = useRouter()

// 状态管理
const loading = ref(false)
const tableData = ref<PCItem[]>([])
const formModel = ref({
  keyword: '',
  collect_on: undefined as boolean | undefined,
})

const dialogVisible = ref(false)
const quickConfigVisible = ref(false)
const currentRecord = ref<PCItem | null>(null)

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',
    unknown: 'gray',
  }
  return colorMap[status || ''] || 'gray'
}

// 获取状态文本
const getStatusText = (status?: string) => {
  const textMap: Record<string, string> = {
    online: '在线',
    offline: '离线',
    unknown: '未知',
  }
  return textMap[status || ''] || '-'
}

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

// 获取PC列表
const fetchPCs = async () => {
  loading.value = true

  try {
    const params: {
      page: number
      size: number
      keyword?: string
      collect_on?: boolean
    } = {
      page: pagination.current,
      size: pagination.pageSize,
    }

    if (formModel.value.keyword) {
      params.keyword = formModel.value.keyword
    }

    if (formModel.value.collect_on !== undefined && formModel.value.collect_on !== null) {
      params.collect_on = formModel.value.collect_on
    }

    const res: any = await fetchPCList(params)

    if (res.code === 200 || res.code === 0) {
      const responseData = res.details || res.data || {}
      tableData.value = responseData.data || []
      pagination.total = responseData.total || 0

      // 列表加载成功后，获取监控指标
      await getAllMetrics()
    }
  } catch (error) {
    console.error('获取PC列表失败:', error)
    Message.error('获取PC列表失败')
    tableData.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

// 获取所有PC的监控指标
const getAllMetrics = async () => {
  try {
    // 遍历每个PC记录
    const metricsPromises = tableData.value.map(async (record) => {
      // 检查是否有 agent_config 配置
      if (record.agent_config) {
        try {
          // 从 agent_config 中解析 URL
          let metricsUrl = record.agent_config

          // 验证 URL 是否合法
          try {
            new URL(metricsUrl)
          } catch (urlError) {
            console.warn(`PC ${record.name} 的 agent_config 不是合法的 URL:`, metricsUrl)
            // 设置默认值 0
            record.cpu_info = { value: 0, total: '', used: '' }
            record.memory_info = { value: 0, total: '', used: '' }
            record.disk_info = { value: 0, total: '', used: '' }
            return
          }

          // 使用独立的 axios 实例请求外部 agent，绕过全局拦截器
          const response = await agentAxios.get(metricsUrl)
          console.log('获取指标数据:', response.data)

          if (response.data) {
            // 更新记录的监控数据
            record.cpu_info = {
              value: Number((response.data.cpu_usage || 0).toFixed(2)),
              total: response.data.cpu?.length ? `${response.data.cpu.length}核` : '',
              used: '',
            }

            record.memory_info = {
              value: Number((response.data.mem_usage?.used_percent || 0).toFixed(2)),
              total: response.data.mem_usage?.total ? `${(response.data.mem_usage.total / 1024 / 1024 / 1024).toFixed(1)}GB` : '',
              used: response.data.mem_usage?.used ? `${(response.data.mem_usage.used / 1024 / 1024 / 1024).toFixed(1)}GB` : '',
            }

            record.disk_info = {
              value: Number((response.data.disk_usage?.used_percent || 0).toFixed(2)),
              total: response.data.disk_usage?.total ? `${(response.data.disk_usage.total / 1024 / 1024 / 1024).toFixed(0)}GB` : '',
              used: response.data.disk_usage?.used ? `${(response.data.disk_usage.used / 1024 / 1024 / 1024).toFixed(0)}GB` : '',
            }
          }
        } catch (error) {
          console.warn(`获取PC ${record.name} 的监控指标失败:`, error)
          // 初始化默认值
          record.cpu_info = { value: 0, total: '', used: '' }
          record.memory_info = { value: 0, total: '', used: '' }
          record.disk_info = { value: 0, total: '', used: '' }
        }
      } else {
        // 没有配置 agent，设置默认值
        record.cpu_info = { value: 0, total: '', used: '' }
        record.memory_info = { value: 0, total: '', used: '' }
        record.disk_info = { value: 0, total: '', used: '' }
      }
    })

    // 等待所有请求完成
    await Promise.all(metricsPromises)
  } catch (error) {
    console.error('获取所有PC监控指标失败:', error)
  }
}

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

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

// 重置
const handleReset = () => {
  formModel.value = {
    keyword: '',
    collect_on: undefined,
  }
  pagination.current = 1
  fetchPCs()
}

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

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

// 新增PC
const handleAdd = () => {
  currentRecord.value = null
  dialogVisible.value = true
}

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

// 编辑PC
const handleEdit = (record: PCItem) => {
  currentRecord.value = record
  dialogVisible.value = true
}

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

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

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

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

// 删除PC
const handleDelete = async (record: PCItem) => {
  Modal.confirm({
    title: '确认删除',
    content: `确认删除PC ${record.name} 吗？`,
    onOk: async () => {
      try {
        await deletePC(record.id)
        Message.success('删除成功')
        fetchPCs()
      } catch (error) {
        console.error('删除PC失败:', error)
        Message.error('删除失败')
      }
    },
  })
}

// 初始化加载数据
onMounted(() => {
  fetchPCs()
})
</script>

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

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

.resource-display {
  display: flex;
  flex-direction: column;
  gap: 4px;

  .resource-info {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .resource-label {
      font-size: 12px;
      color: var(--color-text-3);
    }

    .resource-value {
      font-size: 12px;
      font-weight: 500;
      color: var(--color-text-1);
    }
  }
}
</style>
