<template>
  <div>
    <vxe-modal
      :width="840"
      :height="600"
      show-zoom
      :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";

export default {
  data() {
    return {
      zIndex: PopupManager.nextZIndex(),
      showModal:false,
      codeUri: "",
    }
  },
  methods: {
    open(url) {
      this.codeUri = `${process.env.VUE_APP_PREVIEW}?url=${encodeURIComponent(
        new Buffer(url).toString("base64")
      )}`;
      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>
