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

import { computed, ref } from 'vue';

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

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

const emit = defineEmits<{
  success: [];
}>();
const isUpdate = ref(false);

const formSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
    fieldName: 'id',
    label: 'id',
  },
  {
    component: 'Input',
    fieldName: 'plate',
    label: '板块',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'firstLevelDepartment',
    label: '一级部门',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'secondLevelDepartment',
    label: '二级部门',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'thirdLevelDepartment',
    label: '三级部门',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'deptId',
    label: '部门ID',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'position',
    label: '主岗位',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'lastYearStaffing',
    label: '上一年编制',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'thisYearStaffing',
    label: '今年编制',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'nextYearStaffing',
    label: '下一年编制',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm1FormalPlan',
    label: '1月正式工计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm1FormalActual',
    label: '1月正式工实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm1PartPlan',
    label: '1月兼职计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm1PartActual',
    label: '1月兼职实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm2FormalPlan',
    label: '2月正式工计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm2FormalActual',
    label: '2月正式工实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm2PartPlan',
    label: '2月兼职计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm2PartActual',
    label: '2月兼职实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm3FormalPlan',
    label: '3月正式工计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm3FormalActual',
    label: '3月正式工实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm3PartPlan',
    label: '3月兼职计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm3PartActual',
    label: '3月兼职实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm4FormalPlan',
    label: '4月正式工计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm4FormalActual',
    label: '4月正式工实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm4PartPlan',
    label: '4月兼职计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm4PartActual',
    label: '4月兼职实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm5FormalPlan',
    label: '5月正式工计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm5FormalActual',
    label: '5月正式工实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm5PartPlan',
    label: '5月兼职计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm5PartActual',
    label: '5月兼职实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm6FormalPlan',
    label: '6月正式工计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm6FormalActual',
    label: '6月正式工实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm6PartPlan',
    label: '6月兼职计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm6PartActual',
    label: '6月兼职实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm7FormalPlan',
    label: '7月正式工计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm7FormalActual',
    label: '7月正式工实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm7PartPlan',
    label: '7月兼职计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm7PartActual',
    label: '7月兼职实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm8FormalPlan',
    label: '8月正式工计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm8FormalActual',
    label: '8月正式工实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm8PartPlan',
    label: '8月兼职计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm8PartActual',
    label: '8月兼职实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm9FormalPlan',
    label: '9月正式工计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm9FormalActual',
    label: '9月正式工实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm9PartPlan',
    label: '9月兼职计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm9PartActual',
    label: '9月兼职实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm10FormalPlan',
    label: '10月正式工计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm10FormalActual',
    label: '10月正式工实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm10PartPlan',
    label: '10月兼职计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm10PartActual',
    label: '10月兼职实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm11FormalPlan',
    label: '11月正式工计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm11FormalActual',
    label: '11月正式工实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm11PartPlan',
    label: '11月兼职计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm11PartActual',
    label: '11月兼职实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm12FormalPlan',
    label: '12月正式工计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm12FormalActual',
    label: '12月正式工实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm12PartPlan',
    label: '12月兼职计划',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'm12PartActual',
    label: '12月兼职实际',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'summary',
    label: '合计行',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'remark',
    label: '备注',
    rules: 'required',
  },
];

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,
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return null;
    }
    const data = drawerApi.getData<StaffingPlanDataApi.StaffingPlanData>();
    isUpdate.value = !!data?.id;
    if (isUpdate.value) {
      await formApi.setValues(data);
    } else {
      formApi.resetForm();
    }
    await markInitialized();
  },
});

async function onSubmit() {
  const { valid } = await formApi.validate();
  if (valid) {
    drawerApi.lock();
    const data =
      await formApi.getValues<StaffingPlanDataApi.StaffingPlanData>();
    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 class="w-full max-w-[800px]" :title="getDrawerTitle">
    <BasicForm class="mx-4" />
  </Drawer>
</template>
