<template>
  <a-modal :visible="visible" title="机柜详情" width="900px" @cancel="handleCancel" @update:visible="handleVisibleChange" :footer="false">
    <a-spin :loading="loading" style="width: 100%">
      <div v-if="rackDetail">
        <!-- 基础信息 -->
        <a-descriptions title="基础信息" :column="2" bordered>
          <a-descriptions-item label="机柜名称">{{ rackDetail.name }}</a-descriptions-item>
          <a-descriptions-item label="机柜编码">{{ rackDetail.code }}</a-descriptions-item>
          <a-descriptions-item label="所属中心">{{ rackDetail.datacenter?.name || '-' }}</a-descriptions-item>
          <a-descriptions-item label="所属楼层">{{ rackDetail.floor?.name || '-' }}</a-descriptions-item>
        </a-descriptions>

        <!-- 规格参数 -->
        <a-descriptions title="规格参数" :column="2" bordered>
          <a-descriptions-item label="高度(U)">{{ rackDetail.height || '-' }}</a-descriptions-item>
          <a-descriptions-item label="宽度(mm)">{{ rackDetail.width || '-' }}</a-descriptions-item>
          <a-descriptions-item label="深度(mm)">{{ rackDetail.depth || '-' }}</a-descriptions-item>
          <a-descriptions-item label="重量(kg)">{{ rackDetail.weight || '-' }}</a-descriptions-item>
          <a-descriptions-item label="最大承重(kg)">{{ rackDetail.max_load || '-' }}</a-descriptions-item>
          <a-descriptions-item label="电力容量(KW)">{{ rackDetail.power_capacity || '-' }}</a-descriptions-item>
          <a-descriptions-item label="电源相位">{{ rackDetail.power_phase || '-' }}</a-descriptions-item>
          <a-descriptions-item label="PDU数量">{{ rackDetail.pdu_count || '-' }}</a-descriptions-item>
          <a-descriptions-item label="网络接入方式">{{ rackDetail.network_access || '-' }}</a-descriptions-item>
          <a-descriptions-item label="交换机端口数">{{ rackDetail.switch_ports || '-' }}</a-descriptions-item>
          <a-descriptions-item label="制冷方式">{{ rackDetail.cooling_type || '-' }}</a-descriptions-item>
          <a-descriptions-item label="已用电力(KW)">{{ rackDetail.used_power || '-' }}</a-descriptions-item>
        </a-descriptions>

        <!-- U位使用情况 -->
        <a-descriptions title="U位使用情况" :column="2" bordered>
          <a-descriptions-item label="总U位数">{{ rackDetail.total_units || '-' }}</a-descriptions-item>
          <a-descriptions-item label="已用U位数">{{ rackDetail.used_units || '-' }}</a-descriptions-item>
          <a-descriptions-item label="预留U位数">{{ rackDetail.reserved_units || '-' }}</a-descriptions-item>
          <a-descriptions-item label="可用U位数">{{ rackDetail.available_units || '-' }}</a-descriptions-item>
          <a-descriptions-item label="使用率">
            <a-progress
              :percent="(rackDetail.utilization_rate || 0) / 100"
              :color="(rackDetail.utilization_rate || 0) > 80 ? '#f53f3f' : (rackDetail.utilization_rate || 0) > 50 ? '#ff7d00' : '#00b42a'"
            />
          </a-descriptions-item>
        </a-descriptions>

        <!-- 状态信息 -->
        <a-descriptions title="状态信息" :column="2" bordered>
          <a-descriptions-item label="机柜类型">
            <a-tag :color="getRackTypeColor(rackDetail.rack_type)">
              {{ getRackTypeText(rackDetail.rack_type) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-tag :color="getStatusColor(rackDetail.status)">
              {{ getStatusText(rackDetail.status) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="供应商">{{ rackDetail.supplier?.name || '-' }}</a-descriptions-item>
          <a-descriptions-item label="启用状态">
            <a-tag :color="rackDetail.enabled ? 'green' : 'red'">
              {{ rackDetail.enabled ? '已启用' : '已禁用' }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>

        <!-- 制造商信息 -->
        <a-descriptions title="制造商信息" :column="2" bordered>
          <a-descriptions-item label="制造商">{{ rackDetail.manufacturer || '-' }}</a-descriptions-item>
          <a-descriptions-item label="型号">{{ rackDetail.model || '-' }}</a-descriptions-item>
          <a-descriptions-item label="序列号">{{ rackDetail.serial_number || '-' }}</a-descriptions-item>
          <a-descriptions-item label="价格(元)">{{ rackDetail.price || '-' }}</a-descriptions-item>
          <a-descriptions-item label="采购日期">{{ rackDetail.purchase_date || '-' }}</a-descriptions-item>
        </a-descriptions>

        <!-- 责任人信息 -->
        <a-descriptions title="责任人信息" :column="2" bordered>
          <a-descriptions-item label="负责人">{{ rackDetail.owner || '-' }}</a-descriptions-item>
          <a-descriptions-item label="联系电话">{{ rackDetail.contact_phone || '-' }}</a-descriptions-item>
          <a-descriptions-item label="使用部门">{{ rackDetail.department || '-' }}</a-descriptions-item>
        </a-descriptions>

        <!-- 位置信息 -->
        <a-descriptions title="位置信息" :column="2" bordered>
          <a-descriptions-item label="行号">{{ rackDetail.row || '-' }}</a-descriptions-item>
          <a-descriptions-item label="列号">{{ rackDetail.column || '-' }}</a-descriptions-item>
          <a-descriptions-item label="X坐标">{{ rackDetail.position_x || '-' }}</a-descriptions-item>
          <a-descriptions-item label="Y坐标">{{ rackDetail.position_y || '-' }}</a-descriptions-item>
          <a-descriptions-item label="颜色标识">
            <span v-if="rackDetail.color" :style="{ backgroundColor: rackDetail.color }" class="color-preview">
              {{ rackDetail.color }}
            </span>
            <span v-else>-</span>
          </a-descriptions-item>
        </a-descriptions>

        <!-- 其他信息 -->
        <a-descriptions title="其他信息" :column="2" bordered>
          <a-descriptions-item label="描述" :span="2">
            {{ rackDetail.description || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="备注" :span="2">
            {{ rackDetail.remarks || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="创建人">{{ rackDetail.created_by || '-' }}</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{ rackDetail.created_at || '-' }}</a-descriptions-item>
          <a-descriptions-item label="更新人">{{ rackDetail.updated_by || '-' }}</a-descriptions-item>
          <a-descriptions-item label="更新时间">{{ rackDetail.updated_at || '-' }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </a-spin>
  </a-modal>
</template>

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

interface RackDetail {
  id?: number
  name?: string
  code?: string
  datacenter_id?: number
  datacenter?: { id?: number; name?: string }
  floor_id?: number
  floor?: { id?: number; name?: string }
  height?: number
  width?: number
  depth?: number
  weight?: number
  max_load?: number
  power_capacity?: number
  used_power?: number
  power_phase?: string
  pdu_count?: number
  network_access?: string
  switch_ports?: number
  cooling_type?: string
  rack_type?: string
  status?: string
  supplier_id?: number
  supplier?: { id?: number; name?: string }
  manufacturer?: string
  model?: string
  serial_number?: string
  purchase_date?: string
  price?: number
  owner?: string
  contact_phone?: string
  department?: string
  row?: number
  column?: number
  position_x?: number
  position_y?: number
  color?: string
  enabled?: boolean
  description?: string
  remarks?: string
  total_units?: number
  used_units?: number
  reserved_units?: number
  available_units?: number
  utilization_rate?: number
  created_by?: string
  created_at?: string
  updated_by?: string
  updated_at?: string
}

interface Props {
  visible: boolean
  rackId: number | null
}

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

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

const loading = ref(false)
const rackDetail = ref<RackDetail | null>(null)

// 获取机柜类型颜色
const getRackTypeColor = (type?: string) => {
  const colorMap: Record<string, string> = {
    standard: 'blue',
    blade: 'cyan',
    network: 'purple',
    storage: 'orange',
    custom: 'gray',
  }
  return colorMap[type || ''] || 'gray'
}

// 获取机柜类型文本
const getRackTypeText = (type?: string) => {
  const textMap: Record<string, string> = {
    standard: '标准机柜',
    blade: '刀片机柜',
    network: '网络机柜',
    storage: '存储机柜',
    custom: '定制机柜',
  }
  return textMap[type || ''] || '-'
}

// 获取状态颜色
const getStatusColor = (status?: string) => {
  const colorMap: Record<string, string> = {
    idle: 'green',
    in_use: 'blue',
    reserved: 'orange',
    maintenance: 'red',
    offline: 'gray',
  }
  return colorMap[status || ''] || 'gray'
}

// 获取状态文本
const getStatusText = (status?: string) => {
  const textMap: Record<string, string> = {
    idle: '空闲',
    in_use: '使用中',
    reserved: '已预留',
    maintenance: '维护中',
    offline: '已下线',
  }
  return textMap[status || ''] || '-'
}

// 加载机柜详情
const loadRackDetail = async () => {
  if (!props.rackId) return

  loading.value = true
  try {
    const res: any = await fetchRackDetail(props.rackId)
    if (res.code === 0) {
      rackDetail.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.rackId) {
      loadRackDetail()
    }
  }
)

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

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

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

<style scoped lang="less">
.color-preview {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
}

:deep(.arco-descriptions) {
  margin-bottom: 16px;
}

:deep(.arco-descriptions-title) {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-1);
}
</style>
