<template>
  <a-drawer v-model:visible="visible" title="用户详情" :width="width >= 500 ? 500 : '100%'" :footer="false">
    <a-descriptions :column="1" size="large" class="general-description">
      <a-descriptions-item label="用户ID" :span="1">
        <a-typography-paragraph copyable>{{ dataDetail?.userId }}</a-typography-paragraph>
      </a-descriptions-item>
      <a-descriptions-item label="账号">{{ dataDetail?.account }}</a-descriptions-item>
      <a-descriptions-item label="姓名">{{ dataDetail?.name }}</a-descriptions-item>
      <a-descriptions-item label="员工编码">{{ dataDetail?.userCode || '暂无' }}</a-descriptions-item>
      <a-descriptions-item label="性别">
        <span v-if="dataDetail?.gender === 'male'">男</span>
        <span v-else-if="dataDetail?.gender === 'female'">女</span>
        <span v-else>未知</span>
      </a-descriptions-item>
      <a-descriptions-item label="在职状态">
        <a-tag v-if="dataDetail?.userStatus === 'ENABLED'" color="green">{{ dataDetail?.userStatusLabel || '在职' }}</a-tag>
        <a-tag v-else color="red">{{ dataDetail?.userStatusLabel || '离职' }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="员工性质">
        <a-tag color="blue">{{ dataDetail?.userTypeLabel || dataDetail?.userType || '暂无' }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="手机号">{{ dataDetail?.mobile || '暂无' }}</a-descriptions-item>
      <a-descriptions-item label="邮箱">{{ dataDetail?.email || '暂无' }}</a-descriptions-item>
      <a-descriptions-item label="所属部门">{{ dataDetail?.deptName || '暂无' }}</a-descriptions-item>
      <a-descriptions-item label="岗位">{{ dataDetail?.postName || '暂无' }}</a-descriptions-item>
      <a-descriptions-item label="角色">{{ dataDetail?.roleName || '暂无' }}</a-descriptions-item>
      <a-descriptions-item label="身份证">{{ dataDetail?.identityCard || '暂无' }}</a-descriptions-item>
      <a-descriptions-item label="学历">{{ dataDetail?.educationLabel || dataDetail?.education || '暂无' }}</a-descriptions-item>
      <a-descriptions-item label="专业">{{ dataDetail?.majorField || '暂无' }}</a-descriptions-item>
      <a-descriptions-item label="工作方向">{{ dataDetail?.workField || '暂无' }}</a-descriptions-item>
      <a-descriptions-item label="入职日期">{{ dataDetail?.hiredate || '暂无' }}</a-descriptions-item>
      <a-descriptions-item label="出生日期">{{ dataDetail?.birthdate || '暂无' }}</a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
import { getUserDetailNew } from '@/apis/system/user-new'
import type { UserNewResp } from '@/apis/system/type'

const { width } = useWindowSize()

const dataId = ref('')
const dataDetail = ref<UserNewResp>()
const visible = ref(false)

// 查询详情
const getDataDetail = async () => {
  try {
    const { data } = await getUserDetailNew(dataId.value)
    dataDetail.value = data
  } catch (error) {
    console.error('获取用户详情失败:', error)
  }
}

// 打开
const onOpen = async (id: string) => {
  dataId.value = id
  await getDataDetail()
  visible.value = true
}

defineExpose({ onOpen })
</script>

<style scoped lang="scss">
.general-description {
  :deep(.arco-descriptions-item) {
    padding-bottom: 16px;
  }
  :deep(.arco-descriptions-item-label) {
    color: var(--color-text-3);
  }
}
</style>
