<template>
  <el-dialog title="文件预览" :visible.sync="filedialogVisible" width="1000px" :before-close="handleClose" :fullscreen='fullscreen' append-to-body>
    <iframe v-if="showFdf" :src="fileUrl" frameborder="0" :class="fullscreen?'ifarmefullscreen':'ifarme'"></iframe>
    <iframe v-else-if="showImg" :src="fileUrl"></iframe>
    <iframe v-else :src="previewUrl + encodeURIComponent(fileUrl)" frameborder="0" :class="fullscreen?'ifarmefullscreen':'ifarme'"></iframe>
  </el-dialog>
</template>

<!-- 
   previewFile ：弹窗是否显示
   fileUrl：文件预览路径
 -->
<script>
// import download from "downloadjs";

export default {
  props: {
    previewFile: {
      type: Boolean,
      default: false
    },
    fileUrl: {
      type: String
    },
    mode: {
      type: [String, Number]
    }
  },
  watch: {
    previewFile(val) {
      this.filedialogVisible = val
      if (this.fileUrl.indexOf('pdf') > -1 || this.mode == 2) {
        this.showFdf = true
      } else {
        this.showFdf = false
      }
    },
    // filedialogVisible(val) {
    //   this.$emit('update:previewFile', val)
    // },
  },
  data() {
    return {
      previewUrl: "http://view.xdocin.com/xdoc?_xdoc=",
      filedialogVisible: false,
      fullscreen: false,
      showFdf: false,
      showImg: false
    }
  },
  methods: {
    handleClose() {
      this.$emit('update')
      this.filedialogVisible = false

    },
    // handleDownload() {
    //   download(this.fileUrl)
    // }
  }

}
</script>

<style lang="scss" scoped>
.filrdialog {
  width: 100%;
  text-align: center;
}
.ifarme {
  width: 950px;
  height: 600px;
}
.ifarmefullscreen {
  width: 95vw;
  height: 82vh;
}
::v-deep .el-dialog__body {
  max-height: 70vh !important;
}
</style>
