<!-- 文件预览 -->
<template>
  <div style="height: calc(100vh - 100px);position: relative;" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="down"><a :href="url">下载文件</a></div>
    <div class="image" v-if="['jpg','gif','jpeg','png'].indexOf(fileType)>-1&&url">
      <el-image :src="url"> </el-image>
    </div>
    <vue-office-docx v-if="['docx','doc'].indexOf(fileType)>-1&&url" :src="url" style="height: 100%;" @rendered="rendered" @error="fullscreenLoading=false" />
    <vue-office-excel v-else-if="['xlsx','xls'].indexOf(fileType)>-1&&url" :src="url" style="height: 100%;" @rendered="rendered" @error="fullscreenLoading=false" />
    <template v-else-if="['pdf'].indexOf(fileType)>-1&&url">
      <div class="pagination">
        共{{pageCount}}页 &nbsp; &nbsp; 当前第 &nbsp; &nbsp;<el-input-number v-model="currentPage" size="mini" :min="1"></el-input-number>&nbsp; &nbsp;页
      </div>
      <pdf :page="currentPage" :src="url" class="pdf"></pdf>
    </template>
    <div class="txt" v-else-if="['txt'].indexOf(fileType)>-1">
      {{ txtContent }}
    </div>
    <div class="video" v-if="['mp4', 'webm', 'ogg', 'ogv'].indexOf(fileType)>-1&&url">
      <video controls style="width: 100%">
        <source :src="item" type="video/mp4" />
        <source :src="item" type="video/ogg" />
        <source :src="item" type="video/webm" />
        您的浏览器不支持 video 标签。
      </video>
    </div>

  </div>
</template>

<script>
// 引入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'
import pdf from 'vue-pdf'
export default {
  data () {
    return {
      fullscreenLoading: true,
      txtContent: '',
      pageCount: 0, // pdf文件总页数
      currentPage: 1 // pdf文件页码
    };
  },

  components: {
    VueOfficeDocx,
    VueOfficeExcel,
    pdf

  },
  props: ['url'],
  computed: {
    fileType () {
      return this.url.split('.').pop().toLowerCase();
    }
  },

  mounted () {
    if (this.fileType === 'txt') {
      this.getFileFromUrl(this.url, this.url.split('/')[this.url.length - 1]).then((res) => {
        const fileReader = new FileReader();

        fileReader.addEventListener('load', () => {
          const fileContent = fileReader.result;
          // 处理文件内容
          this.txtContent = fileContent
        });

        fileReader.readAsText(res, 'utf-8');
      })
    }
    this.getNumPages(this.url)
  },

  methods: {
    getNumPages (url) {
      var loadingTask = pdf.createLoadingTask(url)
      // var loadingTask = this.pdf.default.createLoadingTask(url)
      loadingTask.promise.then(pdf => {
        this.pageCount = pdf.numPages
        this.fullscreenLoading = false
      }).catch((e) => {
        console.log(e);
        this.fullscreenLoading = false
      })
    },
    changePdfPage (val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
      }
    },

    getFileFromUrl (url, fileName) {
      return new Promise((resolve, reject) => {
        var blob = null;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.overrideMimeType('text/xml;charset=' + 'utf-8')
        // 此处类型依据具体情况设置
        xhr.setRequestHeader('Accept', 'text/plain');
        xhr.responseType = 'blob';
        // 加载时处理
        xhr.onload = () => { // 获取返回结果
          blob = xhr.response;
          // 此处类型依据具体情况设置，同上
          let file = new File([blob], fileName, { type: 'text/plain' });
          // 返回结果
          resolve(file);
          this.fullscreenLoading = false
        };
        xhr.onerror = (e) => {
          this.fullscreenLoading = false
          reject(e)
        };
        // 发送
        xhr.send();
      });
    },
    rendered () {
      this.fullscreenLoading = false
      console.log('渲染完成')
    }
  }
}

</script>
<style scoped>
.txt {
  height: 100%;
  overflow: auto;
  white-space: pre-line;
}

.pagination {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
    top: 50px;
    right: 20px;
  z-index: 10;
}
.down {
  width: 100%;
}
.down a {
    text-decoration: none;
  background-color: #0092ff;
  color: #ffffff;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #0092ff;
  border-color: #0092ff;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 8px 10px;
    font-size: 12px;
  border-radius: 4px;
  z-index: 100;
}
</style>
