diagnosis.admin/src/components/AIModal.vue

<script>
export default {
  name: 'AIModal',
  props: {
    url: {
      type: String,
      default: '',
    },
    immediate: {
      type: Boolean,
      default: false,
    },
    id: String,
    title: String,
  },
  computed: {
    realUrl() {
      if (this.url.startsWith(`http`)) return this.url;
      const url = this.url.startsWith('/') ? this.url.slice(1) : this.url;
      return location.href.includes(`index.html`)
          ? location.href.replace(location.search, '').replace(location.hash, '').split('index.html')[0] + url
          : location.origin + '/' + url;
    },
    realSrc() {
      if (!this.sessionId) this.sessionId = Date.now() + Array.from({length: 16}, () => Math.floor(Math.random() * 16).toString(16)).join('');
      const [url, search] = this.realUrl.split('?');
      const params = new URLSearchParams(search);
      if (!params.has('session_id')) params.append('session_id', this.sessionId);
      if (!this.hideTitle) params.delete('hide_title');
      else if (!params.has('hide_title')) params.append('hide_title', true);
      return `${url}?${params.toString()}`;
    },
  },
  data() {
    return {
      modalLoaded: false,
      modalProps: {
        show: false,
        type: 'modal',
        remember: true,
        position: {
          top: 0,
          left: 0,
        },
        padding: false,
        showMinimize: true,
        resize: true,
        mask: false, lockView: false, lockScroll: false,
        showClose: true, escClosable: true,

        loading: true,
        title: ' ',
        width: Math.min(430, window.innerWidth * 0.6),
        height: Math.min(932, window.innerHeight * 0.8),
      },

      sessionId: '',
      hideTitle: true,
    };
  },
  methods: {
    handle() {
      if (this.modalProps.show && this.$refs.modal.isMinimized) this.$refs.modal.revert();
      else {
        if (!this.sessionId) this.modalProps.loading = true;
        this.modalProps.show = true;
        setTimeout(() => { try { this.$refs.kiosk.contentDocument.querySelector('#message-input').focus(); } catch (e) {} }, 1000);
      }
    },
    load() {
      const iframe = this.$refs.kiosk;
      this.modalProps.loading = false;
      this.modalProps.title = iframe.contentDocument.title;
      try { this.$refs.kiosk.contentDocument.querySelector('#message-input').focus(); } catch (e) {}
    },
    onClose({type, $event}) {
      if (!$event) $event = {};
      if (type === 'close' && !$event.shiftKey) this.sessionId = '';
    },
  },
  mounted() {
    this.modalProps.showClose = !this.immediate;
    if (this.immediate) {
      this.handle();
      setTimeout(() => {
        this.$refs.modal.minimize();
        this.modalLoaded = true;
      }, 2000);
    } else this.modalLoaded = true;
  },
};
</script>

<template>
  <div>
    <slot :handle="handle" :title="modalProps.title" :open="modalProps.show">
      <div v-if="!modalProps.show" @click="handle()">{{ title || modalProps.title }}</div>
    </slot>
    <vxe-modal :class="{initialize: immediate && !modalLoaded}" ref="modal" v-bind="modalProps"
               v-model="modalProps.show" :id="id" :esc-closable="modalProps.escClosable" @close="onClose">
      <iframe ref="kiosk" :src="realSrc" style="display: block;width: 100%;height: 100%;border: 0;"
              @load="load"></iframe>
    </vxe-modal>
  </div>
</template>

<style scoped lang="scss">
.vxe-modal--wrapper.initialize {
  display: none;
}
</style>