<template>
  <a-modal
    :visible="visible"
    title="分类详情"
    width="600px"
    @cancel="handleCancel"
    @update:visible="handleVisibleChange"
    :footer="false"
  >
    <a-descriptions :data="detailData" layout="vertical" bordered :column="2" v-if="category">
      <a-descriptions-item label="分类名称" :span="1">
        {{ category.name }}
      </a-descriptions-item>
      <a-descriptions-item label="分类编码" :span="1">
        {{ category.code }}
      </a-descriptions-item>
      <a-descriptions-item label="父级分类" :span="1">
        {{ category.parent?.name || '无（一级分类）' }}
      </a-descriptions-item>
      <a-descriptions-item label="层级" :span="1">
        {{ category.level }}
      </a-descriptions-item>
      <a-descriptions-item label="排序" :span="1">
        {{ category.sort }}
      </a-descriptions-item>
      <a-descriptions-item label="是否启用" :span="1">
        <a-tag :color="category.enabled ? 'green' : 'red'">
          {{ category.enabled ? '是' : '否' }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="颜色标识" :span="2">
        <div class="color-display">
          <div
            class="color-block"
            :style="{ backgroundColor: category.color || '#ccc' }"
          ></div>
          <span>{{ category.color || '-' }}</span>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="图标路径" :span="2">
        {{ category.icon || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="描述" :span="2">
        {{ category.description || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="备注" :span="2">
        {{ category.remarks || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="创建时间" :span="1">
        {{ formatDate(category.created_at) }}
      </a-descriptions-item>
      <a-descriptions-item label="更新时间" :span="1">
        {{ formatDate(category.updated_at) }}
      </a-descriptions-item>
      <a-descriptions-item label="创建人" :span="1">
        {{ category.created_by || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="更新人" :span="1">
        {{ category.updated_by || '-' }}
      </a-descriptions-item>
    </a-descriptions>
    <a-empty v-else description="暂无数据" />
  </a-modal>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

interface Category {
  id?: number
  name?: string
  code?: string
  description?: string
  icon?: string
  color?: string
  parent_id?: number
  parent?: any
  level?: number
  sort?: number
  enabled?: boolean
  remarks?: string
  created_at?: string
  updated_at?: string
  created_by?: string
  updated_by?: string
}

interface Props {
  visible: boolean
  category: Category | null
}

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

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

// 详情数据
const detailData = computed(() => {
  if (!props.category) return []
  return [
    { label: '分类名称', value: props.category.name },
    { label: '分类编码', value: props.category.code },
    { label: '父级分类', value: props.category.parent?.name || '无（一级分类）' },
    { label: '层级', value: props.category.level },
    { label: '排序', value: props.category.sort },
    { label: '是否启用', value: props.category.enabled ? '是' : '否' },
    { label: '颜色标识', value: props.category.color || '-' },
    { label: '图标路径', value: props.category.icon || '-' },
    { label: '描述', value: props.category.description || '-' },
    { label: '备注', value: props.category.remarks || '-' },
    { label: '创建时间', value: formatDate(props.category.created_at) },
    { label: '更新时间', value: formatDate(props.category.updated_at) },
    { label: '创建人', value: props.category.created_by || '-' },
    { label: '更新人', value: props.category.updated_by || '-' },
  ]
})

// 格式化日期
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',
    second: '2-digit',
  })
}

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

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

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

<style scoped lang="less">
.color-display {
  display: flex;
  align-items: center;
  gap: 8px;

  .color-block {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
  }
}
</style>
