<!--文件预览-->
<template>
  <div v-loading="loading" element-loading-text="加载中" style="width: 100%; height: 100vh">
    <iframe ref="zsIframe" :src="src" allow="fullscreen" allowtransparency="yes" style="width: 100%; height: calc(100vh - 80px)" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: '',
      fileName: '',
      iframeWin: {},
      loading: false,
      previewBaseUrl: `${process.env.VUE_APP_FILE_PREVIEW_URL}/onlinePreview?url=`
    }
  },
  created() {
    this.fileName = this.$route.params.fileName
  },
  mounted() {
    this.src = this.previewBaseUrl + this.$route.params.fileUrl
    this.iframeWin = this.$refs.zsIframe.contentWindow
    const iframe = this.$refs.zsIframe
    this.loading = true
    const this_ = this
    // 处理兼容行问题 兼容IE
    if (iframe.attachEvent) {
      iframe.attachEvent('onload', function() {
        console.log('iframe已加载完毕')
        this_.loading = false
      })
    } else {
      iframe.onload = function() {
        console.log('iframe已加载完毕')
        this_.loading = false
      }
    }
  }
}
</script>
