<template>
  <div>
    <vxe-modal
      v-model="showModal"
      :width="defaultModalSize.width"
      :height="defaultModalSize.height"
      show-zoom
      resize
      transfer
      :fullscreen="$store.getters.device === 'mobile'"
      :z-index="zIndex"
      :footer-hide="true"
      title="预览"
      :padding="false"
    >
      <template>
        <iframe
          style="display: block;width: 100%;height: 100%;border: 0;"
          :src="codeUri"
          frameborder="0"
        />
      </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: ''
    }
  },
  computed: {},
  watch: {
    showModal(newVal) {
      if (!newVal) {
        this.codeUri = ''
      }
    }
  },
  created() {
    this.$bus.$on('online-file', (url) => this.open(url))
  },
  beforeDestroy() {
    this.$bus.$off('online-file')
  },
  methods: {
    open(url) {
      const resolve = this.$router.resolve({
        path: '/preview',
        query: {
          url
        }
      })
      this.codeUri = resolve.href
      this.showModal = true
    }
  }
}
</script>

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