<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">32</div>
              <div class="stats-desc">在线 31 / 离线 1</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">1,024</div>
              <div class="stats-desc">使用率 78%</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-green">
              <icon-link />
            </div>
            <div class="stats-info">
              <div class="stats-title">总带宽</div>
              <div class="stats-value">45.6 Gbps</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-warning">
              <icon-exclamation-circle />
            </div>
            <div class="stats-info">
              <div class="stats-title">告警设备</div>
              <div class="stats-value">2</div>
              <div class="stats-desc text-danger">需要关注</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row> -->

    <!-- 图表区域 -->
    <!-- <a-row :gutter="16" class="chart-row">
      <a-col :xs="24" :lg="12">
        <a-card title="网络流量趋势" :bordered="false">
          <template #extra>
            <a-space>
              <span class="legend-item">
                <span class="legend-dot legend-dot-1"></span>
                <span>入站</span>
              </span>
              <span class="legend-item">
                <span class="legend-dot legend-dot-2"></span>
                <span>出站</span>
              </span>
            </a-space>
          </template>
          <div class="chart-container">
            <Chart :options="trafficChartOptions" height="280px" />
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="12">
        <a-card title="Top 5 端口流量" :bordered="false">
          <template #extra>
            <span class="text-muted">当前流量最大的端口</span>
          </template>
          <div class="port-list">
            <div v-for="item in topPorts" :key="item.name" class="port-item">
              <div class="port-header">
                <span class="port-name">{{ item.name }}</span>
                <span class="port-value">{{ item.value }}</span>
              </div>
              <a-progress
                :percent="item.percent"
                :stroke-width="8"
                :show-text="false"
                :color="getPortColor(item.percent)"
              />
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row> -->

    <!-- 快速统计 -->
    <!-- <a-row :gutter="16" class="quick-stats-row">
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="quick-stats-card" :bordered="false">
          <div class="quick-stats-header">
            <div class="quick-stats-icon quick-stats-icon-primary">
              <icon-storage />
            </div>
            <div class="quick-stats-info">
              <div class="quick-stats-title">核心层</div>
              <div class="quick-stats-desc">2 设备在线</div>
            </div>
          </div>
          <div class="quick-stats-footer">
            <span class="quick-stats-value">99.9%</span>
            <a-tag color="green">正常</a-tag>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="quick-stats-card" :bordered="false">
          <div class="quick-stats-header">
            <div class="quick-stats-icon quick-stats-icon-cyan">
              <icon-apps />
            </div>
            <div class="quick-stats-info">
              <div class="quick-stats-title">汇聚层</div>
              <div class="quick-stats-desc">4 设备在线</div>
            </div>
          </div>
          <div class="quick-stats-footer">
            <span class="quick-stats-value">100%</span>
            <a-tag color="green">正常</a-tag>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="quick-stats-card" :bordered="false">
          <div class="quick-stats-header">
            <div class="quick-stats-icon quick-stats-icon-purple">
              <icon-drive-file />
            </div>
            <div class="quick-stats-info">
              <div class="quick-stats-title">接入层</div>
              <div class="quick-stats-desc">24 设备在线</div>
            </div>
          </div>
          <div class="quick-stats-footer">
            <span class="quick-stats-value">95.8%</span>
            <a-tag color="orange">告警</a-tag>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :lg="6">
        <a-card class="quick-stats-card" :bordered="false">
          <div class="quick-stats-header">
            <div class="quick-stats-icon quick-stats-icon-green">
              <icon-wifi />
            </div>
            <div class="quick-stats-info">
              <div class="quick-stats-title">无线网络</div>
              <div class="quick-stats-desc">1 控制器离线</div>
            </div>
          </div>
          <div class="quick-stats-footer">
            <span class="quick-stats-value">0%</span>
            <a-tag color="red">异常</a-tag>
          </div>
        </a-card>
      </a-col>
    </a-row> -->

    <!-- 设备列表 -->
    <a-card title="设备列表" :bordered="false">
      <template #extra>
        <a-select v-model="selectedType" placeholder="全部类型" style="width: 150px">
          <a-option value="">全部类型</a-option>
          <a-option value="核心交换机">核心交换机</a-option>
          <a-option value="汇聚交换机">汇聚交换机</a-option>
          <a-option value="接入交换机">接入交换机</a-option>
          <a-option value="边界路由">路由器</a-option>
          <a-option value="无线控制器">无线设备</a-option>
        </a-select>
      </template>
      <a-table
        :data="filteredDevices"
        :columns="columns"
        :loading="loading"
        :pagination="false"
        row-key="name"
      >
        <!-- 状态列 -->
        <template #status="{ record }">
          <a-tag :color="getStatusColor(record.statusValue)" bordered>
            {{ record.statusText }}
          </a-tag>
        </template>

        <!-- 带宽使用列 -->
        <template #traffic="{ record }">
          <div class="traffic-cell">
            <a-progress
              :percent="record.trafficPercent"
              :stroke-width="8"
              :show-text="false"
              :color="getTrafficColor(record.trafficPercent)"
            />
            <span class="traffic-text">{{ record.trafficPercent }}%</span>
          </div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import {
  IconStorage,
  IconDriveFile,
  IconLink,
  IconExclamationCircle,
  IconApps,
  IconWifi,
} 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 loading = ref(false)
const selectedType = ref('')

// 统计数据
const topPorts = ref([
  { name: 'Core-SW-01 Port 1', value: '8.5 Gbps', percent: 85 },
  { name: 'Core-SW-02 Port 1', value: '7.2 Gbps', percent: 72 },
  { name: 'Router-01 Port 1', value: '6.8 Gbps', percent: 68 },
  { name: 'Dist-SW-01 Port 24', value: '4.5 Gbps', percent: 45 },
  { name: 'Access-SW-01 Port 48', value: '3.2 Gbps', percent: 32 },
])

// 表格列配置
const columns: TableColumnData[] = [
  {
    title: '设备名称',
    dataIndex: 'name',
    width: 150,
  },
  {
    title: '类型',
    dataIndex: 'type',
    width: 120,
  },
  {
    title: '型号',
    dataIndex: 'model',
    width: 180,
  },
  {
    title: '管理IP',
    dataIndex: 'ip',
    width: 130,
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 100,
    align: 'center',
  },
  {
    title: '运行时间',
    dataIndex: 'uptime',
    width: 140,
  },
  {
    title: '端口使用',
    dataIndex: 'ports',
    width: 100,
    align: 'center',
  },
  {
    title: '带宽使用',
    dataIndex: 'traffic',
    slotName: 'traffic',
    width: 200,
  },
]

// 设备数据
const networkDevices = ref([
  {
    name: 'Core-SW-01',
    type: '核心交换机',
    model: 'Cisco Nexus 9336C',
    ip: '10.0.0.1',
    statusValue: 'online',
    statusText: '在线',
    uptime: '365天 12小时',
    ports: '36/36',
    trafficPercent: 45,
  },
  {
    name: 'Core-SW-02',
    type: '核心交换机',
    model: 'Cisco Nexus 9336C',
    ip: '10.0.0.2',
    statusValue: 'online',
    statusText: '在线',
    uptime: '365天 12小时',
    ports: '34/36',
    trafficPercent: 52,
  },
  {
    name: 'Dist-SW-01',
    type: '汇聚交换机',
    model: 'Cisco Catalyst 9500',
    ip: '10.0.1.1',
    statusValue: 'online',
    statusText: '在线',
    uptime: '180天 8小时',
    ports: '24/48',
    trafficPercent: 38,
  },
  {
    name: 'Access-SW-01',
    type: '接入交换机',
    model: 'Cisco Catalyst 9300',
    ip: '10.0.2.1',
    statusValue: 'warning',
    statusText: '高负载',
    uptime: '90天 4小时',
    ports: '45/48',
    trafficPercent: 88,
  },
  {
    name: 'Router-01',
    type: '边界路由',
    model: 'Cisco ASR 1002-HX',
    ip: '10.0.0.254',
    statusValue: 'online',
    statusText: '在线',
    uptime: '425天 6小时',
    ports: '4/4',
    trafficPercent: 62,
  },
  {
    name: 'AP-Controller',
    type: '无线控制器',
    model: 'Cisco 9800-40',
    ip: '10.0.3.1',
    statusValue: 'offline',
    statusText: '离线',
    uptime: '-',
    ports: '-',
    trafficPercent: 0,
  },
])

// 过滤后的设备列表
const filteredDevices = computed(() => {
  if (!selectedType.value) {
    return networkDevices.value
  }
  return networkDevices.value.filter((device) => device.type === selectedType.value)
})

// 流量趋势图表配置
const trafficChartOptions = 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: 'Gbps',
  },
  series: [
    {
      name: '入站',
      type: 'line',
      smooth: true,
      data: [2.5, 1.2, 8.5, 12.4, 10.8, 5.6, 3.2],
      areaStyle: {
        opacity: 0.1,
      },
      lineStyle: {
        width: 2,
        color: '#165DFF',
      },
      itemStyle: {
        color: '#165DFF',
      },
    },
    {
      name: '出站',
      type: 'line',
      smooth: true,
      data: [1.8, 0.8, 6.2, 9.8, 8.2, 4.2, 2.4],
      areaStyle: {
        opacity: 0.1,
      },
      lineStyle: {
        width: 2,
        color: '#14C9C9',
      },
      itemStyle: {
        color: '#14C9C9',
      },
    },
  ],
})

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

// 获取端口流量颜色
const getPortColor = (percent: number) => {
  if (percent >= 80) return '#F53F3F'
  if (percent >= 60) return '#FF7D00'
  return '#165DFF'
}

// 获取带宽使用颜色
const getTrafficColor = (percent: number) => {
  if (percent >= 80) return '#F53F3F'
  if (percent >= 60) return '#FF7D00'
  return '#165DFF'
}

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

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

<script lang="ts">
export default {
  name: 'NetworkMonitor',
}
</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));
    }

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

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

    &-warning {
      background-color: rgba(255, 125, 0, 0.1);
      color: rgb(var(--warning-6));
    }
  }

  .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: 280px;
}

.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;
  }
}

.port-list {
  padding: 8px 0;
}

.port-item {
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }
}

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

.port-name {
  font-size: 14px;
  color: var(--color-text-2);
}

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

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

.quick-stats-card {
  height: 100%;

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

  .quick-stats-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

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

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

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

    &-purple {
      background-color: rgba(114, 46, 209, 0.1);
      color: #722ed1;
    }

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

  .quick-stats-info {
    flex: 1;
  }

  .quick-stats-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-1);
  }

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

  .quick-stats-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .quick-stats-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-1);
  }
}

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

.traffic-text {
  font-size: 12px;
  color: var(--color-text-3);
  min-width: 40px;
}

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

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

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