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

import { shallowRef } from 'vue';

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

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

// import { useVbenForm, z } from '#/adapter/form';

// const emit = defineEmits<{
//   success: [];
// }>();
// const isUpdate = ref(false);
const currentLog = shallowRef<ChangeLogApi.ChangeLog | null>(null);

// const formSchema: VbenFormSchema[] = [
//   {
//     component: 'Input',
//     dependencies: {
//       show: () => false,
//       triggerFields: [''],
//     },
//     fieldName: 'id',
//     label: 'id',
//   },
//   {
//     component: 'Select',
//     componentProps: {
//       getVxePopupContainer,
//       options: getDictOptions(DictEnum.HR_CHANGE_LOG_TYPE),
//     },
//     fieldName: 'type',
//     label: '变动类型',
//     rules: 'selectRequired',
//   },
//   {
//     component: 'Input',
//     fieldName: 'applyCode',
//     label: '流程申请编号',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'plateId',
//     label: '板块ID',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'plate',
//     label: '板块',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'deptId',
//     label: '部门ID',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'employeeId',
//     label: '员工ID',
//     rules: 'required',
//   },
//   {
//     component: 'DatePicker',
//     fieldName: 'changeDate',
//     label: '变动时间',
//     rules: 'required',
//   },
//   {
//     component: 'Select',
//     componentProps: {
//       getVxePopupContainer,
//       options: getDictOptions(DictEnum.HR_RESIGNATION_TYPE),
//     },
//     fieldName: 'resignType',
//     label: '离职类型',
//     rules: 'selectRequired',
//   },
//   {
//     component: 'Select',
//     componentProps: {
//       getVxePopupContainer,
//       options: getDictOptions(DictEnum.HR_RESIGN_YEARS_OF_SERVICE_TYPE),
//     },
//     fieldName: 'resignYearsOfServiceType',
//     label: '离职工龄类型',
//     rules: 'selectRequired',
//   },
// ];

// const [BasicForm, formApi] = useVbenForm({
//   commonConfig: {
//     componentProps: {
//       class: 'w-full',
//     },
//     formItemClass: 'col-span-2',
//     labelWidth: 90,
//   },
//   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,
  onClosed() {
    currentLog.value = null;
  },
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return null;
    }
    const data = drawerApi.getData() as ChangeLogApi.ChangeLog;
    currentLog.value = data;
  },
});

// async function onSubmit() {
//   const { valid } = await formApi.validate();
//   if (valid) {
//     drawerApi.lock();
//     const data = await formApi.getValues<ChangeLogApi.ChangeLog>();
//     try {
//       await (isUpdate.value ? apiUpdate(data) : apiAdd(data));
//       resetInitialized();
//       emit('success');
//       drawerApi.close();
//     } finally {
//       drawerApi.unlock();
//     }
//   }
// }

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

// const getDrawerTitle = computed(() =>
//   isUpdate.value ? '修改员工变动记录' : '新增员工变动记录',
// );
</script>
<template>
  <Drawer :footer="false" class="w-[600px]" title="查看变动日志">
    <Descriptions v-if="currentLog" size="small" bordered :column="1">
      <DescriptionsItem label="变动类型">
        {{ currentLog.typeName }}
      </DescriptionsItem>
      <DescriptionsItem label="流程申请编号">
        {{ currentLog.applyCode }}
      </DescriptionsItem>
      <DescriptionsItem label="板块">
        {{ currentLog.plate }}
      </DescriptionsItem>
      <DescriptionsItem label="变动时间">
        {{ currentLog.changeDate }}
      </DescriptionsItem>
      <DescriptionsItem label="离职类型">
        {{ currentLog.resignType }}
      </DescriptionsItem>
      <DescriptionsItem label="离职工龄类型">
        {{ currentLog.resignYearsOfServiceType }}
      </DescriptionsItem>
    </Descriptions>
  </Drawer>
</template>
