<template>
  <el-dialog
    v-model="dialogVisible"
    title="资产详情"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div v-if="asset" v-loading="loading" class="asset-detail">
      <!-- 基本信息 -->
      <div class="section">
        <h3>基本信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="资产编码">
            {{ asset.assetCode }}
          </el-descriptions-item>
          <el-descriptions-item label="资产名称">
            {{ asset.assetName }}
          </el-descriptions-item>
          <el-descriptions-item label="设备类型">
            {{ asset.deviceType?.typeName }}
          </el-descriptions-item>
          <el-descriptions-item label="品牌">
            {{ asset.brand?.brandName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="规格型号">
            {{ asset.model || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="序列号">
            {{ asset.serialNumber || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="所属网点">
            {{ asset.organization?.orgName }}
          </el-descriptions-item>
          <el-descriptions-item label="存放位置">
            {{ asset.location || '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 采购信息 -->
      <div class="section">
        <h3>采购信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="供应商">
            {{ asset.supplier?.supplierName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="采购日期">
            {{ asset.purchaseDate || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="采购价格">
            {{ asset.purchasePrice ? `¥${asset.purchasePrice.toFixed(2)}` : '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="保修到期">
            {{ asset.warrantyExpireDate || '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 状态信息 -->
      <div class="section">
        <h3>状态信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="当前状态">
            <el-tag :type="getStatusType(asset.status)">
              {{ getStatusName(asset.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ formatDateTime(asset.createdAt) }}
          </el-descriptions-item>
          <el-descriptions-item label="创建人">
            {{ asset.createdBy || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ formatDateTime(asset.updatedAt) }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 动态字段 -->
      <div v-if="Object.keys(asset.dynamicAttributes).length > 0" class="section">
        <h3>详细信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item
            v-for="(value, key) in asset.dynamicAttributes"
            :key="key"
            :label="key"
          >
            {{ value || '-' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 状态历史 -->
      <div v-if="asset.statusHistory && asset.statusHistory.length > 0" class="section">
        <h3>状态历史</h3>
        <el-timeline>
          <el-timeline-item
            v-for="item in asset.statusHistory"
            :key="item.id"
            :timestamp="formatDateTime(item.createdAt)"
          >
            <p>
              <el-tag size="small">{{ item.operationType }}</el-tag>
              {{ item.oldStatus ? `从 ${getStatusName(item.oldStatus)} ` : '' }}
              变更为 {{ getStatusName(item.newStatus) }}
            </p>
            <p v-if="item.remark">备注: {{ item.remark }}</p>
            <p v-if="item.operatorName">操作人: {{ item.operatorName }}</p>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { getAssetById } from '@/api'
import { ASSET_STATUS } from '@/utils/constants'
import { formatDateTime } from '@/utils/format'
import { ElMessage } from 'element-plus'

interface Props {
  modelValue: boolean
  assetId: number | null
}

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

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

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

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

// 获取资产详情
const fetchAsset = async () => {
  if (!props.assetId) return

  loading.value = true
  try {
    asset.value = await getAssetById(props.assetId)
  } catch (error) {
    ElMessage.error('获取资产详情失败')
  } finally {
    loading.value = false
  }
}

// 状态标签类型
const getStatusType = (status: string) => {
  const item = Object.values(ASSET_STATUS).find(item => item.value === status)
  return item?.type || ''
}

// 状态名称
const getStatusName = (status: string) => {
  const item = Object.values(ASSET_STATUS).find(item => item.value === status)
  return item?.label || status
}

// 关闭对话框
const handleClose = () => {
  emit('update:modelValue', false)
}

// 监听对话框打开
watch(() => props.modelValue, (val) => {
  if (val) {
    fetchAsset()
  } else {
    asset.value = null
  }
})
</script>

<style scoped lang="scss">
.asset-detail {
  .section {
    margin-bottom: 30px;

    &:last-child {
      margin-bottom: 0;
    }

    h3 {
      font-size: 16px;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid $border-base;
    }
  }
}
</style>
