<template>
  <div>
    <el-descriptions v-loading="loading" title="用户信息" direction="vertical" border>
      <el-descriptions-item :rowspan="3" :width="200" label="人脸照">
        <el-image :src="userDetail?.facePicUrl" style="width: 150px; height: 150px" />
      </el-descriptions-item>
      <el-descriptions-item label="姓名">{{ userDetail?.userName }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ userDetail?.phone }}</el-descriptions-item>
      <el-descriptions-item label="性别">
        <dict-tag :options="user_sex_type" :value="userDetail?.sex" />
      </el-descriptions-item>
      <el-descriptions-item label="年龄">{{ dayjs().diff(dayjs(userDetail?.sfzBirth), 'year') }}</el-descriptions-item>
      <el-descriptions-item label="民族">{{ userDetail?.nation }}</el-descriptions-item>
      <el-descriptions-item label="籍贯">{{ userDetail?.nativePlace }}</el-descriptions-item>
      <el-descriptions-item label="身份证号码">{{ userDetail?.sfzNumber }}</el-descriptions-item>
      <el-descriptions-item label="身份证有效期">
        {{ dayjs(userDetail?.sfzStart).format('YYYY 年 MM 月 DD 日') }}
        —— {{ dayjs(userDetail?.sfzEnd).format('YYYY 年 MM 月 DD 日') }}
      </el-descriptions-item>
      <el-descriptions-item label="身份证地址">{{ userDetail?.sfzSite }}</el-descriptions-item>
    </el-descriptions>
    <br />
    <el-descriptions v-loading="loading" title="银行卡" direction="vertical" border>
      <el-descriptions-item label="银行卡号">{{ userDetail?.yhkNumber }}</el-descriptions-item>
      <el-descriptions-item label="银行开户行">{{ userDetail?.yhkOpeningBank }}</el-descriptions-item>
      <el-descriptions-item label="持卡人">{{ userDetail?.yhkCardholder }}</el-descriptions-item>
    </el-descriptions>
    <br />
    <el-descriptions v-loading="loading" title="单位信息" direction="vertical" border>
      <el-descriptions-item label="施工单位">{{ userDetail?.contractorVo?.name }}</el-descriptions-item>
      <el-descriptions-item label="工种">
        <dict-tag :options="type_of_work" :value="userDetail?.typeOfWork" />
      </el-descriptions-item>
    </el-descriptions>
    <br />
    <el-descriptions :column="2" v-loading="loading" title="其他信息" direction="vertical" border>
      <el-descriptions-item label="班组">{{ userDetail?.teamVo?.teamName }}</el-descriptions-item>
      <el-descriptions-item label="打卡状态">
        <dict-tag :options="user_clock_type" :value="userDetail?.clock" />
      </el-descriptions-item>
      <el-descriptions-item label="入场时间">
        {{ userDetail?.entryDate ? dayjs(userDetail?.entryDate).format('YYYY 年 MM 月 DD 日 HH:mm:ss') : '' }}
      </el-descriptions-item>
      <el-descriptions-item label="离场时间">
        {{ userDetail?.leaveDate ? dayjs(userDetail?.leaveDate).format('YYYY 年 MM 月 DD 日 HH:mm:ss') : '' }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { getConstructionUser } from '@/api/project/constructionUser';
import { ConstructionUserVO } from '@/api/project/constructionUser/types';
import dayjs from 'dayjs';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { type_of_work, user_sex_type, user_clock_type } = toRefs<any>(proxy?.useDict('type_of_work', 'user_sex_type', 'user_clock_type'));

interface Props {
  userId?: string | number;
}

const props = defineProps<Props>();
const loading = ref<boolean>(false);
const userDetail = ref<ConstructionUserVO>();
const getUserDetail = async () => {
  loading.value = true;
  const res = await getConstructionUser(props.userId);
  if (res.data && res.code === 200) {
    userDetail.value = res.data;
  }
  loading.value = false;
};

onMounted(() => {
  getUserDetail();
});

watch(
  () => props.userId,
  (newId, oldId) => {
    if (newId !== oldId) {
      getUserDetail();
    }
  }
);
</script>
