<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="预览"
    >
      <template>
        <iframe
          style="width: 100%; height: 100%;"
          :src="codeUri"
          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;
    }
  },
  computed: {},
  created() {
    this.$bus.$on('online-file',(url) => this.open(url))
  },
  beforeDestroy() {
    this.$bus.$off('online-file')
  }
}
</script>

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