<template>
  <div>
    <el-descriptions class="margin-top" :column="2" border>
      <el-descriptions-item label="用户头像">
        <el-image v-if="info.avatar" class="h-100px w-100px" :src="info.avatar" fit="contain" hide-on-click-modal :preview-src-list="[info.avatar]"/>
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        <dict-tag v-if="info?.sex && info.sex !== '0'" :type="DICT_TYPE.MENDUNER_SEX" :value="info.sex" />
      </el-descriptions-item>
      <el-descriptions-item label="用户名">{{ info.name }}</el-descriptions-item>
      <el-descriptions-item label="英文名">{{ info.foreignName }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ info.phone || user.phone }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ info.email }}</el-descriptions-item>
      <el-descriptions-item label="出生日期">{{ formatDate(info.birthday, 'YYYY-MM-DD') }}</el-descriptions-item>
      <el-descriptions-item label="首次工作时间">{{ formatDate(info.firstWorkTime, 'YYYY-MM-DD') }}</el-descriptions-item>
      <el-descriptions-item label="婚姻状况">
        <dict-tag v-if="info?.maritalStatus" :type="DICT_TYPE.MENDUNER_MARITAL_STATUS" :value="info.maritalStatus" />
      </el-descriptions-item>
      <el-descriptions-item label="学历">
        <dict-tag v-if="info?.eduType" :type="DICT_TYPE.MENDUNER_EDUCATION_TYPE" :value="info.eduType" />
      </el-descriptions-item>
      <el-descriptions-item label="	工作经验">
        <dict-tag v-if="info?.expType" :type="DICT_TYPE.MENDUNER_EXP_TYPE" :value="info.expType" />
      </el-descriptions-item>
      <el-descriptions-item label="求职类型">
        <dict-tag v-if="info?.jobType" :type="DICT_TYPE.MENDUNER_JOB_TYPE" :value="info.jobType" />
      </el-descriptions-item>
      <el-descriptions-item label="求职状态">
        <dict-tag v-if="info?.jobStatus" :type="DICT_TYPE.MENDUNER_JOB_SEEK_STATUS" :value="info.jobStatus" />
      </el-descriptions-item>
      <el-descriptions-item label="账号状态">
        <dict-tag v-if="info?.status" :type="DICT_TYPE.MENDUNER_STATUS" :value="user.status" />
      </el-descriptions-item>
      <el-descriptions-item label="会员套餐">
        {{ user.vipFlag ? packageList.find(e => e.id === Number(user.vipFlag))?.name : '' }}
      </el-descriptions-item>
      <el-descriptions-item label="会员到期时间">
        {{ formatDate(user.vipExpireDate, 'YYYY-MM-DD HH:mm:ss') }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
defineOptions({ name: 'EnterpriseDetailsInfo'})
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { PersonInfoApi } from '@/api/menduner/system/person'

const emit = defineEmits(['echo'])

const props = defineProps({
  id: String,
  userId: [String, Number]
})

// 获取人才详情
const info = ref({})
const getInfo = async () => {
  if (!props.id) return
  const data = await PersonInfoApi.getPersonDetails(props.id)
  info.value = data
  emit('echo', JSON.stringify(data))
}

// 获取用户详情
const user = ref({})
const getUserDetails = async () => {
  if (!props.userId) return
  const data = await PersonInfoApi.getUserDetails(props.userId)
  user.value = data
}

watch(() => props.userId, (newVal) => {
  if (newVal) {
    getInfo()
    getUserDetails()
  }
}, { immediate: true }, { deep: true })

// 会员套餐列表
const packageList = ref([])
const getPackageList = async () => {
  const data = await PersonInfoApi.getPersonPackageList()
  packageList.value = data
}
getPackageList()

</script>
