<template>
  <div class="XML">
    <h-modal
      :visible="compile"
      @ok="handleOk"
      closable
      @cancel="cancel"
      style="min-width: 886px"
      :title="
        uid.path === '/platform/ImpExp/FileImport/FileImport'
          ? t('ImpExp.common.ImpEditTemplate')
          : t('ImpExp.common.ExpEditTemplate')
      "
      :destroyOnClose="true"
      :maskClosable="false"
    >
      <iframe ref="iframe" :src="src" frameborder="0" id="iframeName"></iframe>
    </h-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from '@crami/locale';
export default defineComponent({
  name: 'XML',
  // 接收父组件传递的数据
  props: ['compile', 'dele', 'fileRule'],
  setup(props, options) {
    // 点击时根据当前路径判断式导入还是导出
    const router = useRouter();
    const uid = router.currentRoute.value;
    let src = `/xmleditor.html${window.location.search}`;
    // 多语言
    const { t } = useI18n();

    const iframe = ref();
    const visible = ref<boolean>(false);

    // 点击确定时关闭弹窗
    const handleOk = () => {
      console.log(encodeURIComponent(iframe.value?.contentWindow?.codeEditor?.getValue()));
      options.emit(
        'textVal',
        encodeURIComponent(iframe.value?.contentWindow?.codeEditor?.getValue()),
      );
      // 使用options.emit将关闭方法传给父组件
      options.emit('closeModel');
    };

    const cancel = () => {
      // 使用options.emit将关闭方法传给父组件
      // console.log(decodeURIComponent(props.fileRule));
      options.emit('textVal', props.fileRule);
      iframe.value?.contentWindow?.codeEditor?.setValue(decodeURIComponent(props.fileRule));
      options.emit('closeModel');
    };
    watch(
      () => props.dele,
      () => {
        if (props.dele == false) {
          // document.removeChild(iframeName);
          iframe.value?.contentWindow?.codeEditor?.setValue('');
        }
      },
      { deep: true },
    );

    return {
      t,
      visible,
      handleOk,
      cancel,
      uid,
      iframe,
      src,
    };
  },
});
</script>

<style lang="less" scoped>
.title_class {
  display: inline-flex;
  width: calc(100% - 100);
}

#iframeName {
  width: 100%;
  height: 450px;
  margin: -24px 0 -28px;
}
</style>
