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

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

  const formMode = ref(DataActionModeEnum.CREATE);

  const { t } = useI18n();

  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().then(async () => {
        await nextTick();
        clearValidate();
      });
      if (record && mode === DataActionModeEnum.UPDATE) {
        const res = parseData(record);
        setFieldsValue({ ...res });
        setFieldsValue({
          [FormFieldsEnum.EXECUTE_TARGET_DATA]: {
            ...res.executeTargetData,
            paramsOrg: res.organizationId, //传递组织id到DevicePicker组件里进行组织过滤
            change: false,
          },
          [FormFieldsEnum.DEVICE_PROFILE]: {
            ...res.executeTargetData,
            paramsOrg: res.organizationId, //传递组织id到DevicePicker组件里进行组织过滤
            change: false,
          },
        });
      }
    }
  );

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

  const loading = ref(false);
  const { createMessage } = useMessage();
  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 });
      createMessage.success(
        unref(modalMode) === DataActionModeEnum.CREATE
          ? t('common.createSuccessText')
          : t('common.editSuccessText')
      );
      closeModal();
      props.reload?.();
    } catch (error) {
      throw error;
    } finally {
      loading.value = false;
    }
  };

  const getTitle = computed(() => {
    return t(`taskCenter.task.action.${unref(formMode)}`);
  });
</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>