<template>
  <div>
    <BasicModal
      destroyOnClose
      v-bind="$attrs"
      width="60rem"
      @register="register"
      :title="getTitle"
      :minHeight="500"
      @cancel="handleCancel"
      @ok="handleSubmit"
    >
      <ConverScript
        :view="isViewDetail"
        :text="isTitle"
        :ifAdd="isTest ? false : true"
        ref="converScriptRef"
      />
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, computed, unref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import ConverScript from './ConverScript.vue';
  import {
    createOrEditScriptManage,
    getScriptManageDetail,
    testScriptManage,
  } from '/@/api/scriptmanage/scriptManager';
  import { useMessage } from '/@/hooks/web/useMessage';

  const emits = defineEmits(['success', 'register']);
  const { createMessage } = useMessage();
  const converScriptRef = ref<InstanceType<typeof ConverScript>>();
  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
  const isUpdate = ref(false);
  const isViewDetail = ref('');
  const isTest = ref(false);
  const isText = ref('');
  const isTitle = ref('');
  const editData = reactive({
    data: {},
  });
  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ loading: true });
    handleCancel(false);
    isUpdate.value = data.isUpdate;
    isViewDetail.value = data.isView;
    isTest.value = data.isTest;
    isText.value = data.isText;
    isTitle.value = data.isTitle;
    editData.data = data.record;
    setModalProps({ loading: false });
    converScriptRef.value?.initEditor();
    if (!unref(isViewDetail)) {
      const title =
        unref(isTitle) == 'edit'
          ? '编辑转换脚本'
          : unref(isTitle) == 'add'
          ? '新增转换脚本'
          : '测试转换脚本';
      const okText = isText.value == 'test' ? '测试' : '确定';
      if (unref(isTitle) == 'add') {
        converScriptRef.value?.setDefaultRadio('TRANSPORT_TCP_UP');
      }
      if (unref(isTitle) == 'edit') {
        converScriptRef.value?.setFormData(data.record);
      }
      if (unref(isTitle) == 'test') {
        if (data.record) {
          const res = await getScriptManageDetail(data.record);
          converScriptRef.value?.setFormData(res);
        } else {
          converScriptRef.value?.setDefaultRadio('TRANSPORT_TCP_UP');
        }
      }
      setModalProps({ title, showOkBtn: true, showCancelBtn: true, okText });
      if (!unref(isUpdate)) {
      }
    } else {
      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看转换脚本' });
      const res = await getScriptManageDetail(data.record.id);
      converScriptRef.value?.setFormData(res || {});
    }
  });

  const handleSubmit = async () => {
    setModalProps({ confirmLoading: true });
    try {
      const val = await converScriptRef.value?.getFormData();
      const tempObj = {
        ...editData.data,
        ...val,
      };
      const res: any =
        isText.value == 'test'
          ? await testScriptManage(val)
          : await createOrEditScriptManage(tempObj);
      createMessage.success(
        unref(isTitle) == 'edit'
          ? '编辑转换脚本成功'
          : unref(isTitle) == 'add'
          ? '新增转换脚本成功'
          : '测试转换脚本成功'
      );
      if (unref(isTitle) == 'add' || unref(isTitle) == 'edit') {
        setTimeout(() => {
          closeModal();
        }, 10);
        emits('success', {
          res,
          text: isText.value,
        });
      } else {
        if (res) {
          converScriptRef.value?.setScriptOutputData(res?.output || res?.error);
        }
      }
    } finally {
      setModalProps({ confirmLoading: false });
    }
  };
  const handleCancel = (flag) => {
    if (flag) {
      closeModal();
    }
    converScriptRef.value?.resetFormData();
  };
</script>
<style lang="less" scoped>
  @import url('./ConverScriptModal.less');
</style>