<script setup>
import { ref, shallowRef } from 'vue'
import { Drawer, Descriptions, DescriptionsItem, Spin, Empty } from 'ant-design-vue'
import { getListApi } from '~@/api/list/gateway-group-ip-list.js'

const visible = ref(false)
const title = ref('IP详情')
const loading = ref(false)
const dataSource = ref([])

const columns = shallowRef([
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: '实例ID', dataIndex: 'hostId', key: 'hostId' },
  { title: '名称', dataIndex: 'name', key: 'name' },
  { title: 'IP', dataIndex: 'ip', key: 'ip' },
  { title: '区域', dataIndex: 'nodeArea', key: 'nodeArea' },
  { title: '运营商', dataIndex: 'operator', key: 'operator' },
  { title: '是否封UDP', dataIndex: 'banUdp', key: 'banUdp' },
  { title: '是否封海外', dataIndex: 'banOverseas', key: 'banOverseas' },
  { title: '备注', dataIndex: 'comment', key: 'comment' },
  { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
  { title: '更新时间', dataIndex: 'updatedAt', key: 'updatedAt' },
])

async function open(record) {
  visible.value = true
  dataSource.value = []
  if (record && record.id) {
    try {
      loading.value = true
      const res = await getListApi({ id: record.id })
      if (res.code === 0 && res.data) {
        // The API returns a single object, wrap it in an array for the table
        dataSource.value = Array.isArray(res.data) ? res.data : [res.data]
      } else {
        dataSource.value = []
      }
    } catch (e) {
      console.error(e)
      dataSource.value = []
    } finally {
      loading.value = false
    }
  }
}

function close() {
  visible.value = false
}

defineExpose({ open })
</script>

<template>
  <a-drawer
    :visible="visible"
    :title="title"
    placement="right"
    :width="'60%'"
    @close="close"
  >
    <a-spin :spinning="loading">
      <a-descriptions v-if="dataSource.length > 0" bordered :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }">
        <template v-for="col in columns" :key="col.key">
          <a-descriptions-item :label="col.title">
            <template v-if="col.dataIndex === 'operator'">
              <span v-if="dataSource[0][col.dataIndex] === 1">电信</span>
              <span v-else-if="dataSource[0][col.dataIndex] === 2">BGP</span>
              <span v-else>未知</span>
            </template>
            <template v-else-if="col.dataIndex === 'banUdp'">
              <span v-if="dataSource[0][col.dataIndex] === 0">否</span>
              <span v-else-if="dataSource[0][col.dataIndex] === 1">是</span>
              <span v-else>未知</span>
            </template>
            <template v-else-if="col.dataIndex === 'banOverseas'">
              <span v-if="dataSource[0][col.dataIndex] === 0">否</span>
              <span v-else-if="dataSource[0][col.dataIndex] === 1">是</span>
              <span v-else>未知</span>
            </template>
            <template v-else>
              {{ dataSource[0][col.dataIndex] }}
            </template>
          </a-descriptions-item>
        </template>
      </a-descriptions>
      <a-empty v-else />
    </a-spin>
  </a-drawer>
</template>

<style scoped>
:deep(.ant-descriptions-item-label),
:deep(.ant-descriptions-item-content) {
  font-size: 16px;
}
</style>
