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

import { computed, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';

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

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

const formSchema: VbenFormSchema[] = [
  {
    component: 'DatePicker',
    componentProps: {
      picker: 'year',
      format: 'YYYY',
      valueFormat: 'YYYY',
      getVxePopupContainer,
    },
    fieldName: 'recordDate',
    label: '记录时间',
    rules: 'required',
  },
  // {
  //   component: 'Input',
  //   fieldName: 'lastYearTitle',
  //   label: '上一年标题',
  //   rules: 'required',
  // },
  // {
  //   component: 'Input',
  //   fieldName: 'currentYearTitle',
  //   label: '今年标题',
  //   rules: 'required',
  // },
  // {
  //   component: 'Input',
  //   fieldName: 'nextYearTitle',
  //   label: '明年标题',
  //   rules: 'required',
  // },
  // {
  //   component: 'Input',
  //   fieldName: 'initFlag',
  //   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 [BasicModal, modalApi] = useVbenModal({
  fullscreenButton: false,
  onBeforeClose,
  onClosed: handleClosed,
  onConfirm: onSubmit,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);

    const data = modalApi.getData<StaffingPlanRecordsApi.StaffingPlanRecords>();
    isUpdate.value = !!data?.id;
    setupForm(isUpdate.value);
    if (data) {
      await formApi.setValues(data);
    }
    await markInitialized();

    modalApi.modalLoading(false);
  },
});

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

function setupForm(update: boolean) {
  formApi.updateSchema([
    {
      componentProps: {
        disabled: update,
      },
      fieldName: 'recordDate',
    },
  ]);
}

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

const getModalTitle = computed(() =>
  isUpdate.value ? '修改编制规划记录' : '新增编制规划记录',
);
</script>
<template>
  <BasicModal :title="getModalTitle">
    <BasicForm class="mx-4" />
  </BasicModal>
</template>
