<template>
  <a-modal
    :visible="visible"
    title="数据中心详情"
    width="900px"
    @cancel="handleCancel"
    @update:visible="handleVisibleChange"
    :footer="false"
  >
    <a-spin :loading="loading" style="width: 100%">
      <a-descriptions :column="2" bordered v-if="datacenterDetail">
        <!-- 基本信息 -->
        <a-descriptions-item label="数据中心名称" :span="2">
          {{ datacenterDetail.name }}
        </a-descriptions-item>
        <a-descriptions-item label="数据中心编码">
          {{ datacenterDetail.code }}
        </a-descriptions-item>
        <a-descriptions-item label="简称">
          {{ datacenterDetail.short_name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="statusMap[datacenterDetail.status]?.color || 'gray'">
            {{ statusMap[datacenterDetail.status]?.text || datacenterDetail.status }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="是否启用">
          <a-tag :color="datacenterDetail.enabled ? 'green' : 'red'">
            {{ datacenterDetail.enabled ? '是' : '否' }}
          </a-tag>
        </a-descriptions-item>

        <!-- 联系信息 -->
        <a-descriptions-item label="联系人">
          {{ datacenterDetail.contact_person || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="联系电话">
          {{ datacenterDetail.contact_phone || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="联系邮箱" :span="2">
          {{ datacenterDetail.contact_email || '-' }}
        </a-descriptions-item>

        <!-- 地理信息 -->
        <a-descriptions-item label="所属省份">
          {{ datacenterDetail.province?.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="所属城市">
          {{ datacenterDetail.city?.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="详细地址" :span="2">
          {{ datacenterDetail.address || '-' }}
        </a-descriptions-item>

        <!-- 面积信息 -->
        <a-descriptions-item label="总面积">
          {{ datacenterDetail.total_area ? `${datacenterDetail.total_area} 平方米` : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="IT区域面积">
          {{ datacenterDetail.it_area ? `${datacenterDetail.it_area} 平方米` : '-' }}
        </a-descriptions-item>

        <!-- 电力信息 -->
        <a-descriptions-item label="总电力">
          {{ datacenterDetail.total_power ? `${datacenterDetail.total_power} KW` : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="已用电力">
          {{ datacenterDetail.used_power ? `${datacenterDetail.used_power} KW` : '-' }}
        </a-descriptions-item>

        <!-- 容量信息 -->
        <a-descriptions-item label="可容纳机柜数">
          {{ datacenterDetail.max_rack_capacity || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="实际机柜数">
          {{ datacenterDetail.rack_count || 0 }}
        </a-descriptions-item>

        <!-- 认证信息 -->
        <a-descriptions-item label="ISO27001认证">
          <a-tag :color="datacenterDetail.iso27001 ? 'green' : 'gray'">
            {{ datacenterDetail.iso27001 ? '是' : '否' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="ISO9001认证">
          <a-tag :color="datacenterDetail.iso9001 ? 'green' : 'gray'">
            {{ datacenterDetail.iso9001 ? '是' : '否' }}
          </a-tag>
        </a-descriptions-item>

        <!-- 统计信息 -->
        <a-descriptions-item label="楼层数">
          {{ datacenterDetail.floor_count || 0 }}
        </a-descriptions-item>
        <a-descriptions-item label="机柜数">
          {{ datacenterDetail.rack_count || 0 }}
        </a-descriptions-item>

        <!-- 其他信息 -->
        <a-descriptions-item label="描述" :span="2">
          {{ datacenterDetail.description || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="备注" :span="2">
          {{ datacenterDetail.remarks || '-' }}
        </a-descriptions-item>

        <!-- 系统信息 -->
        <a-descriptions-item label="创建时间">
          {{ formatDate(datacenterDetail.created_at) }}
        </a-descriptions-item>
        <a-descriptions-item label="更新时间">
          {{ formatDate(datacenterDetail.updated_at) }}
        </a-descriptions-item>
        <a-descriptions-item label="创建人">
          {{ datacenterDetail.created_by || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="更新人">
          {{ datacenterDetail.updated_by || '-' }}
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import { fetchDatacenterDetail } from '@/api/ops/datacenter'

interface Props {
  visible: boolean
  datacenterId?: number
}

interface Emits {
  (e: 'update:visible', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const loading = ref(false)
const datacenterDetail = ref<any>(null)

// 状态映射
const statusMap: Record<string, { text: string; color: string }> = {
  planning: { text: '规划中', color: 'blue' },
  construction: { text: '建设中', color: 'orange' },
  operating: { text: '运营中', color: 'green' },
  maintenance: { text: '维护中', color: 'gold' },
  offline: { text: '已下线', color: 'red' },
}

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

// 加载数据中心详情
const loadDatacenterDetail = async () => {
  if (!props.datacenterId) return

  loading.value = true
  try {
    const res = await fetchDatacenterDetail(props.datacenterId)
    if (res.code === 0) {
      datacenterDetail.value = res.details
    } else {
      Message.error(res.message || '获取数据中心详情失败')
    }
  } catch (error) {
    console.error('获取数据中心详情失败:', error)
    Message.error('获取数据中心详情失败')
  } finally {
    loading.value = false
  }
}

// 监听对话框显示状态
watch(
  () => props.visible,
  (newVal) => {
    if (newVal && props.datacenterId) {
      loadDatacenterDetail()
    }
  }
)

// 取消
const handleCancel = () => {
  emit('update:visible', false)
}

// 处理对话框可见性变化
const handleVisibleChange = (visible: boolean) => {
  emit('update:visible', visible)
}
</script>

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

<style scoped lang="less">
// 样式可以根据需要添加
</style>
