<script setup lang="tsx">
import { PropType, ref } from 'vue'
import { TableData } from '@/api/system/SysMenu/types'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { TYPE_DICT_LIST, COMMON_DICT_LIST, STATUS_DICT_LIST } from '../constants'

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'name',
    label: '菜单名称'
  },
  {
    field: 'url',
    label: '菜单连接'
  },
  {
    field: 'parentId',
    label: '上级菜单'
  },
  {
    field: 'type',
    label: '菜单类型',
    slots: {
      default(row) {
        const type = TYPE_DICT_LIST.find((item) => item.value === row.type)
        if (type) {
          return <span>{type.label}</span>
        }
        return <span>{row.type ?? '-'}</span>
      }
    }
  },
  {
    field: 'common',
    label: '权限类型',
    slots: {
      default(row) {
        const common = COMMON_DICT_LIST.find((item) => item.value === row.common)
        if (common) {
          return <span>{common.label}</span>
        }
        return <span>{row.common ?? '-'}</span>
      }
    }
  },
  {
    field: 'systemCode',
    label: '归属系统'
  },
  {
    field: 'permissionStr',
    label: '权限标识'
  },
  {
    field: 'icon',
    label: '图标'
  },
  {
    field: 'sort',
    label: '排序'
  },
  {
    field: 'status',
    label: '状态',
    slots: {
      default(row) {
        const status = STATUS_DICT_LIST.find((item) => item.value === row.status)
        if (status) {
          return <span>{status.label}</span>
        }
        return <span>{row.status ?? '-'}</span>
      }
    }
  },
  {
    field: 'description',
    label: '菜单描述'
  }
])

defineProps({
  currentRow: {
    type: Object as PropType<TableData>,
    default: () => {}
  }
})
</script>

<template>
  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
</template>
