<script setup lang="ts">
  import { useForm, BasicForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { FormFieldsValueType, formSchemas } from './config';
  import { createOrEditScriptManage } from '/@/api/scriptmanage/scriptManager';
  import {
    TransportScriptParamsType,
    TransportScriptRecordType,
  } from '/@/api/scriptmanage/model/scriptModel';
  import { computed, ref, unref } from 'vue';
  import { DataActionModeEnum } from '/@/enums/toolEnum';

  const emits = defineEmits(['register', 'complete']);

  const currentData = ref<ModalParamsType<TransportScriptRecordType>>();

  const [register, { setModalProps, closeModal }] = useModalInner(
    (data: ModalParamsType<TransportScriptRecordType>) => {
      const { mode, record } = data;
      resetFields();
      clearValidate();
      if ([DataActionModeEnum.UPDATE, DataActionModeEnum.READ].includes(mode)) {
        const {
          name,
          description,
          convertTbel,
          convertJs,
          scriptLanguage,
          serviceType,
          scriptType = 'TRANSPORT_TCP_UP',
        } = record || {};
        setFieldsValue({
          name,
          description,
          serviceType,
          language: scriptLanguage,
          scriptContent: {
            scriptLang: scriptLanguage,
            jsScript: convertJs,
            tbelScript: convertTbel,
          },
          scriptType,
        } as FormFieldsValueType);
      }
      currentData.value = data;
    }
  );

  const [registerForm, { getFieldsValue, validate, setFieldsValue, resetFields, clearValidate }] =
    useForm({
      schemas: formSchemas,
      showActionButtonGroup: false,
    });

  const getModalTitle = computed(
    () => `${unref(currentData)?.mode === DataActionModeEnum.CREATE ? '创建' : '编辑'}脚本`
  );

  const handleOk = async () => {
    try {
      setModalProps({ loading: true, confirmLoading: true });
      await validate();
      const { name, description, scriptContent, scriptType, serviceType } =
        getFieldsValue() as FormFieldsValueType;

      const { scriptLang, tbelScript, jsScript } = scriptContent || {};
      const params: TransportScriptParamsType = {
        name,
        description,
        status: 1,
        scriptType,
        scriptLanguage: scriptLang,
        convertJs: jsScript,
        convertTbel: tbelScript,
        serviceType,
      };

      if (unref(currentData)?.mode === DataActionModeEnum.UPDATE) {
        params.id = unref(currentData)!.record.id;
      }

      await createOrEditScriptManage(params);
      emits('complete');
      closeModal();
    } finally {
      setModalProps({ loading: false, confirmLoading: false });
    }
  };
</script>

<template>
  <BasicModal
    @register="register"
    :title="getModalTitle"
    :width="700"
    @ok="handleOk"
    :showOkBtn="currentData?.mode !== DataActionModeEnum.READ"
  >
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>