<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { formSchemas } from './config';
  import { ref } from 'vue';
  import { composeData, parseData } from './util';
  import { createTask, updateTask } from '/@/api/task';
  import { ModalParamsType } from '/#/utils';
  import { DataActionModeEnum, DataActionModeNameEnum } from '/@/enums/toolEnum';
  import { TaskRecordType } from '/@/api/task/model';
  import { FormValueType } from './util';
  import { unref } from 'vue';
  import { computed } from 'vue';

  const props = defineProps<{
    reload: Fn;
  }>();
  defineEmits(['register']);

  const formMode = ref(DataActionModeEnum.CREATE);

  const modalMode = ref<DataActionModeEnum>(DataActionModeEnum.CREATE);

  const dataSource = ref<TaskRecordType>();
  const [registerModal, { closeModal }] = useModalInner(
    (
      { record, mode }: ModalParamsType<TaskRecordType> = {
        record: {} as unknown as TaskRecordType,
        mode: DataActionModeEnum.CREATE,
      }
    ) => {
      modalMode.value = mode;
      dataSource.value = record;
      formMode.value = mode;
      resetFields();
      if (record && mode === DataActionModeEnum.UPDATE) {
        const res = parseData(record);
        setFieldsValue({ ...res });
      }
    }
  );

  const [registerForm, { getFieldsValue, validate, setFieldsValue, resetFields }] = useForm({
    schemas: formSchemas,
    showActionButtonGroup: false,
    layout: 'inline',
    baseColProps: { span: 24 },
    labelWidth: 140,
  });

  const loading = ref(false);
  const handleOk = async () => {
    try {
      loading.value = true;
      await validate();
      const res = getFieldsValue();
      const _res = composeData(res as Required<FormValueType>);
      formMode.value === DataActionModeEnum.CREATE
        ? await createTask(_res)
        : await updateTask({ ..._res, id: unref(dataSource)?.id as string });
      closeModal();
      props.reload?.();
    } catch (error) {
      throw error;
    } finally {
      loading.value = false;
    }
  };

  const getTitle = computed(() => {
    return `${DataActionModeNameEnum[unref(modalMode)]}任务`;
  });
</script>

<template>
  <BasicModal
    @register="registerModal"
    :title="getTitle"
    width="700px"
    :okButtonProps="{ loading }"
    @ok="handleOk"
  >
    <BasicForm @register="registerForm" class="form-container" />
  </BasicModal>
</template>

<style lang="less" scoped>
  .form-container {
    :deep(.ant-input-number) {
      width: 100%;
    }
  }
</style>