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

  const converScriptRef = ref<InstanceType<typeof ConverScript>>();
  const getTitle = computed(() => (isUpdate.value ? '测试脚本' : '新建脚本'));
  const isUpdate = ref(false);
  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ loading: true });
    handleCancel(false);
    isUpdate.value = data.isUpdate;
    converScriptRef.value?.initEditor(data.record?.configuration?.jsScript);
    setModalProps({ loading: false });
    const title = !unref(isUpdate) ? '测试脚本' : '新建脚本';
    const okText = !unref(isUpdate) ? '测试' : '确定';
    setModalProps({ title, showOkBtn: true, showCancelBtn: true, okText });
    // converScriptRef.value?.setFormData();
  });
  const handleSubmit = async () => {
    const val = await converScriptRef.value?.getFormData();
    console.log(val);
    handleCancel(true);
  };
  const handleCancel = (flag) => {
    if (flag) {
      closeModal();
    }
    converScriptRef.value?.resetFormData();
  };
</script>
<style lang="less" scoped>
  @import url('/@/views/scriptmanage/converscript/ConverScriptModal.less');
</style>