<template>
  <div class="container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="page-title">
        <h2>流量分析管理</h2>
        <p class="page-subtitle">实时监控和分析网络流量，识别异常流量模式</p>
      </div>
      <div class="page-actions">
        <a-select v-model="timeRange" style="width: 140px; margin-right: 12px">
          <a-option value="24h">最近24小时</a-option>
          <a-option value="7d">最近7天</a-option>
          <a-option value="30d">最近30天</a-option>
          <a-option value="custom">自定义</a-option>
        </a-select>
      </div>
    </div>

    <!-- 统计卡片 -->
    <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">
              <IconActivity />
            </div>
            <div class="stats-info">
              <div class="stats-title">当前带宽</div>
              <div class="stats-value">12.4 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-cyan">
              <IconArrowDown />
            </div>
            <div class="stats-info">
              <div class="stats-title">入站流量</div>
              <div class="stats-value">8.5 TB</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-green">
              <IconArrowUp />
            </div>
            <div class="stats-info">
              <div class="stats-title">出站流量</div>
              <div class="stats-value">6.2 TB</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-purple">
              <IconWorld />
            </div>
            <div class="stats-info">
              <div class="stats-title">活跃会话</div>
              <div class="stats-value">256K</div>
              <div class="stats-desc">
                <span class="text-success">
                  <IconTrendingUp />
                  较昨日 +12%
                </span>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 流量趋势图表 -->
    <a-card class="chart-card" :bordered="false">
      <template #title>
        <div class="card-title">
          <span>流量趋势</span>
          <span class="card-subtitle">过去24小时网络流量 (Gbps)</span>
        </div>
      </template>
      <template #extra>
        <a-space>
          <span class="legend-item">
            <span class="legend-dot legend-dot-inbound"></span>
            <span>入站</span>
          </span>
          <span class="legend-item">
            <span class="legend-dot legend-dot-outbound"></span>
            <span>出站</span>
          </span>
        </a-space>
      </template>
      <div class="chart-container">
        <Chart :options="trafficChartOptions" height="250px" />
      </div>
    </a-card>

    <!-- 流量分布 -->
    <a-row :gutter="16" class="distribution-row">
      <a-col :xs="24" :lg="8">
        <a-card class="distribution-card" :bordered="false">
          <template #title>
            <div class="card-title">
              <span>协议分布</span>
              <span class="card-subtitle">按协议类型统计</span>
            </div>
          </template>
          <div class="protocol-list">
            <div v-for="item in protocolData" :key="item.name" class="protocol-item">
              <div class="protocol-header">
                <span class="protocol-name">{{ item.name }}</span>
                <span class="protocol-value">{{ item.percent }}%</span>
              </div>
              <a-progress
                :percent="item.percent"
                :stroke-width="8"
                :show-text="false"
                :color="item.color"
              />
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="8">
        <a-card class="distribution-card" :bordered="false">
          <template #title>
            <div class="card-title">
              <span>流量方向</span>
              <span class="card-subtitle">内外网流量占比</span>
            </div>
          </template>
          <div class="direction-list">
            <div class="direction-item">
              <div class="direction-icon direction-icon-external">
                <IconWorld />
              </div>
              <div class="direction-info">
                <div class="direction-header">
                  <span class="direction-name">外网流量</span>
                  <span class="direction-percent">65%</span>
                </div>
                <a-progress :percent="65" :stroke-width="8" :show-text="false" color="#165DFF" />
              </div>
            </div>
            <div class="direction-item">
              <div class="direction-icon direction-icon-internal">
                <IconServer />
              </div>
              <div class="direction-info">
                <div class="direction-header">
                  <span class="direction-name">内网流量</span>
                  <span class="direction-percent">35%</span>
                </div>
                <a-progress :percent="35" :stroke-width="8" :show-text="false" color="#14C9C9" />
              </div>
            </div>
          </div>
          <a-divider />
          <a-row :gutter="16" class="direction-stats">
            <a-col :span="12">
              <div class="direction-stat">
                <div class="stat-label">外网入站</div>
                <div class="stat-value">5.2 TB</div>
                <div class="stat-change text-success">
                  <IconTrendingUp />
                  +8.5%
                </div>
              </div>
            </a-col>
            <a-col :span="12">
              <div class="direction-stat">
                <div class="stat-label">外网出站</div>
                <div class="stat-value">3.8 TB</div>
                <div class="stat-change text-success">
                  <IconTrendingUp />
                  +5.2%
                </div>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="8">
        <a-card class="distribution-card" :bordered="false">
          <template #title>
            <div class="card-title">
              <span>带宽利用率</span>
              <span class="card-subtitle">各链路使用情况</span>
            </div>
          </template>
          <div class="bandwidth-list">
            <div v-for="item in bandwidthData" :key="item.name" class="bandwidth-item">
              <div class="bandwidth-header">
                <span class="bandwidth-name">{{ item.name }}</span>
                <span class="bandwidth-value">{{ item.percent }}%</span>
              </div>
              <a-progress
                :percent="item.percent"
                :stroke-width="8"
                :show-text="false"
                :color="getBandwidthColor(item.percent)"
              />
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 数据表格 -->
    <a-row :gutter="16" class="tables-row">
      <a-col :xs="24" :lg="12">
        <a-card class="table-card" :bordered="false">
          <template #title>
            <div class="table-header">
              <span>Top 应用流量</span>
              <a-link>查看全部</a-link>
            </div>
          </template>
          <a-table
            :data="topApplications"
            :columns="applicationColumns"
            :pagination="false"
            row-key="name"
          >
            <template #share="{ record }">
              <a-progress
                :percent="record.shareValue"
                :stroke-width="8"
                :show-text="false"
                color="#165DFF"
              />
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="12">
        <a-card class="table-card" :bordered="false">
          <template #title>
            <div class="table-header">
              <span>Top 流量源</span>
              <a-link>查看全部</a-link>
            </div>
          </template>
          <a-table
            :data="topSources"
            :columns="sourceColumns"
            :pagination="false"
            row-key="ip"
          >
            <template #status="{ record }">
              <a-tag :color="record.statusColor" bordered>{{ record.statusText }}</a-tag>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  IconActivity,
  IconArrowDown,
  IconArrowUp,
  IconWorld,
  IconTrendingUp,
  IconServer,
  IconDownload,
  IconChartLine,
} from '@tabler/icons-vue'
import Chart from '@/components/chart/index.vue'
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'

// 时间范围
const timeRange = ref('24h')

// 流量趋势数据
const trafficData = [
  { time: '00:00', inbound: 2.5, outbound: 1.8 },
  { time: '02:00', inbound: 1.8, outbound: 1.2 },
  { time: '04:00', inbound: 1.2, outbound: 0.8 },
  { time: '06:00', inbound: 2.0, outbound: 1.5 },
  { time: '08:00', inbound: 8.5, outbound: 6.2 },
  { time: '10:00', inbound: 10.2, outbound: 7.8 },
  { time: '12:00', inbound: 12.4, outbound: 9.8 },
  { time: '14:00', inbound: 11.5, outbound: 8.5 },
  { time: '16:00', inbound: 10.8, outbound: 8.2 },
  { time: '18:00', inbound: 8.2, outbound: 6.5 },
  { time: '20:00', inbound: 5.6, outbound: 4.2 },
  { time: '22:00', inbound: 4.2, outbound: 3.2 },
  { time: '24:00', inbound: 3.2, outbound: 2.4 },
]

// 流量趋势图表配置
const trafficChartOptions = ref({
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: trafficData.map((item) => item.time),
  },
  yAxis: {
    type: 'value',
    name: 'Gbps',
  },
  series: [
    {
      name: '入站',
      type: 'line',
      smooth: true,
      data: trafficData.map((item) => item.inbound),
      areaStyle: {
        opacity: 0.1,
        color: '#165DFF',
      },
      lineStyle: {
        width: 2,
        color: '#165DFF',
      },
      itemStyle: {
        color: '#165DFF',
      },
    },
    {
      name: '出站',
      type: 'line',
      smooth: true,
      data: trafficData.map((item) => item.outbound),
      areaStyle: {
        opacity: 0.1,
        color: '#14C9C9',
      },
      lineStyle: {
        width: 2,
        color: '#14C9C9',
      },
      itemStyle: {
        color: '#14C9C9',
      },
    },
  ],
})

// 协议分布数据
const protocolData = [
  { name: 'TCP', percent: 78, color: '#165DFF' },
  { name: 'UDP', percent: 18, color: '#14C9C9' },
  { name: 'ICMP', percent: 2, color: '#F7BA1E' },
  { name: '其他', percent: 2, color: '#86909C' },
]

// 带宽利用率数据
const bandwidthData = [
  { name: '上行链路 1', percent: 85 },
  { name: '上行链路 2', percent: 62 },
  { name: '核心链路', percent: 45 },
  { name: '备用链路', percent: 12 },
]

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

// Top 应用流量数据
const topApplications = ref([
  {
    name: 'HTTPS',
    port: '443',
    inbound: '4.2 Gbps',
    outbound: '3.1 Gbps',
    sessions: '125,456',
    shareValue: 45,
  },
  {
    name: 'HTTP',
    port: '80',
    inbound: '1.8 Gbps',
    outbound: '1.2 Gbps',
    sessions: '45,678',
    shareValue: 22,
  },
  {
    name: 'SSH',
    port: '22',
    inbound: '0.5 Gbps',
    outbound: '0.3 Gbps',
    sessions: '2,345',
    shareValue: 8,
  },
  {
    name: 'MySQL',
    port: '3306',
    inbound: '0.8 Gbps',
    outbound: '1.5 Gbps',
    sessions: '1,234',
    shareValue: 12,
  },
  {
    name: 'DNS',
    port: '53',
    inbound: '0.2 Gbps',
    outbound: '0.2 Gbps',
    sessions: '89,012',
    shareValue: 5,
  },
])

// 应用流量表格列
const applicationColumns: TableColumnData[] = [
  { title: '应用', dataIndex: 'name', width: 80 },
  { title: '端口', dataIndex: 'port', width: 70, align: 'center' },
  { title: '入站流量', dataIndex: 'inbound', width: 100 },
  { title: '出站流量', dataIndex: 'outbound', width: 100 },
  { title: '会话数', dataIndex: 'sessions', width: 90 },
  { title: '占比', dataIndex: 'share', slotName: 'share', width: 100 },
]

// Top 流量源数据
const topSources = ref([
  {
    ip: '192.168.1.100',
    name: 'Web-Server-01',
    traffic: '2.8 Gbps',
    sessions: '45,678',
    statusColor: 'green',
    statusText: '在线',
  },
  {
    ip: '192.168.1.101',
    name: 'Web-Server-02',
    traffic: '2.4 Gbps',
    sessions: '38,456',
    statusColor: 'green',
    statusText: '在线',
  },
  {
    ip: '192.168.2.50',
    name: 'API-Gateway',
    traffic: '1.8 Gbps',
    sessions: '28,901',
    statusColor: 'green',
    statusText: '在线',
  },
  {
    ip: '192.168.3.10',
    name: 'DB-Master',
    traffic: '1.5 Gbps',
    sessions: '12,345',
    statusColor: 'orange',
    statusText: '高负载',
  },
  {
    ip: '192.168.1.200',
    name: 'Cache-Server',
    traffic: '1.2 Gbps',
    sessions: '56,789',
    statusColor: 'green',
    statusText: '在线',
  },
])

// 流量源表格列
const sourceColumns: TableColumnData[] = [
  { title: 'IP地址', dataIndex: 'ip', width: 120 },
  { title: '设备名称', dataIndex: 'name', width: 130 },
  { title: '流量', dataIndex: 'traffic', width: 90 },
  { title: '会话数', dataIndex: 'sessions', width: 90 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 80, align: 'center' },
]
</script>

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

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

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;

  .page-title {
    h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--color-text-1);
    }

    .page-subtitle {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--color-text-3);
    }
  }

  .page-actions {
    display: flex;
    align-items: center;
  }
}

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

.stats-card {
  height: 100px;

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

  .stats-content {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
  }

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

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

  .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);
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.chart-card {
  margin-bottom: 16px;

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

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

    span:first-child {
      font-size: 16px;
      font-weight: 500;
      color: var(--color-text-1);
    }

    .card-subtitle {
      font-size: 12px;
      color: var(--color-text-3);
      font-weight: normal;
    }
  }

  .chart-container {
    height: 250px;
  }

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

    &-inbound {
      background-color: #165dff;
    }

    &-outbound {
      background-color: #14c9c9;
    }
  }
}

.distribution-row {
  margin-bottom: 16px;

  > .arco-col {
    margin-bottom: 16px;

    @media (min-width: 992px) {
      margin-bottom: 0;
    }
  }
}

.distribution-card {
  height: 320px;

  :deep(.arco-card-body) {
    padding: 16px;
    height: calc(320px - 60px);
  }

  :deep(.arco-card-header) {
    height: 60px;
    border-bottom: none;
  }

  .card-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    span:first-child {
      font-size: 16px;
      font-weight: 500;
      color: var(--color-text-1);
    }

    .card-subtitle {
      font-size: 12px;
      color: var(--color-text-3);
      font-weight: normal;
    }
  }
}

.protocol-list {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.protocol-item {
  margin-bottom: 0;
}

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

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

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

.direction-list {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 16px;
}

.direction-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

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

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

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

.direction-info {
  flex: 1;
}

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

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

.direction-percent {
  font-size: 14px;
  color: var(--color-text-3);
}

.direction-stats {
  padding-top: 8px;
}

.direction-stat {
  .stat-label {
    font-size: 12px;
    color: var(--color-text-3);
    margin-bottom: 4px;
  }

  .stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 4px;
  }

  .stat-change {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.bandwidth-list {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.bandwidth-item {
  margin-bottom: 0;
}

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

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

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

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

.table-card {
  height: 100%;

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

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-1);
  }
}

.text-success {
  display: flex;
  align-items: center;
  color: rgb(var(--success-6));
}
</style>
