<script setup lang="ts">
import type { EmployeeInfoApi } from '#/api/hr/employeeModel';

import { ref, shallowRef } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import {
  Descriptions,
  DescriptionsItem,
  Image,
  Skeleton,
  Spin,
} from 'ant-design-vue';

import { apiInfoDetail } from '#/api/hr/employeeInfo';
import { apiInfoDetail as resignInfoDetail } from '#/api/hr/resignEmployee';

const [BasicDrawer, drawerApi] = useVbenDrawer({
  onOpenChange: handleOpenChange,
  onClosed() {
    currentEmployee.value = null;
  },
});

const currentEmployee = shallowRef<EmployeeInfoApi.Employee | null>(null);
const loading = ref(false);
const isResign = ref(false);

async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  const { id, resignFlag } = drawerApi.getData() as {
    id?: number;
    resignFlag?: boolean;
  };
  if (!id) {
    return null;
  }
  isResign.value = !!resignFlag;
  const data = await (isResign.value
    ? resignInfoDetail(id)
    : apiInfoDetail(id));
  // const data = await apiInfoDetail(id);
  currentEmployee.value = data;
}

// const actionInfo = computed(() => {
//   if (!currentLog.value) {
//     return '-';
//   }
//   const data = currentLog.value;
//   // return `账号: ${data.operName} / ${data.deptName} / ${data.ip} / ${data.operLocation}`;
//   return `账号: ${data.operName} / ${data.ip}`;
// });
</script>

<template>
  <BasicDrawer :footer="false" class="w-[900px]" title="员工信息">
    <Skeleton v-if="loading" active />
    <Descriptions
      v-show="!loading"
      v-if="currentEmployee"
      size="small"
      bordered
      :column="2"
      class="mb-2"
      :label-style="{
        width: '140px',
        fontWeight: 500,
        backgroundColor: '#75e0e0',
      }"
    >
      <template #title>
        <div class="text-center">部门信息</div>
      </template>
      <DescriptionsItem label="板块">
        {{ currentEmployee.plate }}
      </DescriptionsItem>
      <DescriptionsItem label="一级部门">
        {{ currentEmployee.firstLevelDepartment }}
      </DescriptionsItem>
      <DescriptionsItem label="二级部门">
        {{ currentEmployee.secondLevelDepartment }}
      </DescriptionsItem>
      <DescriptionsItem label="三级部门">
        {{ currentEmployee.thirdLevelDepartment }}
      </DescriptionsItem>
      <DescriptionsItem label="工号">
        {{ currentEmployee.employeeNo }}
      </DescriptionsItem>
      <DescriptionsItem label="职级">
        {{ currentEmployee.jobLevel }}
      </DescriptionsItem>
      <DescriptionsItem label="主岗位">
        {{ currentEmployee.position }}
      </DescriptionsItem>
      <DescriptionsItem label="岗位类型">
        {{ currentEmployee.positionTypeName }}
      </DescriptionsItem>
      <DescriptionsItem label="序列">
        {{ currentEmployee.sequenceName }}
      </DescriptionsItem>
      <DescriptionsItem label="兼岗板块">
        {{ currentEmployee.concurrentPlate }}
      </DescriptionsItem>
      <DescriptionsItem label="兼岗一级部门">
        {{ currentEmployee.concurrentFirstDept }}
      </DescriptionsItem>
      <DescriptionsItem label="兼岗二级部门">
        {{ currentEmployee.concurrentSecondDept }}
      </DescriptionsItem>
      <DescriptionsItem label="兼岗三级部门">
        {{ currentEmployee.concurrentThirdDept }}
      </DescriptionsItem>
      <DescriptionsItem label="兼岗岗位">
        {{ currentEmployee.concurrentPosition }}
      </DescriptionsItem>
      <DescriptionsItem label="兼岗岗位类型">
        {{ currentEmployee.concurrentPositionTypeName }}
      </DescriptionsItem>
    </Descriptions>
    <Descriptions
      v-show="!loading"
      v-if="currentEmployee"
      size="small"
      bordered
      :column="2"
      class="mb-2"
      :label-style="{
        width: '140px',
        fontWeight: 500,
        backgroundColor: '#75e0e0',
      }"
    >
      <template #title>
        <div class="text-center">员工信息</div>
      </template>
      <DescriptionsItem label="姓名">
        {{ currentEmployee.name }}
      </DescriptionsItem>
      <DescriptionsItem label="照片">
        <Image
          v-if="!!currentEmployee.photo"
          :src="currentEmployee.photo"
          height="50px"
        >
          <template #placeholder>
            <div class="flex size-full items-center justify-center">
              <Spin />
            </div>
          </template>
        </Image>
      </DescriptionsItem>
      <DescriptionsItem label="性别">
        {{ currentEmployee.genderName }}
      </DescriptionsItem>
      <DescriptionsItem label="身份证号码">
        {{ currentEmployee.idCardNumber }}
      </DescriptionsItem>
      <DescriptionsItem label="手机号">
        {{ currentEmployee.phoneNumber }}
      </DescriptionsItem>
      <DescriptionsItem label="出生日期">
        {{ currentEmployee.birthDate }}
      </DescriptionsItem>
      <DescriptionsItem label="年龄">
        {{ currentEmployee.age }}
      </DescriptionsItem>
      <DescriptionsItem label="年龄组">
        {{ currentEmployee.ageGroupName }}
      </DescriptionsItem>
      <DescriptionsItem label="籍贯">
        {{ currentEmployee.nativePlace }}
      </DescriptionsItem>
      <DescriptionsItem label="民族">
        {{ currentEmployee.ethnicity }}
      </DescriptionsItem>
      <DescriptionsItem label="婚姻状况">
        {{ currentEmployee.maritalStatusName }}
      </DescriptionsItem>
      <DescriptionsItem label="政治面貌">
        {{ currentEmployee.politicalStatusName }}
      </DescriptionsItem>
      <DescriptionsItem label="紧急联系人">
        {{ currentEmployee.emergencyContact }}
      </DescriptionsItem>
      <DescriptionsItem label="紧急联系人电话">
        {{ currentEmployee.emergencyContactPhone }}
      </DescriptionsItem>
      <DescriptionsItem label="家庭地址" :span="2">
        {{ currentEmployee.homeAddress }}
      </DescriptionsItem>
      <DescriptionsItem label="户口所在地" :span="2">
        {{ currentEmployee.householdRegistrationAddress }}
      </DescriptionsItem>
    </Descriptions>
    <Descriptions
      v-show="!loading"
      v-if="currentEmployee"
      size="small"
      bordered
      :column="2"
      class="mb-2"
      :label-style="{
        width: '140px',
        fontWeight: 500,
        backgroundColor: '#75e0e0',
      }"
    >
      <template #title>
        <div class="text-center">教育信息</div>
      </template>
      <DescriptionsItem label="全日制学历">
        {{ currentEmployee.fulltimeEducation }}
      </DescriptionsItem>
      <DescriptionsItem label="全日制毕业院校">
        {{ currentEmployee.fulltimeSchool }}
      </DescriptionsItem>
      <DescriptionsItem label="全日制专业">
        {{ currentEmployee.fulltimeMajor }}
      </DescriptionsItem>
      <DescriptionsItem label="全日制毕业日期">
        {{ currentEmployee.fulltimeGraduationDate }}
      </DescriptionsItem>
      <DescriptionsItem label="全日制学位">
        {{ currentEmployee.fulltimeDegree }}
      </DescriptionsItem>
      <DescriptionsItem label="非全日制学历">
        {{ currentEmployee.nonFulltimeEducation }}
      </DescriptionsItem>
      <DescriptionsItem label="非全日制毕业院校">
        {{ currentEmployee.nonFulltimeSchool }}
      </DescriptionsItem>
      <DescriptionsItem label="非全日制专业">
        {{ currentEmployee.nonFulltimeMajor }}
      </DescriptionsItem>
      <DescriptionsItem label="非全日制毕业日期">
        {{ currentEmployee.nonFulltimeGraduationDate }}
      </DescriptionsItem>
      <DescriptionsItem label="非全日制学位">
        {{ currentEmployee.nonFulltimeDegree }}
      </DescriptionsItem>
      <DescriptionsItem label="学历分类">
        {{ currentEmployee.educationCategoryName }}
      </DescriptionsItem>
    </Descriptions>
    <Descriptions
      v-show="!loading"
      v-if="currentEmployee"
      size="small"
      bordered
      :column="2"
      class="mb-2"
      :label-style="{
        width: '140px',
        fontWeight: 500,
        backgroundColor: '#75e0e0',
      }"
    >
      <template #title>
        <div class="text-center">职业信息</div>
      </template>
      <DescriptionsItem label="参加工作时间">
        {{ currentEmployee.workStartDate }}
      </DescriptionsItem>
      <DescriptionsItem label="入职时间">
        {{ currentEmployee.entryDate }}
      </DescriptionsItem>
      <DescriptionsItem label="转正时间">
        {{ currentEmployee.regularizationDate }}
      </DescriptionsItem>
      <DescriptionsItem label="工龄">
        {{ currentEmployee.yearsOfService }}
      </DescriptionsItem>
      <DescriptionsItem label="工龄段">
        {{ currentEmployee.yearsOfServiceSegmentName }}
      </DescriptionsItem>
      <DescriptionsItem label="员工类型">
        {{ currentEmployee.employeeTypeName }}
      </DescriptionsItem>
      <DescriptionsItem label="用工形式">
        {{ currentEmployee.employmentFormName }}
      </DescriptionsItem>
      <DescriptionsItem label="职称情况">
        {{ currentEmployee.professionalTitle }}
      </DescriptionsItem>
      <DescriptionsItem label="证书情况" :span="2">
        {{ currentEmployee.certificateStatus }}
      </DescriptionsItem>
      <DescriptionsItem label="外部个人履历" :span="2">
        {{ currentEmployee.externalResume }}
      </DescriptionsItem>
      <DescriptionsItem label="内部个人履历" :span="2">
        {{ currentEmployee.internalResume }}
      </DescriptionsItem>
    </Descriptions>
    <Descriptions
      v-show="!loading"
      v-if="currentEmployee"
      size="small"
      bordered
      :column="2"
      class="mb-2"
      :label-style="{
        width: '150px',
        fontWeight: 500,
        backgroundColor: '#75e0e0',
      }"
    >
      <template #title>
        <div class="text-center">合同信息</div>
      </template>
      <DescriptionsItem label="合同形式">
        {{ currentEmployee.contractFormName }}
      </DescriptionsItem>
      <DescriptionsItem label="劳动合同期限">
        {{ currentEmployee.contractTerm }}
      </DescriptionsItem>
      <DescriptionsItem label="劳动合同开始时间">
        {{ currentEmployee.contractStartDate }}
      </DescriptionsItem>
      <DescriptionsItem label="劳动合同截止时间">
        {{ currentEmployee.contractEndDate }}
      </DescriptionsItem>
      <DescriptionsItem label="合同到期提醒">
        {{ currentEmployee.contractExpirationReminder }}
      </DescriptionsItem>
      <DescriptionsItem label="合同主体">
        {{ currentEmployee.contractEntity }}
      </DescriptionsItem>
      <DescriptionsItem label="社保主体">
        {{ currentEmployee.socialSecurityEntity }}
      </DescriptionsItem>
      <DescriptionsItem label="是否缴纳社保">
        {{ currentEmployee.hasSocialSecurityPaidName }}
      </DescriptionsItem>
      <DescriptionsItem label="公积金主体">
        {{ currentEmployee.providentFundEntity }}
      </DescriptionsItem>
      <DescriptionsItem label="是否缴纳公积金">
        {{ currentEmployee.hasProvidentFundPaidName }}
      </DescriptionsItem>
      <DescriptionsItem label="是否缴纳雇主险">
        {{ currentEmployee.hasEmployerInsurancePaid }}
      </DescriptionsItem>
      <DescriptionsItem label="试用期">
        {{ currentEmployee.probationPeriod }}
      </DescriptionsItem>
      <DescriptionsItem label="劳动合同签订情况" :span="2">
        {{ currentEmployee.contractSigningStatus }}
      </DescriptionsItem>
    </Descriptions>
    <Descriptions
      v-show="!loading"
      v-if="currentEmployee"
      size="small"
      bordered
      :column="2"
      class="mb-2"
      :label-style="{
        width: '140px',
        fontWeight: 500,
        backgroundColor: '#75e0e0',
      }"
    >
      <template #title>
        <div class="text-center">其他信息</div>
      </template>
      <DescriptionsItem label="办公电话">
        {{ currentEmployee.officePhone }}
      </DescriptionsItem>
      <DescriptionsItem label="短线">
        {{ currentEmployee.shortLine }}
      </DescriptionsItem>
      <DescriptionsItem label="银行卡号">
        {{ currentEmployee.bankCardNumber }}
      </DescriptionsItem>
      <DescriptionsItem label="开户行">
        {{ currentEmployee.bankName }}
      </DescriptionsItem>
      <DescriptionsItem label="是否有亲属关系">
        {{ currentEmployee.hasRelativeInCompanyName }}
      </DescriptionsItem>
      <DescriptionsItem label="亲属姓名">
        {{ currentEmployee.relativeName }}
      </DescriptionsItem>
      <DescriptionsItem label="介绍人">
        {{ currentEmployee.introducer }}
      </DescriptionsItem>
      <DescriptionsItem label="介绍人关系">
        {{ currentEmployee.introducerRelation }}
      </DescriptionsItem>
      <DescriptionsItem label="工资发放地">
        {{ currentEmployee.salaryLocation }}
      </DescriptionsItem>
      <DescriptionsItem label="编制所在地">
        {{ currentEmployee.staffingLocation }}
      </DescriptionsItem>
      <DescriptionsItem label="成本费用所属">
        {{ currentEmployee.costOfDept }}
      </DescriptionsItem>
      <DescriptionsItem label="成本费用细分">
        {{ currentEmployee.costTypeName }}
      </DescriptionsItem>
      <DescriptionsItem label="工装">
        {{ currentEmployee.workwearDetail }}
      </DescriptionsItem>
      <DescriptionsItem label="内部购房优惠">
        {{ currentEmployee.internalPurchaseDiscountsName }}
      </DescriptionsItem>
      <DescriptionsItem label="安泰业主">
        {{ currentEmployee.antaiHomeownersName }}
      </DescriptionsItem>
      <DescriptionsItem label="小区具体信息">
        {{ currentEmployee.antaiCommunityInfo }}
      </DescriptionsItem>
      <DescriptionsItem label="绩效比例" :span="2">
        {{ currentEmployee.performanceRatio }}
      </DescriptionsItem>
      <DescriptionsItem label="奖励情况" :span="2">
        {{ currentEmployee.rewardStatus }}
      </DescriptionsItem>
      <DescriptionsItem label="处罚情况" :span="2">
        {{ currentEmployee.punishmentStatus }}
      </DescriptionsItem>
      <DescriptionsItem label="备注" :span="2">
        {{ currentEmployee.remarks }}
      </DescriptionsItem>
    </Descriptions>
    <Descriptions
      v-show="!loading"
      v-if="currentEmployee && currentEmployee.familyMembers"
      size="small"
      layout="vertical"
      bordered
      :column="6"
      class="mb-2"
      :label-style="{
        width: '140px',
        fontWeight: 500,
      }"
    >
      <template #title>
        <div class="text-center">家庭成员信息</div>
      </template>
      <template
        v-for="member in currentEmployee.familyMembers"
        :key="member.id"
      >
        <DescriptionsItem label="关系">
          {{ member.relation }}
        </DescriptionsItem>
        <DescriptionsItem label="姓名">
          {{ member.name }}
        </DescriptionsItem>
        <DescriptionsItem label="出生年月">
          {{ member.birthDate }}
        </DescriptionsItem>
        <DescriptionsItem label="工作单位及职务">
          {{ member.companyAndJob }}
        </DescriptionsItem>
        <DescriptionsItem label="联系方式">
          {{ member.contact }}
        </DescriptionsItem>
        <DescriptionsItem label="是否为紧急联系人">
          {{ member.emergencyFlagName }}
        </DescriptionsItem>
      </template>
    </Descriptions>
    <Descriptions
      v-show="!loading"
      v-if="isResign && currentEmployee"
      size="small"
      bordered
      :column="2"
      class="mb-1"
      :label-style="{
        width: '140px',
        fontWeight: 500,
        backgroundColor: '#75e0e0',
      }"
    >
      <template #title>
        <div class="text-center">离职信息</div>
      </template>
      <DescriptionsItem label="离职类型">
        {{ currentEmployee.resignationTypeName }}
      </DescriptionsItem>
      <DescriptionsItem label="离职时间">
        {{ currentEmployee.resignationDate }}
      </DescriptionsItem>
      <DescriptionsItem label="最后结薪日" :span="2">
        {{ currentEmployee.finalPayDate }}
      </DescriptionsItem>
      <DescriptionsItem label="离职原因" :span="2">
        {{ currentEmployee.resignationReason }}
      </DescriptionsItem>
    </Descriptions>
  </BasicDrawer>
</template>

<style lang="scss" scoped>
:deep(.ant-descriptions-item-label) {
  background-color: #75e0e0 !important;
}
</style>
