<script setup lang="tsx">
import { PropType, ref } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { ElTag } from 'element-plus'

defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => undefined
  }
})
const renderTag = (enable?: boolean) => {
  return <ElTag type={!enable ? 'danger' : 'success'}>{enable ? '启用' : '禁用'}</ElTag>
}

const menu = ref<DescriptionsSchema[]>([
  {
    field: 'account',
    label: '管理员账号'
  },
  {
    field: 'real_name',
    label: '管理员姓名'
  },
  {
    field: 'roles',
    label: '管理员身份',
    slots: {
      default: (data) => {
        return (
          <>
            {data.roles.map((item) => (
              <ElTag class={'mr-2'}>{item}</ElTag>
            ))}
          </>
        )
      }
    }
  },

  {
    field: 'status',
    label: '状态',
    slots: {
      default: (data) => {
        return renderTag(data.status)
      }
    }
  }
])
</script>

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