<template>
  <a-modal
    v-model:visible="modalVisible"
    title="用户详情"
    :width="700"
    :footer="false"
  >
    <a-descriptions v-if="userData" :column="2" bordered>
      <a-descriptions-item label="用户ID" :span="2">
        {{ userData.userId }}
      </a-descriptions-item>
      
      <a-descriptions-item label="账号">
        {{ userData.account }}
      </a-descriptions-item>
      
      <a-descriptions-item label="姓名">
        {{ userData.name }}
      </a-descriptions-item>
      
      <a-descriptions-item label="员工编码">
        {{ userData.userCode || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="性别">
        <a-tag v-if="userData.gender === '1'" color="blue">男</a-tag>
        <a-tag v-else-if="userData.gender === '2'" color="pink">女</a-tag>
        <a-tag v-else color="gray">未知</a-tag>
      </a-descriptions-item>
      
      <a-descriptions-item label="手机号">
        {{ userData.mobile || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="邮箱">
        {{ userData.email || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="所属部门">
        {{ userData.deptName || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="在职状态">
        <a-tag :color="userData.userStatus === 'ENABLED' ? 'green' : 'red'">
          {{ userData.userStatusLabel || (userData.userStatus === 'ENABLED' ? '在职' : '离职') }}
        </a-tag>
      </a-descriptions-item>
      
      <a-descriptions-item label="员工性质">
        <a-tag color="blue">
          {{ userData.userTypeLabel || getUserTypeLabel(userData.userType) }}
        </a-tag>
      </a-descriptions-item>
      
      <a-descriptions-item label="入职日期">
        {{ userData.hiredate || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="出生日期">
        {{ userData.birthdate || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="学历">
        {{ userData.educationLabel || userData.education || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="专业">
        {{ userData.majorField || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="工作方向">
        {{ userData.workField || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="身份证">
        {{ userData.identityCard || '-' }}
      </a-descriptions-item>
      
      <a-descriptions-item label="角色" :span="2">
        <a-space v-if="userData.roleIds && userData.roleIds.length > 0" wrap>
          <a-tag v-for="roleId in userData.roleIds" :key="roleId" color="purple">
            {{ roleId }}
          </a-tag>
        </a-space>
        <span v-else>-</span>
      </a-descriptions-item>
      
      <a-descriptions-item label="头像" :span="2">
        <a-avatar v-if="userData.avatar" :size="50">
          <img :src="userData.avatar" alt="头像" />
        </a-avatar>
        <span v-else>-</span>
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  visible: boolean
  userData?: any
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  userData: null
})

const emit = defineEmits<{
  'update:visible': [visible: boolean]
}>()

const modalVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 获取用户类型标签
const getUserTypeLabel = (userType: string) => {
  const typeMap = {
    'FULL_TIME': '正式员工',
    'PART_TIME': '兼职员工',
    'INTERN': '实习生',
    'CONTRACTOR': '外包员工'
  }
  return typeMap[userType] || userType
}
</script>

<style scoped lang="scss">
.a-descriptions {
  .a-descriptions-item {
    padding: 12px 16px;
  }
}
</style> 