<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="30rem"
      :title="getTitle"
      @register="register"
      @cancel="handleCancel"
      @ok="handleOk"
      destroyOnClose
    >
      <div>
        <BasicForm @register="registerForm" />
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
import {BasicModal, useModalInner} from "/@/components/Modal";
import {BasicForm, useForm} from "/@/components/Form";
import {computed, ref, unref} from "vue";
import {useI18n} from "/@/hooks/web/useI18n";
import {schemas} from "../index";
import {equipmentPlanCategory} from "/@/api/equipment/chenkPlan";
import {useMessage} from "/@/hooks/web/useMessage";
const { t } = useI18n();
const { createMessage } = useMessage();

const emit = defineEmits(['handleReload', 'register']);
const recordInfo = ref<any>({});
const isUpdate = ref<Boolean>(false);
const getTitle = computed(() =>
  !unref(isUpdate)
    ? t('equipment.checkPlan.createCategoryText')
    : t('equipment.checkPlan.editCategoryText')
);
const [registerForm, { getFieldsValue, setFieldsValue, validate }] = useForm({
  labelWidth: 140,
  schemas,
  actionColOptions: {
    span: 14,
  },
  showActionButtonGroup: false,
});

const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
  setModalProps({ confirmLoading: false, loading: true });
  isUpdate.value = data?.isUpdate;
  recordInfo.value = data?.record;
  if (data?.record) {
    setFieldsValue(data?.record);
  }
  setModalProps({ loading: false });
});

const handleCancel = () => {
  closeModal();
};

const handleOk = async () => {
  await validate();
  let values = getFieldsValue();
  if (unref(isUpdate)) {
    values = { ...values, id: unref(recordInfo).id };
  }
  await equipmentPlanCategory(values);
  createMessage.success(t('common.operationSuccessText'));
  emit('handleReload');
  handleCancel();
};

</script>