<template>
  <div>
    <BasicModal
      destroyOnClose
      v-bind="$attrs"
      width="60rem"
      @register="register"
      :title="getTitle"
      :minHeight="500"
      @cancel="handleCancel"
      @ok="handleSubmit"
    >
      <ConverScript ref="converScriptRef" />
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import ConverScript from './ConverScript.vue';

  const converScriptRef = ref<InstanceType<typeof ConverScript>>();
  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
  const isUpdate = ref(false);
  const isViewDetail = ref('');
  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ loading: true });
    isUpdate.value = data.isUpdate;
    isViewDetail.value = data.isView;
    converScriptRef.value?.initEditor(data.record?.configuration?.jsScript);
    setModalProps({ loading: false });
    if (!unref(isViewDetail)) {
      const title = !unref(isUpdate) ? '编辑转换脚本' : '新增转换脚本';
      setModalProps({ title, showOkBtn: true, showCancelBtn: true });
      if (!unref(isUpdate)) {
      }
    } else {
      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看转换脚本' });
    }
  });
  const handleSubmit = async () => {
    const val = await converScriptRef.value?.getFormData();
    console.log(val);
  };
  const handleCancel = () => {
    closeModal();
    converScriptRef.value?.resetFormData();
  };
</script>
<style lang="less" scoped>
  @import url('./ConverScriptModal.less');
</style>