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

const detailSchema = ref<DescriptionsSchema[]>([
  // {
  //   field: 'systemCode',
  //   label: '所属系统',
  //   slots: {
  //     default(row) {
  //       const systemCode = SYSTEM_CODE_DICT_LIST.find((item) => item.value === row.systemCode)
  //       if (systemCode) {
  //         return <span>{systemCode.label}</span>
  //       }
  //       return <span>{row.systemCode ?? '-'}</span>
  //     }
  //   }
  // },
  {
    field: 'roleName',
    label: '角色名称'
  },
  {
    field: 'roleType',
    label: '角色类型',
    slots: {
      default(row) {
        const roleType = ROLE_TYPE_DICT_LIST.find((item) => item.value === row.roleType)
        if (roleType) {
          return <span>{roleType.label}</span>
        }
        return <span>{row.roleType ?? '-'}</span>
      }
    }
  },
  {
    field: 'remarks',
    label: '角色描述'
  }
])

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

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