<template>
  <div class="container">
    <!-- 统计卡片 -->
    <!-- <a-row :gutter="16" class="stats-row">
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false">
          <div class="stats-content">
            <div class="stats-icon stats-icon-primary">
              <icon-storage />
            </div>
            <div class="stats-info">
              <div class="stats-title">虚拟机总数</div>
              <div class="stats-value">{{ stats.total }}</div>
              <div class="stats-desc">跨 8 台宿主机</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false">
          <div class="stats-content">
            <div class="stats-icon stats-icon-success">
              <icon-check-circle-fill />
            </div>
            <div class="stats-info">
              <div class="stats-title">运行中</div>
              <div class="stats-value">{{ stats.running }}</div>
              <div class="stats-desc text-success">90.7%</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false">
          <div class="stats-content">
            <div class="stats-icon stats-icon-primary">
              <icon-code-square />
            </div>
            <div class="stats-info">
              <div class="stats-title">CPU使用率</div>
              <div class="stats-value">{{ stats.cpuUsage }}%</div>
              <div class="stats-desc">集群平均</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="stats-card" :bordered="false">
          <div class="stats-content">
            <div class="stats-icon stats-icon-cyan">
              <icon-drive-file />
            </div>
            <div class="stats-info">
              <div class="stats-title">内存使用率</div>
              <div class="stats-value">{{ stats.memoryUsage }}%</div>
              <div class="stats-desc">集群平均</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row> -->

    <!-- 图表区域 -->
    <!-- <a-row :gutter="16" class="chart-row">
      <a-col :xs="24" :lg="8">
        <a-card title="资源使用趋势" :bordered="false">
          <template #extra>
            <a-space>
              <span class="legend-item">
                <span class="legend-dot legend-dot-1"></span>
                <span>CPU</span>
              </span>
              <span class="legend-item">
                <span class="legend-dot legend-dot-3"></span>
                <span>内存</span>
              </span>
            </a-space>
          </template>
          <div class="chart-container">
            <Chart :options="performanceChartOptions" height="240px" />
          </div>
          <div class="chart-legend-placeholder"></div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="8">
        <a-card title="CPU资源分配" :bordered="false">
          <template #extra>
            <span class="text-muted">集群总计 256 vCPU</span>
          </template>
          <div class="chart-container">
            <Chart :options="cpuChartOptions" height="240px" />
          </div>
          <div class="chart-legend">
            <div class="legend-item">
              <span class="legend-dot legend-dot-1"></span>
              <span>已分配 174 vCPU</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot legend-dot-gray"></span>
              <span>可用 82 vCPU</span>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="8">
        <a-card title="内存资源分配" :bordered="false">
          <template #extra>
            <span class="text-muted">集群总计 512 GB</span>
          </template>
          <div class="chart-container">
            <Chart :options="memoryChartOptions" height="240px" />
          </div>
          <div class="chart-legend">
            <div class="legend-item">
              <span class="legend-dot legend-dot-2"></span>
              <span>已使用 384 GB</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot legend-dot-gray"></span>
              <span>可用 128 GB</span>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row> -->

    <!-- 宿主机状态 -->
    <!-- <a-row :gutter="16" class="host-row">
      <a-col v-for="host in hostStatus" :key="host.name" :xs="12" :sm="6">
        <a-card class="host-card" :bordered="false">
          <div class="host-header">
            <span class="host-name">{{ host.name }}</span>
            <a-tag color="green" size="small">在线</a-tag>
          </div>
          <div class="host-metrics">
            <div class="metric-item">
              <div class="metric-header">
                <span class="metric-label">CPU</span>
                <span class="metric-value">{{ host.cpu }}%</span>
              </div>
              <a-progress :percent="host.cpu / 100" :stroke-width="6" :show-text="false" />
            </div>
            <div class="metric-item">
              <div class="metric-header">
                <span class="metric-label">内存</span>
                <span class="metric-value">{{ host.memory }}%</span>
              </div>
              <a-progress :percent="host.memory / 100" :stroke-width="6" :show-text="false" />
            </div>
            <div class="metric-item metric-vm">
              <span class="metric-label">虚拟机数</span>
              <span class="metric-value-right">{{ host.vmCount }}</span>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row> -->

    <!-- 虚拟机列表 -->
    <a-card title="虚拟机列表" :bordered="false">
      <template #extra>
        <a-space>
          <a-select v-model="filterHost" placeholder="全部宿主机" style="width: 130px">
            <a-option value="">全部宿主机</a-option>
            <a-option value="ESXi-01">ESXi-01</a-option>
            <a-option value="ESXi-02">ESXi-02</a-option>
            <a-option value="ESXi-03">ESXi-03</a-option>
            <a-option value="ESXi-04">ESXi-04</a-option>
          </a-select>
          <a-select v-model="filterStatus" placeholder="全部状态" style="width: 120px">
            <a-option value="">全部状态</a-option>
            <a-option value="running">运行中</a-option>
            <a-option value="stopped">已停止</a-option>
            <a-option value="warning">异常</a-option>
          </a-select>
        </a-space>
      </template>
      <a-table
        :data="filteredVMs"
        :columns="columns"
        :loading="loading"
        :pagination="false"
        row-key="name"
      >
        <!-- 状态列 -->
        <template #status="{ record }">
          <a-tag :color="getStatusColor(record.statusValue)" bordered>
            {{ record.statusText }}
          </a-tag>
        </template>

        <!-- CPU列 -->
        <template #cpu="{ record }">
          <div class="progress-cell">
            <a-progress
              :percent="record.cpu / 100"
              :stroke-width="6"
              :show-text="false"
              :status="getProgressStatus(record.cpu)"
            />
            <span class="progress-text">{{ record.cpu }}%</span>
          </div>
        </template>

        <!-- 内存列 -->
        <template #memory="{ record }">
          <div class="progress-cell">
            <a-progress
              :percent="record.memory / 100"
              :stroke-width="6"
              :show-text="false"
              :status="getProgressStatus(record.memory)"
            />
            <span class="progress-text">{{ record.memory }}%</span>
          </div>
        </template>

        <!-- 存储列 -->
        <template #storage="{ record }">
          <div class="progress-cell">
            <a-progress
              :percent="record.storage / 100"
              :stroke-width="6"
              :show-text="false"
              :status="getProgressStatus(record.storage)"
            />
            <span class="progress-text">{{ record.storage }}%</span>
          </div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import {
  IconStorage,
  IconCheckCircleFill,
  IconCodeSquare,
  IconDriveFile,
} from '@arco-design/web-vue/es/icon'
import Breadcrumb from '@/components/breadcrumb/index.vue'
import Chart from '@/components/chart/index.vue'
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'

// 统计数据
const stats = ref({
  total: 86,
  running: 78,
  cpuUsage: 68,
  memoryUsage: 75,
})

const loading = ref(false)
const filterHost = ref('')
const filterStatus = ref('')

// 表格列配置
const columns: TableColumnData[] = [
  {
    title: '虚拟机名称',
    dataIndex: 'name',
    width: 130,
  },
  {
    title: '宿主机',
    dataIndex: 'host',
    width: 100,
  },
  {
    title: '操作系统',
    dataIndex: 'os',
    width: 150,
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 100,
    align: 'center',
  },
  {
    title: 'CPU使用率',
    dataIndex: 'cpu',
    slotName: 'cpu',
    width: 150,
  },
  {
    title: '内存使用率',
    dataIndex: 'memory',
    slotName: 'memory',
    width: 150,
  },
  {
    title: '存储使用率',
    dataIndex: 'storage',
    slotName: 'storage',
    width: 150,
  },
  {
    title: '网络流量',
    dataIndex: 'network',
    width: 100,
    align: 'center',
  },
]

// 虚拟机数据
const vmData = ref([
  {
    name: 'VM-Web-01',
    host: 'ESXi-01',
    os: 'CentOS 7.9',
    statusValue: 'running',
    statusText: '运行中',
    cpu: 65,
    memory: 72,
    storage: 45,
    network: '1.2 Gbps',
  },
  {
    name: 'VM-DB-01',
    host: 'ESXi-01',
    os: 'Ubuntu 22.04',
    statusValue: 'running',
    statusText: '运行中',
    cpu: 85,
    memory: 88,
    storage: 78,
    network: '850 Mbps',
  },
  {
    name: 'VM-App-01',
    host: 'ESXi-02',
    os: 'Windows Server 2022',
    statusValue: 'running',
    statusText: '运行中',
    cpu: 42,
    memory: 55,
    storage: 35,
    network: '450 Mbps',
  },
  {
    name: 'VM-Cache-01',
    host: 'ESXi-02',
    os: 'CentOS 8',
    statusValue: 'warning',
    statusText: '高负载',
    cpu: 92,
    memory: 95,
    storage: 60,
    network: '2.1 Gbps',
  },
  {
    name: 'VM-Dev-01',
    host: 'ESXi-03',
    os: 'Ubuntu 20.04',
    statusValue: 'stopped',
    statusText: '已停止',
    cpu: 0,
    memory: 0,
    storage: 25,
    network: '-',
  },
  {
    name: 'VM-Test-01',
    host: 'ESXi-03',
    os: 'Debian 11',
    statusValue: 'running',
    statusText: '运行中',
    cpu: 28,
    memory: 35,
    storage: 42,
    network: '320 Mbps',
  },
])

// 过滤后的虚拟机列表
const filteredVMs = computed(() => {
  let result = vmData.value

  if (filterHost.value) {
    result = result.filter((vm) => vm.host === filterHost.value)
  }

  if (filterStatus.value) {
    result = result.filter((vm) => vm.statusValue === filterStatus.value)
  }

  return result
})

// 宿主机状态
const hostStatus = ref([
  { name: 'ESXi-01', cpu: 65, memory: 78, vmCount: 24 },
  { name: 'ESXi-02', cpu: 72, memory: 85, vmCount: 22 },
  { name: 'ESXi-03', cpu: 45, memory: 52, vmCount: 18 },
  { name: 'ESXi-04', cpu: 58, memory: 68, vmCount: 22 },
])

// 资源使用趋势图表配置
const performanceChartOptions = ref({
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
  },
  yAxis: {
    type: 'value',
    name: '%',
    max: 100,
  },
  series: [
    {
      name: 'CPU',
      type: 'line',
      smooth: true,
      data: [45, 38, 72, 85, 78, 55, 42],
      lineStyle: {
        width: 2,
        color: '#165DFF',
      },
      itemStyle: {
        color: '#165DFF',
      },
    },
    {
      name: '内存',
      type: 'line',
      smooth: true,
      data: [62, 58, 75, 82, 79, 65, 60],
      lineStyle: {
        width: 2,
        color: '#F7BA1E',
      },
      itemStyle: {
        color: '#F7BA1E',
      },
    },
  ],
})

// CPU资源分配图表配置
const cpuChartOptions = ref({
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
      },
      data: [
        { value: 68, name: '已分配', itemStyle: { color: '#165DFF' } },
        { value: 32, name: '可用', itemStyle: { color: '#E5E6EB' } },
      ],
    },
  ],
})

// 内存资源分配图表配置
const memoryChartOptions = ref({
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
      },
      data: [
        { value: 75, name: '已使用', itemStyle: { color: '#14C9C9' } },
        { value: 25, name: '可用', itemStyle: { color: '#E5E6EB' } },
      ],
    },
  ],
})

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    running: 'green',
    stopped: 'gray',
    warning: 'orange',
  }
  return colorMap[status] || 'gray'
}

// 获取进度条状态
const getProgressStatus = (value: number) => {
  if (value >= 90) return 'danger'
  if (value >= 70) return 'warning'
  return 'normal'
}

// 获取数据
const fetchData = async () => {
  // TODO: 从API获取数据
  loading.value = false
}

// 初始化
onMounted(() => {
  fetchData()
})
</script>

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

<style scoped lang="less">
.container {
  padding: 16px;
}

.stats-row {
  margin-bottom: 16px;
}

.stats-card {
  height: 100%;

  :deep(.arco-card-body) {
    padding: 16px;
  }

  .stats-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .stats-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;

    &-primary {
      background-color: rgba(22, 93, 255, 0.1);
      color: rgb(var(--primary-6));
    }

    &-success {
      background-color: rgba(0, 180, 42, 0.1);
      color: rgb(var(--success-6));
    }

    &-cyan {
      background-color: rgba(20, 201, 201, 0.1);
      color: #14C9C9;
    }
  }

  .stats-info {
    flex: 1;
  }

  .stats-title {
    font-size: 14px;
    color: var(--color-text-3);
    margin-bottom: 4px;
  }

  .stats-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-1);
    line-height: 1.2;
    margin-bottom: 4px;
  }

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

.chart-row {
  margin-bottom: 16px;
}

.chart-container {
  height: 240px;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 8px;
}

.chart-legend-placeholder {
  height: 24px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-3);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;

  &-1 {
    background-color: #165DFF;
  }

  &-2 {
    background-color: #14C9C9;
  }

  &-3 {
    background-color: #F7BA1E;
  }

  &-gray {
    background-color: #E5E6EB;
  }
}

.text-muted {
  color: var(--color-text-3);
}

.text-success {
  color: rgb(var(--success-6));
}

.host-row {
  margin-bottom: 16px;
}

.host-card {
  height: 100%;

  :deep(.arco-card-body) {
    padding: 16px;
  }

  .host-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .host-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-1);
  }

  .host-metrics {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .metric-item {
    .metric-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
    }

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

    .metric-value {
      font-size: 12px;
      color: var(--color-text-1);
    }
  }

  .metric-vm {
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .metric-value-right {
    font-size: 12px;
    color: var(--color-text-1);
  }
}

.progress-cell {
  display: flex;
  align-items: center;
  gap: 8px;

  .progress-text {
    font-size: 12px;
    color: var(--color-text-3);
    min-width: 36px;
  }
}
</style>