<template>
  <a-modal v-model:visible="dialogVisible" title="分类详情" :width="600" :footer="false" unmount-on-close>
    <a-spin :loading="loading" style="width: 100%">
      <a-descriptions v-if="categoryDetail" :column="2" bordered size="medium">
        <a-descriptions-item label="分类名称">
          {{ categoryDetail.name }}
        </a-descriptions-item>
        <a-descriptions-item label="分类编码">
          {{ categoryDetail.code }}
        </a-descriptions-item>
        <a-descriptions-item label="层级">
          <a-tag :color="getLevelColor(categoryDetail.level)">第{{ categoryDetail.level }}级</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="父级分类">
          {{ categoryDetail.parent?.name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="资产数量">
          <a-badge :count="categoryDetail.asset_count" :max-count="999" />
        </a-descriptions-item>
        <a-descriptions-item label="排序">
          {{ categoryDetail.sort }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="categoryDetail.enabled ? 'green' : 'red'">
            {{ categoryDetail.enabled ? '启用' : '禁用' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="颜色">
          <div v-if="categoryDetail.color" style="display: flex; align-items: center; gap: 8px">
            <div
              :style="{
                width: '20px',
                height: '20px',
                borderRadius: '4px',
                backgroundColor: categoryDetail.color,
              }"
            />
            <span>{{ categoryDetail.color }}</span>
          </div>
          <span v-else>-</span>
        </a-descriptions-item>
        <a-descriptions-item label="分类路径">
          {{ categoryDetail.path || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="描述" :span="2">
          {{ categoryDetail.description || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="备注" :span="2">
          {{ categoryDetail.remarks || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="创建人">
          {{ categoryDetail.created_by || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="更新人">
          {{ categoryDetail.updated_by || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ formatDateTime(categoryDetail.created_at) }}
        </a-descriptions-item>
        <a-descriptions-item label="更新时间">
          {{ formatDateTime(categoryDetail.updated_at) }}
        </a-descriptions-item>
      </a-descriptions>

      <a-empty v-else-if="!loading" description="暂无数据" />
    </a-spin>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import { fetchCategoryDetail } from '@/api/ops/assetCategory'
import type { AssetCategory } from '@/api/ops/assetCategory'

interface Props {
  visible: boolean
  categoryId?: number
}

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

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  categoryId: undefined,
})

const emit = defineEmits<Emits>()

const loading = ref(false)
const categoryDetail = ref<AssetCategory | null>(null)

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

// 获取层级颜色
const getLevelColor = (level: number) => {
  const colors: Record<number, string> = {
    1: 'blue',
    2: 'green',
    3: 'orange',
    4: 'purple',
    5: 'cyan',
  }
  return colors[level] || 'gray'
}

// 格式化日期时间
const formatDateTime = (dateStr?: string) => {
  if (!dateStr) return '-'
  try {
    const date = new Date(dateStr)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    })
  } catch {
    return dateStr
  }
}

// 加载分类详情
const loadCategoryDetail = async () => {
  if (!props.categoryId) return

  loading.value = true
  try {
    const res = await fetchCategoryDetail(props.categoryId)
    if (res.code === 0) {
      categoryDetail.value = res.details
    } else {
      Message.error(res.message || '获取分类详情失败')
      categoryDetail.value = null
    }
  } catch (error) {
    console.error('获取分类详情失败:', error)
    Message.error('获取分类详情失败')
    categoryDetail.value = null
  } finally {
    loading.value = false
  }
}

// 监听 visible 变化
watch(
  () => props.visible,
  (val) => {
    if (val && props.categoryId) {
      loadCategoryDetail()
    } else {
      categoryDetail.value = null
    }
  }
)
</script>

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