<script setup lang="tsx">
import { PropType, ref } from 'vue'
import { DepartmentUserItem } from '@/api/dict/types'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { ElTag } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'

const { t } = useI18n()

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'username',
    label: t('userDemo.username')
  },
  {
    field: 'name',
    label: t('userDemo.name')
  },
  {
    field: 'organName',
    label: t('userDemo.organName')
  },
  {
    field: 'roles',
    label: t('userDemo.roles'),
    slots: {
      default: (data: any) => {
        return (
          <>
            {data.roles?.split(',').map((item) => (
              <ElTag class="mr-2" type="">
                {item}
              </ElTag>
            ))}
          </>
        )
      }
    }
  },
  {
    field: 'phone',
    label: t('userDemo.phone')
  },
  {
    field: 'mobile',
    label: t('userDemo.mobile')
  },
  {
    field: 'email',
    label: t('userDemo.email')
  },
  {
    field: 'loginIp',
    label: t('userDemo.loginIp')
  },
  {
    field: 'logindate',
    label: t('userDemo.logindate')
  }
])

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

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