<template>
  <div class="container">
    <a-tabs v-model:active-key="activeTab" type="card-gutter">
      <a-tab-pane key="overview" title="概览">
        <OverviewTab />
      </a-tab-pane>
      <a-tab-pane key="ip-list" title="IP地址列表">
        <IPAddressListTab />
      </a-tab-pane>
      <a-tab-pane key="subnets" title="子网管理">
        <SubnetListTab />
      </a-tab-pane>
      <a-tab-pane key="dhcp-leases" title="DHCP租约">
        <DHCPLeasesTab />
      </a-tab-pane>
      <a-tab-pane key="conflicts" title="冲突记录">
        <ConflictsTab />
      </a-tab-pane>
      <a-tab-pane key="changes" title="变更记录">
        <ChangesTab />
      </a-tab-pane>
      <a-tab-pane key="anomalies" title="异常记录">
        <AnomaliesTab />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import OverviewTab from './components/OverviewTab.vue'
import IPAddressListTab from './components/IPAddressListTab.vue'
import SubnetListTab from './components/SubnetListTab.vue'
import DHCPLeasesTab from './components/DHCPLeasesTab.vue'
import ConflictsTab from './components/ConflictsTab.vue'
import ChangesTab from './components/ChangesTab.vue'
import AnomaliesTab from './components/AnomaliesTab.vue'

const activeTab = ref('overview')
</script>

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

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

:deep(.arco-tabs-card-gutter) {
  .arco-tabs-content {
    padding: 16px 0;
  }
}
</style>
