<template>
  <el-dialog :visible.sync="dialogVisible" title="文件预览" width="80%" top="5vh" @close="close">
    <div class="wrap">
      <vue-office-docx v-if="fileType == 'word'" :src="fileUrl" @rendered="rendered" @error="error" class="fileStyle" />
      <vue-office-excel v-if="fileType == 'excel'" :src="fileUrl" @rendered="rendered" @error="error" class="fileStyle"
        style="height: 70vh;" />
      <vue-office-pptx v-if="fileType == 'ppt'" :src="fileUrl" @rendered="rendered" @error="error"
        class="fileStyle-ppt" />
      <vue-office-pdf v-if="fileType == 'pdf'" :src="fileUrl" @rendered="rendered" class="fileStyle" />
      <img v-if="fileType == 'image'" :src="fileUrl" class="fileStyle" />
      <video v-if="fileType == 'video'" :src="fileUrl" controls="controls" :autoplay="true" :muted="true"
        class="fileStyle" id="file"></video>
      <audio v-if="fileType == 'audio'" :src="fileUrl" controls="controls" :autoplay="true" :muted="true"
        class="fileStyle" id="file"></audio>
      <div v-if="fileType == 'str'" v-html="fileUrl" class="fileStyle"></div>
    </div>
    <div slot="footer" style="text-align: right;">
      <el-button type="primary" size="small" @click="download(fileUrl, fileName)">下载</el-button>
      <el-button size="small" @click="dialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
/* 
* 文件预览组件（无法预览的会下载，能预览的也提供下载按钮）
* 解决了预览图片打开新页签的问题
  - 使用示例
  <file-preview ref="filePreview"></file-preview> 
  filePreview(file) {
    this.$refs.filePreview.open(file.fileUrl, file.fileName)
  } 
*/

//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

//引入VueOfficePptx组件
import VueOfficePptx from '@vue-office/pptx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'

export default {
  name: 'FilePreview',
  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    VueOfficePptx,
    VueOfficePdf
  },
  data() {
    return {
      dialogVisible: false,
      fileType: '',
      fileUrl: '',
      fileName: '',
    }
  },
  methods: {
    open(fileUrl, fileName) {
      if (!fileUrl) {
        return
      }
      this.fileUrl = fileUrl
      this.fileName = fileName
      this.fileType = this.getFileType(fileUrl)
      if (this.fileType == '' || this.fileType == 'zip') {
        this.download(fileUrl, fileName)
      } else {
        this.dialogVisible = true
      }
    },

    // [zip/rar],[doc,xls,ppt],[tiff,jiff],[avi,flv,3gp]...不支持预览
    // (docx/xlsx/pptx), pdf, (png/jpg/jpej/webp/svg/gif/bmp/ico), (mp4, mov, ogg), (mp3/wav)...支持预览
    // mov————部分浏览器预览缺少解码能力当成音频处理（谷歌可以）, 认为可以预览
    // ogg————会渲染成音频, video可以用来播放audio
    // text需要读取内容str使用v-html渲染

    getFileType(fileUrl) {
      let fileType = ''
      if (fileUrl.indexOf('.docx') > -1) {
        fileType = 'word'
      } else if (fileUrl.indexOf('.xlsx') > -1) {
        fileType = 'excel'
      } else if (fileUrl.indexOf('.pptx') > -1) {
        fileType = 'ppt'
      } else if (fileUrl.indexOf('.pdf') > -1) {
        fileType = 'pdf'
      } else if (fileUrl.indexOf('.mp4') > -1 || fileUrl.indexOf('.mov') > -1 || fileUrl.indexOf('.ogg') > -1) {
        fileType = 'video'
      } else if (fileUrl.indexOf('.mp3') > -1 || fileUrl.indexOf('.wav') > -1) {
        fileType = 'audio'
      } else if (fileUrl.indexOf('.jpg') > -1 || fileUrl.indexOf('.jpeg') > -1 || fileUrl.indexOf('.png') > -1 || fileUrl.indexOf('.gif') > -1 || fileUrl.indexOf('.webp') > -1 || fileUrl.indexOf('.bmp') > -1 || fileUrl.indexOf('.ico') > -1 || fileUrl.indexOf('.svg') > -1) {
        fileType = 'image'
      } else if (fileUrl.indexOf('.zip') > -1 || fileUrl.indexOf('.rar') > -1) {
        fileType = 'zip'
      }
      return fileType
    },
    createAndRemove(url, fileName) {
      // 创建隐藏的可下载链接
      var eleLink = document.createElement('a');
      eleLink.download = fileName;
      eleLink.style.display = 'none';
      // 下载内容转变成blob地址
      eleLink.href = url;
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    },
    download(fileUrl, fileName) {
      const x = new XMLHttpRequest()
      x.open('GET', fileUrl, true)
      x.responseType = 'blob'
      x.onload = () => {
        const url = window.URL.createObjectURL(x.response)
        this.createAndRemove(url, fileName)
      }
      x.send()
    },
    rendered(e) {
      console.log("渲染完成", e)
    },
    error(e) {
      console.log("渲染失败", e)
    },
    close() {
      if (this.fileType == 'video' || this.fileType == 'audio') {
        var myVid = document.getElementById("file");
        myVid.pause()
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.wrap {
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
}

.fileStyle {
  max-width: 100%;
  max-height: 70vh;
  vertical-align: middle;
  overflow-x: hidden;
}

.fileStyle-ppt {
  max-width: 100%;
  max-height: 70vh;
  vertical-align: middle;
  overflow-x: hidden;
}
</style>