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

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'username',
    label: '登录号'
  },
  {
    field: 'name',
    label: '用户姓名'
  },
  {
    field: 'password',
    label: '登录密码'
  },
  {
    field: 'organId',
    label: '机构'
  },
  {
    field: 'deptId',
    label: '所属部门'
  },
  {
    field: 'sex',
    label: '性别',
    slots: {
      default(row) {
        const sex = SEX_DICT_LIST.find((item) => item.value === row.sex)
        if (sex) {
          return <span>{sex.label}</span>
        }
        return <span>{row.sex ?? '-'}</span>
      }
    }
  },
  {
    field: 'card',
    label: '证件号码'
  },
  {
    field: 'birthday',
    label: '出生日期'
  },
  {
    field: 'phone',
    label: '固定电话'
  },
  {
    field: 'mobile',
    label: '移动电话'
  },
  {
    field: 'email',
    label: '邮箱地址'
  },
  {
    field: 'address',
    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: 'remarks',
    label: '描述'
  }
])

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

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