<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="floorDetail">
        <a-descriptions-item label="楼层名称" :span="2">
          {{ floorDetail.name }}
        </a-descriptions-item>
        <a-descriptions-item label="所属中心">
          {{ floorDetail.datacenter?.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="楼层号">
          {{ floorDetail.floor_number }}
        </a-descriptions-item>
        <a-descriptions-item label="面积">
          {{ floorDetail.area ? `${floorDetail.area} 平方米` : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="楼高">
          {{ floorDetail.height ? `${floorDetail.height} 米` : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="称重">
          {{ floorDetail.load_bearing ? `${floorDetail.load_bearing} kg/m²` : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="可容纳机柜数">
          {{ floorDetail.max_rack_capacity || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="电力容量">
          {{ floorDetail.power_capacity ? `${floorDetail.power_capacity} KW` : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="已用电力">
          {{ floorDetail.used_power ? `${floorDetail.used_power} KW` : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="制冷容量">
          {{ floorDetail.cooling_capacity ? `${floorDetail.cooling_capacity} 吨` : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="空调数量">
          {{ floorDetail.air_conditioners || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="机柜数量">
          {{ floorDetail.rack_count || 0 }}
        </a-descriptions-item>
        <a-descriptions-item label="已用机柜数">
          {{ floorDetail.used_rack_count || 0 }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="statusMap[floorDetail.status]?.color || 'gray'">
            {{ statusMap[floorDetail.status]?.text || floorDetail.status }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="启用状态">
          <a-tag :color="floorDetail.enabled ? 'green' : 'red'">
            {{ floorDetail.enabled ? '启用' : '禁用' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="楼层布局" :span="2">
          <a-image
            v-if="floorDetail.layout_plan"
            :src="floorDetail.layout_plan"
            width="200"
            fit="cover"
            style="cursor: pointer"
            @click="handlePreviewImage(floorDetail.layout_plan)"
          />
          <span v-else>-</span>
        </a-descriptions-item>
        <a-descriptions-item label="描述" :span="2">
          {{ floorDetail.description || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ formatDate(floorDetail.created_at) }}
        </a-descriptions-item>
        <a-descriptions-item label="更新时间">
          {{ formatDate(floorDetail.updated_at) }}
        </a-descriptions-item>
        <a-descriptions-item label="创建人">
          {{ floorDetail.created_by || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="更新人">
          {{ floorDetail.updated_by || '-' }}
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>

    <!-- 图片预览 -->
    <a-image-preview-group :visible="previewVisible" @update:visible="handlePreviewClose">
      <a-image :src="previewImage" />
    </a-image-preview-group>
  </a-modal>
</template>

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

interface Props {
  visible: boolean
  floorId?: number
}

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

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

const loading = ref(false)
const floorDetail = ref<any>(null)
const previewVisible = ref(false)
const previewImage = ref('')

// 状态映射
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 loadFloorDetail = async () => {
  if (!props.floorId) return

  loading.value = true
  try {
    const res: any = await fetchFloorDetail(props.floorId)
    if (res.code === 0) {
      floorDetail.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.floorId) {
      loadFloorDetail()
    }
  }
)

// 预览图片
const handlePreviewImage = (url: string) => {
  previewImage.value = url
  previewVisible.value = true
}

// 关闭图片预览
const handlePreviewClose = () => {
  previewVisible.value = false
}

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

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

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

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