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

import { computed, ref } from 'vue';

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

import { Skeleton } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { apiAdd, apiUpdate } from '#/api/hr/employeeInfo';
import { getDictOptions } from '#/utils/dict';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';

import { HrDictEnum } from '../dict-enum';

const emit = defineEmits<{
  success: [];
}>();
const formData = ref<EmployeeInfoApi.Employee>();
const loading = ref(false);

const formSchema: VbenFormSchema[] = [
  {
    component: 'Divider',
    componentProps: {
      orientation: 'center',
    },
    fieldName: 'divider1',
    formItemClass: 'col-span-2',
    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '部门信息',
    }),
  },
  {
    component: 'Input',
    fieldName: 'plate',
    label: '板块',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'project',
    label: '项目',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'firstLevelDepartment',
    label: '一级部门',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'secondLevelDepartment',
    label: '二级部门',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'employeeId',
    label: '工号',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'jobLevel',
    label: '职级',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'position',
    label: '岗位',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'post',
    label: '职务',
    rules: 'required',
  },
  {
    component: 'Divider',
    componentProps: {
      orientation: 'center',
    },
    fieldName: 'divider1',
    formItemClass: 'col-span-2',
    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '员工信息',
    }),
  },
  {
    component: 'Input',
    fieldName: 'name',
    label: '姓名',
    rules: 'required',
  },
  {
    component: 'RadioGroup',
    componentProps: {
      buttonStyle: 'solid',
      optionType: 'button',
      options: getDictOptions(HrDictEnum.HR_USER_SEX),
    },
    defaultValue: '1',
    fieldName: 'gender',
    label: '性别',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'idCardNumber',
    label: '身份证号码',
    rules: 'required',
  },
  {
    component: 'DatePicker',
    fieldName: 'birthDate',
    label: '出生日期',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'age',
    label: '年龄',
    rules: 'required',
  },
  // {
  //   component: 'Input',
  //   fieldName: 'ageGroup',
  //   label: '年龄段',
  //   rules: 'required',
  // },
  {
    component: 'Input',
    fieldName: 'nativePlace',
    label: '籍贯',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'ethnicity',
    label: '民族',
    rules: 'required',
  },
  {
    component: 'Select',
    componentProps: {
      options: getDictOptions(HrDictEnum.HR_MARITAL_STATUS),
    },
    fieldName: 'maritalStatus',
    label: '婚姻状况',
    rules: 'selectRequired',
  },
  {
    component: 'Select',
    componentProps: {
      options: getDictOptions(HrDictEnum.HR_POLITICAL_STATUS),
    },
    fieldName: 'politicalStatus',
    label: '政治面貌',
    rules: 'selectRequired',
  },
  {
    component: 'Input',
    fieldName: 'phoneNumber',
    label: '手机号码',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'emergencyContact',
    label: '紧急联系人',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'emergencyContactPhone',
    label: '紧急联系人电话',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'homeAddress',
    label: '家庭地址',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'householdRegistrationAddress',
    label: '户口所在地',
    rules: 'required',
  },
  {
    component: 'Divider',
    componentProps: {
      orientation: 'center',
    },
    fieldName: 'divider1',
    formItemClass: 'col-span-2',
    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '教育信息',
    }),
  },
  {
    component: 'Input',
    fieldName: 'education',
    label: '学历',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'degree',
    label: '学位',
    rules: 'required',
  },
  {
    component: 'DatePicker',
    fieldName: 'graduationDate',
    label: '毕业时间',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'major',
    label: '专业',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'graduateSchool',
    label: '毕业院校',
    rules: 'required',
  },
  {
    component: 'Divider',
    componentProps: {
      orientation: 'center',
    },
    fieldName: 'divider1',
    formItemClass: 'col-span-2',
    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '职业信息',
    }),
  },
  {
    component: 'DatePicker',
    fieldName: 'workStartDate',
    label: '参加工作时间',
    rules: 'required',
  },
  {
    component: 'DatePicker',
    fieldName: 'entryDate',
    label: '入职时间',
    rules: 'required',
  },
  {
    component: 'DatePicker',
    fieldName: 'regularizationDate',
    label: '转正时间',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'yearsOfService',
    label: '工龄',
    rules: 'required',
  },
  // {
  //   component: 'Input',
  //   fieldName: 'yearsOfServiceSegment',
  //   label: '工龄段',
  //   rules: 'required',
  // },
  {
    component: 'Select',
    componentProps: {
      options: getDictOptions(HrDictEnum.HR_EMPLOYEE_TYPE),
    },
    fieldName: 'employeeType',
    label: '员工类型',
    rules: 'selectRequired',
  },
  {
    component: 'Select',
    componentProps: {
      options: getDictOptions(HrDictEnum.HR_EMPLOYMENT_FORM),
    },
    fieldName: 'employmentForm',
    label: '用工形式',
    rules: 'selectRequired',
  },
  {
    component: 'Input',
    fieldName: 'professionalTitle',
    label: '职称情况',
    // rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'resume',
    label: '简历',
    // rules: 'required',
  },
  {
    component: 'Divider',
    componentProps: {
      orientation: 'center',
    },
    fieldName: 'divider1',
    formItemClass: 'col-span-2',
    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '合同信息',
    }),
  },
  {
    component: 'Input',
    fieldName: 'contractTerm',
    label: '劳动合同期限',
    rules: 'required',
  },
  {
    component: 'DatePicker',
    fieldName: 'contractStartDate',
    label: '劳动合同开始时间',
    rules: 'required',
  },
  {
    component: 'DatePicker',
    fieldName: 'contractEndDate',
    label: '劳动合同截止时间',
    rules: 'required',
  },
  {
    component: 'DatePicker',
    fieldName: 'contractExpirationReminder',
    label: '合同到期提醒',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'contractEntity',
    label: '合同主体',
    rules: 'required',
  },
  {
    component: 'Input',
    // componentProps: {
    //   buttonStyle: 'solid',
    //   optionType: 'button',
    // },
    fieldName: 'contractSigningStatus',
    label: '劳动合同签订情况',
    formItemClass: 'col-span-2',
    // rules: 'required',
  },
  {
    component: 'Divider',
    componentProps: {
      orientation: 'center',
    },
    fieldName: 'divider1',
    formItemClass: 'col-span-2',
    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '其他信息',
    }),
  },
  {
    component: 'Input',
    // componentProps: {
    //   buttonStyle: 'solid',
    //   optionType: 'button',
    // },
    fieldName: 'transferStatus',
    formItemClass: 'col-span-2',
    label: '异动情况',
    rules: 'required',
  },
  {
    component: 'Input',
    // componentProps: {
    //   buttonStyle: 'solid',
    //   optionType: 'button',
    // },
    fieldName: 'rewardPunishmentStatus',
    formItemClass: 'col-span-2',
    label: '奖惩情况',
    rules: 'required',
  },
  {
    component: 'Textarea',
    fieldName: 'remarks',
    formItemClass: 'col-span-2',
    label: '备注',
    // rules: 'required',
  },
  // {
  //   component: 'DatePicker',
  //   fieldName: 'resignationDate',
  //   label: '离职时间',
  //   rules: 'required',
  // },
  // {
  //   component: 'Textarea',
  //   fieldName: 'resignationReason',
  //   label: '离职原因',
  //   rules: 'required',
  // },
];

const [BasicForm, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
      formItemClass: 'col-span-1',
    },
    // formItemClass: 'col-span-2',
    labelWidth: 130,
  },
  schema: formSchema,
  showDefaultActions: false,
  wrapperClass: 'grid-cols-2',
});

const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
  {
    initializedGetter: defaultFormValueGetter(formApi),
    currentGetter: defaultFormValueGetter(formApi),
  },
);

const [Drawer, drawerApi] = useVbenDrawer({
  onBeforeClose,
  onClosed: handleClosed,
  onConfirm: onSubmit,
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return null;
    }
    const data = drawerApi.getData<EmployeeInfoApi.Employee>();
    if (data) {
      formData.value = data;
      await formApi.setValues(formData.value);
    } else {
      formApi.resetForm();
    }
    await markInitialized();
  },
});

async function onSubmit() {
  const { valid } = await formApi.validate();
  if (valid) {
    drawerApi.lock();
    const data = await formApi.getValues<EmployeeInfoApi.Employee>();
    try {
      await (formData.value?.id
        ? apiUpdate({ id: formData.value.id, ...data })
        : apiAdd(data));
      resetInitialized();
      emit('success');
      drawerApi.close();
    } finally {
      drawerApi.unlock();
    }
  }
}

async function handleClosed() {
  await formApi.resetForm();
  resetInitialized();
}

const getDrawerTitle = computed(() =>
  formData.value?.id ? '修改员工信息' : '新增员工信息',
);
</script>
<template>
  <Drawer class="w-full max-w-[900px]" :title="getDrawerTitle">
    <Skeleton v-if="loading" active />
    <BasicForm v-show="!loading" class="mx-4" />
  </Drawer>
</template>
