<template>
  <div class="container">
    <!-- 页面标题 -->
    <!-- <div class="page-header">
      <div class="page-title">
        <h2>IP地址管理</h2>
        <p class="page-subtitle">管理IP地址分配，监控地址池使用情况</p>
      </div>
      <div class="page-actions">
        <a-button type="secondary" class="mr-2">
          <template #icon><icon-download /></template>
          导出
        </a-button>
        <a-button type="primary">
          <template #icon><icon-plus /></template>
          添加子网
        </a-button>
      </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">
              <icon-wifi />
            </div>
            <div class="stats-info">
              <div class="stats-title">IP地址池</div>
              <div class="stats-value">6</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-apps />
            </div>
            <div class="stats-info">
              <div class="stats-title">总IP数</div>
              <div class="stats-value">1,524</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-blue">
              <icon-storage />
            </div>
            <div class="stats-info">
              <div class="stats-title">已分配</div>
              <div class="stats-value">630</div>
              <div class="stats-desc">使用率 41.3%</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-exclamation-circle />
            </div>
            <div class="stats-info">
              <div class="stats-title">冲突告警</div>
              <div class="stats-value">0</div>
              <div class="stats-desc text-success">无IP冲突</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 地址池概览和快速查询 -->
    <a-row :gutter="16" class="mt-6 overview-row">
      <a-col :xs="24" :lg="16" class="overview-col">
        <a-card :bordered="false" class="overview-card">
          <template #title>
            <div class="card-title-row">
              <span class="card-title">地址池概览</span>
              <span class="card-subtitle">各子网使用情况可视化</span>
            </div>
          </template>
          <div class="subnet-list">
            <div
              v-for="subnet in ipSubnets"
              :key="subnet.subnet"
              :class="['subnet-item', { active: selectedSubnet === subnet.subnet }]"
              @click="selectedSubnet = selectedSubnet === subnet.subnet ? '' : subnet.subnet"
            >
              <div class="subnet-header">
                <div>
                  <p class="subnet-name">{{ subnet.name }}</p>
                  <p class="subnet-info">{{ subnet.subnet }} · {{ subnet.vlan }}</p>
                </div>
                <div class="subnet-usage">
                  <p class="usage-value">{{ subnet.used }} / {{ subnet.total }}</p>
                  <p class="usage-label">已用 / 总数</p>
                </div>
              </div>
              <div class="subnet-progress">
                <a-progress
                  :percent="Math.round((subnet.used / subnet.total) * 100)"
                  :stroke-width="8"
                  :show-text="false"
                  :color="getUsageColor((subnet.used / subnet.total) * 100)"
                />
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :lg="8" class="overview-col">
        <a-card :bordered="false" class="overview-card">
          <template #title>
            <div class="card-title-row">
              <span class="card-title">快速查询</span>
              <span class="card-subtitle">搜索IP地址或主机名</span>
            </div>
          </template>
          <div class="search-section">
            <a-input v-model="searchQuery" placeholder="输入IP或主机名..." allow-clear>
              <template #prefix><icon-search /></template>
            </a-input>
          </div>

          <a-divider />

          <div class="stats-section">
            <h4 class="section-title">分配类型统计</h4>
            <div class="stat-item">
              <div class="stat-label">
                <span class="color-dot color-dot-blue"></span>
                <span>静态分配</span>
              </div>
              <span class="stat-value">245 (39%)</span>
            </div>
            <div class="stat-item">
              <div class="stat-label">
                <span class="color-dot color-dot-cyan"></span>
                <span>DHCP分配</span>
              </div>
              <span class="stat-value">385 (61%)</span>
            </div>
          </div>

          <a-divider />

          <div class="stats-section">
            <h4 class="section-title">DHCP服务器</h4>
            <div class="stat-item">
              <span class="stat-label">主DHCP</span>
              <a-tag color="green" bordered>在线</a-tag>
            </div>
            <div class="stat-item">
              <span class="stat-label">备DHCP</span>
              <a-tag color="green" bordered>在线</a-tag>
            </div>
            <div class="stat-item">
              <span class="stat-label">租约数</span>
              <span class="stat-value">385</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">平均租期</span>
              <span class="stat-value">8小时</span>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 子网列表 -->
    <a-card class="mt-6" :bordered="false">
      <template #title>
        <div class="table-header">
          <span>子网列表</span>
          <a-select v-model="subnetFilter" placeholder="全部子网" style="width: 140px">
            <a-option value="">全部子网</a-option>
            <a-option value="server">服务器网段</a-option>
            <a-option value="office">办公网段</a-option>
            <a-option value="guest">访客网段</a-option>
          </a-select>
        </div>
      </template>
      <a-table
        :data="ipSubnets"
        :columns="subnetColumns"
        :pagination="false"
        row-key="subnet"
      >
        <template #usage="{ record }">
          <a-progress
            :percent="Math.round((record.used / record.total) * 100)"
            :stroke-width="8"
            :show-text="false"
            :color="getUsageColor((record.used / record.total) * 100)"
          />
        </template>
        <template #status="{ record }">
          <a-tag
            v-if="record.usageStatus === 'warning'"
            color="orange"
            bordered
          >
            使用率高
          </a-tag>
          <a-tag v-else color="green" bordered>正常</a-tag>
        </template>
      </a-table>
    </a-card>

    <!-- IP分配记录 -->
    <a-card class="mt-6" :bordered="false">
      <template #title>
        <div class="table-header">
          <span>IP分配记录</span>
          <a-space>
            <a-select v-model="typeFilter" placeholder="全部类型" style="width: 120px">
              <a-option value="">全部类型</a-option>
              <a-option value="static">静态</a-option>
              <a-option value="dhcp">DHCP</a-option>
            </a-select>
            <a-select v-model="statusFilter" placeholder="全部状态" style="width: 120px">
              <a-option value="">全部状态</a-option>
              <a-option value="online">在线</a-option>
              <a-option value="offline">离线</a-option>
            </a-select>
          </a-space>
        </div>
      </template>
      <a-table
        :data="ipAllocations"
        :columns="allocationColumns"
        :pagination="false"
        row-key="ip"
      >
        <template #status="{ record }">
          <a-tag :color="record.status === 'online' ? 'green' : 'red'" bordered>
            {{ record.status === 'online' ? '在线' : '离线' }}
          </a-tag>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  IconWifi,
  IconApps,
  IconStorage,
  IconExclamationCircle,
  IconDownload,
  IconPlus,
  IconSearch,
} from '@arco-design/web-vue/es/icon'
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'

// 搜索和筛选
const searchQuery = ref('')
const selectedSubnet = ref('')
const subnetFilter = ref('')
const typeFilter = ref('')
const statusFilter = ref('')

// 获取使用率颜色
const getUsageColor = (percent: number) => {
  if (percent >= 70) return '#FF7D00'
  return '#165DFF'
}

// 子网数据
const ipSubnets = ref([
  {
    subnet: '10.0.0.0/24',
    name: '核心网络',
    vlan: 'VLAN 1',
    gateway: '10.0.0.1',
    total: 254,
    used: 45,
    available: 209,
    usageStatus: 'success',
  },
  {
    subnet: '10.0.1.0/24',
    name: '服务器网段',
    vlan: 'VLAN 10',
    gateway: '10.0.1.1',
    total: 254,
    used: 186,
    available: 68,
    usageStatus: 'warning',
  },
  {
    subnet: '10.0.2.0/24',
    name: '虚拟化网段',
    vlan: 'VLAN 20',
    gateway: '10.0.2.1',
    total: 254,
    used: 124,
    available: 130,
    usageStatus: 'success',
  },
  {
    subnet: '10.0.3.0/24',
    name: '存储网段',
    vlan: 'VLAN 30',
    gateway: '10.0.3.1',
    total: 254,
    used: 32,
    available: 222,
    usageStatus: 'success',
  },
  {
    subnet: '192.168.1.0/24',
    name: '办公网络',
    vlan: 'VLAN 100',
    gateway: '192.168.1.1',
    total: 254,
    used: 198,
    available: 56,
    usageStatus: 'warning',
  },
  {
    subnet: '192.168.2.0/24',
    name: '访客网络',
    vlan: 'VLAN 200',
    gateway: '192.168.2.1',
    total: 254,
    used: 45,
    available: 209,
    usageStatus: 'success',
  },
])

// IP分配数据
const ipAllocations = ref([
  {
    ip: '10.0.1.10',
    hostname: 'Web-Server-01',
    mac: '00:50:56:AB:01:10',
    type: '静态',
    status: 'online',
    lastSeen: '在线',
  },
  {
    ip: '10.0.1.11',
    hostname: 'Web-Server-02',
    mac: '00:50:56:AB:01:11',
    type: '静态',
    status: 'online',
    lastSeen: '在线',
  },
  {
    ip: '10.0.1.50',
    hostname: 'DB-Master',
    mac: '00:50:56:AB:01:50',
    type: '静态',
    status: 'online',
    lastSeen: '在线',
  },
  {
    ip: '10.0.1.51',
    hostname: 'DB-Slave',
    mac: '00:50:56:AB:01:51',
    type: '静态',
    status: 'online',
    lastSeen: '在线',
  },
  {
    ip: '192.168.1.100',
    hostname: 'PC-Zhang',
    mac: '00:1A:2B:3C:4D:10',
    type: 'DHCP',
    status: 'online',
    lastSeen: '在线',
  },
  {
    ip: '192.168.1.101',
    hostname: 'PC-Li',
    mac: '00:1A:2B:3C:4D:11',
    type: 'DHCP',
    status: 'offline',
    lastSeen: '2小时前',
  },
])

// 子网表格列
const subnetColumns: TableColumnData[] = [
  { title: '子网', dataIndex: 'subnet', width: 140 },
  { title: '名称', dataIndex: 'name', width: 120 },
  { title: 'VLAN', dataIndex: 'vlan', width: 100 },
  { title: '网关', dataIndex: 'gateway', width: 120 },
  { title: '总数', dataIndex: 'total', width: 80, align: 'center' },
  { title: '已用', dataIndex: 'used', width: 80, align: 'center' },
  { title: '可用', dataIndex: 'available', width: 80, align: 'center' },
  { title: '使用率', dataIndex: 'usage', slotName: 'usage', width: 160 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100, align: 'center' },
]

// IP分配表格列
const allocationColumns: TableColumnData[] = [
  { title: 'IP地址', dataIndex: 'ip', width: 150 },
  { title: '主机名', dataIndex: 'hostname', width: 200 },
  { title: 'MAC地址', dataIndex: 'mac', width: 180 },
  { title: '分配类型', dataIndex: 'type', width: 100, align: 'center' },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100, align: 'center' },
  { title: '最后在线', dataIndex: 'lastSeen', width: 120 },
]
</script>

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

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

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

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

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

  .page-actions {
    display: flex;
    gap: 8px;
  }
}

.mr-2 {
  margin-right: 8px;
}

.stats-row {
  margin-bottom: 0;
}

.stats-card {
  .stats-content {
    display: flex;
    align-items: center;
    gap: 16px;
  }

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

    &-primary {
      background: rgba(22, 93, 255, 0.1);
      color: #165dff;
    }

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

    &-blue {
      background: rgba(22, 93, 255, 0.1);
      color: #165dff;
    }

    &-success {
      background: rgba(0, 180, 42, 0.1);
      color: #00b42a;
    }
  }

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

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

    &.text-success {
      color: #00b42a;
    }
  }
}

.mt-6 {
  margin-top: 24px;
}

.overview-row {
  display: flex;
  align-items: stretch;
}

.overview-col {
  display: flex;

  :deep(.arco-card) {
    flex: 1;
    display: flex;
    flex-direction: column;

    .arco-card-body {
      flex: 1;
    }
  }
}

.overview-card {
  height: 100%;

  .card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .card-title {
    font-weight: 500;
    color: var(--color-text-1);
  }

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

.subnet-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subnet-item {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    border-color: rgba(22, 93, 255, 0.5);
  }

  &.active {
    border-color: #165dff;
    background: rgba(22, 93, 255, 0.05);
  }
}

.subnet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.subnet-name {
  font-weight: 500;
  color: var(--color-text-1);
  margin: 0;
}

.subnet-info {
  font-size: 12px;
  color: var(--color-text-3);
  margin: 4px 0 0;
}

.subnet-usage {
  text-align: right;

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

  .usage-label {
    font-size: 12px;
    color: var(--color-text-3);
    margin: 4px 0 0;
  }
}

.subnet-progress {
  margin-top: 12px;
}

.search-section {
  margin-top: 8px;
}

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

  .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

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

  .stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-3);
  }

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

.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;

  &-blue {
    background: #165dff;
  }

  &-cyan {
    background: #14c9c9;
  }
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>