<template>
  <a-modal
    :visible="visible"
    title="设备详情"
    width="900px"
    :footer="false"
    @cancel="handleCancel"
    @update:visible="handleVisibleChange"
  >
    <a-spin :loading="loading" style="width: 100%">
      <a-descriptions
        :column="2"
        bordered
        size="medium"
        :label-style="{ width: '140px' }"
      >
        <!-- 基本信息 -->
        <a-descriptions-item label="资产名称">
          {{ device?.asset_name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="资产编号">
          {{ device?.asset_code || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="资产分类">
          {{ device?.category?.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="规格型号">
          {{ device?.model || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="生产厂商">
          {{ device?.manufacturer || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="序列号">
          {{ device?.serial_number || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="采购日期">
          {{ formatDate(device?.purchase_date) }}
        </a-descriptions-item>
        <a-descriptions-item label="原值（元）">
          {{ formatMoney(device?.original_value) }}
        </a-descriptions-item>
        <a-descriptions-item label="供应商">
          {{ device?.supplier?.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="质保期">
          {{ device?.warranty_period || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="质保到期日期">
          {{ formatDate(device?.warranty_expiry) }}
        </a-descriptions-item>
        <a-descriptions-item label="资产状态">
          <a-tag :color="getAssetStatusColor(device?.status || '')">
            {{ getAssetStatusText(device?.status || '') }}
          </a-tag>
        </a-descriptions-item>

        <!-- 使用信息 -->
        <a-descriptions-item label="使用部门">
          {{ device?.department || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="使用人">
          {{ device?.user || '-' }}
        </a-descriptions-item>

        <!-- 位置信息 -->
        <a-descriptions-item label="所属数据中心">
          {{ device?.datacenter?.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="所属楼层">
          {{ device?.floor?.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="所属机柜">
          {{ device?.rack?.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="U位">
          <template v-if="device?.unit_start || device?.unit_end">
            {{ device?.unit_start || '-' }} - {{ device?.unit_end || '-' }}
          </template>
          <template v-else>-</template>
        </a-descriptions-item>

        <!-- 标签信息 -->
        <a-descriptions-item label="二维码标签">
          {{ device?.qr_code || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="RFID标签">
          {{ device?.rfid_tag || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="资产标签号">
          {{ device?.asset_tag || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="技术规格">
          {{ device?.specifications || '-' }}
        </a-descriptions-item>

        <!-- 描述信息 -->
        <a-descriptions-item label="资产描述" :span="2">
          {{ device?.description || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="备注" :span="2">
          {{ device?.remarks || '-' }}
        </a-descriptions-item>

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

<script lang="ts" setup>
import { ref, watch } from 'vue'
import {
  getAssetStatusText,
  getAssetStatusColor,
} from '@/api/ops/asset'

interface Device {
  id?: number
  asset_name?: string
  asset_code?: string
  category?: { id: number; name: string; code: string }
  model?: string
  manufacturer?: string
  serial_number?: string
  purchase_date?: string
  original_value?: number
  supplier?: { id: number; name: string; code: string }
  warranty_period?: string
  warranty_expiry?: string
  department?: string
  user?: string
  status?: string
  location?: string
  datacenter?: { id: number; name: string; code: string }
  floor?: { id: number; name: string; code: string }
  rack?: { id: number; name: string; code: string }
  unit_start?: number
  unit_end?: number
  qr_code?: string
  rfid_tag?: string
  asset_tag?: string
  specifications?: string
  description?: string
  remarks?: string
  created_at?: string
  updated_at?: string
  created_by?: string
  updated_by?: string
}

interface Props {
  visible: boolean
  device: Device | null
}

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

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

const loading = ref(false)

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

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

// 格式化金额
const formatMoney = (value: number | string | null | undefined) => {
  if (value === null || value === undefined || value === '') return '-'
  const num = Number(value)
  if (isNaN(num)) return '-'
  return num.toLocaleString('zh-CN', {
    style: 'currency',
    currency: 'CNY',
    minimumFractionDigits: 2,
  })
}

// 格式化日期
const formatDate = (dateStr?: string) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 格式化日期时间
const formatDateTime = (dateStr?: string) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
</script>

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

<style scoped lang="less">
:deep(.arco-descriptions-item-label) {
  font-weight: 500;
}
</style>