<template>
  <a-modal :visible="visible" title="机房详情" width="700px" @cancel="handleCancel" @update:visible="handleVisibleChange" :footer="false">
    <a-spin :loading="loading" style="width: 100%">
      <a-descriptions :column="2" bordered v-if="roomDetail">
        <a-descriptions-item label="机房名称" :span="2">
          {{ roomDetail.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="机房编码">
          {{ roomDetail.code || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="statusMap[roomDetail.status]?.color || 'gray'">
            {{ statusMap[roomDetail.status]?.text || roomDetail.status || '-' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="所属中心">
          {{ roomDetail.datacenter?.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="所属楼层">
          {{ roomDetail.floor?.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="描述" :span="2">
          {{ roomDetail.description || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ formatDate(roomDetail.created_at) }}
        </a-descriptions-item>
        <a-descriptions-item label="更新时间">
          {{ formatDate(roomDetail.updated_at) }}
        </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 { fetchRoomDetail } from '@/api/ops/room'

interface Props {
  visible: boolean
  roomId?: number
}

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

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

const loading = ref(false)
const roomDetail = 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 loadRoomDetail = async () => {
  if (!props.roomId) return

  loading.value = true
  try {
    const res: any = await fetchRoomDetail(props.roomId)
    if (res.code === 0) {
      roomDetail.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.roomId) {
      loadRoomDetail()
    }
  }
)

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

const handleVisibleChange = (visible: boolean) => {
  emit('update:visible', visible)
}
</script>

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