<template>
  <div>
    <vxe-modal
      :width="defaultModalSize.width"
      :height="defaultModalSize.height"
      show-zoom
      resize
      transfer
      esc-closable
      :fullscreen="$store.getters.device === 'mobile'"
      :z-index="zIndex"
      v-model="showModal"
      :footer-hide="true"
      title="预览"
      :padding="false"
    >
      <template>
        <iframe
          ref="iframe"
          style="display: block;width: 100%;height: 100%;border: 0;"
          frameborder="0"
        ></iframe>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { PopupManager } from "element-ui/lib/utils/popup";
import {defaultModalSize} from "@/settings";

export default {
  data() {
    return {
      defaultModalSize,
      zIndex: PopupManager.nextZIndex(),
      showModal:false,
      codeUri: "",
    }
  },
  methods: {
    open(url) {
      // this.codeUri = `${window.location.origin}/admin/#/preview?url=${url}`;
      this.showModal = true;
      this.$nextTick(() => {
        this.$refs.iframe.contentWindow.location.replace(`${window.location.origin}/admin/#/preview?url=${url}`)
      })
    }
  },
  computed: {},
  watch: {
    showModal(newVal) {
      if (!newVal) {
        this.codeUri = ''
      } else {
        this.zIndex = PopupManager.nextZIndex()
      }
    }
  },
  created() {
    this.$bus.$on('online-file',(url) => this.open(url))
  },
  beforeDestroy() {
    this.$bus.$off('online-file')
  }
}
</script>

<style scoped lang="scss">
</style>
