<!--
@name: fullScreenFileLook
@description: 全屏文件预览组件
@author: zc
@time: 2024/4/16
@描述: 支持docx/excel/pdf文件预览
@引入:

    <fullScreenFileLook ref="fullScreenFileLook"></fullScreenFileLook>

    import fullScreenFileLook from "@/components/fullScreenFileLook/fullScreenFileLook.vue";

    components: {
      fullScreenFileLook,
    },
    //name:名称 url:地址  type:类型标记/docx/excel/pdf
    fullScreenFileLookClick(item){
      this.$refs['fullScreenFileLook'].initialize(item.name,item.url,item.type);
    },

-->
<template>
  <transition name="fade" mode="in-out">
    <div class="fullScreenFileLook" v-if="showType">
      <div class="fullScreenFileLook-top-button-box">
        <!--下载按钮-->
        <p class="position-download-p el-icon-download" @click="downloadOffice" v-if="!officeNullType"></p>
        <p class="title-p">{{lookName}}</p>
        <!--关闭按钮-->
        <p class="position-off-p el-icon-circle-close" @click="outButton"></p>
      </div>
      <div class="max-img-box" ref="viewBox">
        <transition name="fade" mode="in-out">
          <vue-office-docx
            v-if="officeType === 'docx'&&!officeNullType"
            :src="lookUrl"
            @rendered="renderedHandler"
            @error="errorHandler"
          />
          <vue-office-excel
            v-if="officeType === 'excel'&&!officeNullType"
            :src="lookUrl"
            @rendered="renderedHandler"
            @error="errorHandler"
          />
          <vue-office-pdf
            v-if="officeType === 'pdf'&&!officeNullType"
            :src="lookUrl"
            @rendered="renderedHandler"
            @error="errorHandler"
          />
          <p v-if="officeNullType" class="office-null-text">加载失败...</p>
        </transition>
      </div>
    </div>
  </transition>
</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'
  //引入VueOfficePdf组件
  import VueOfficePdf from '@vue-office/pdf'
  export default {
    name: 'fullScreenFileLook',
    components: {
      VueOfficeDocx,
      VueOfficeExcel,
      VueOfficePdf
    },
    data () {
      return {
        showType:false,
        officeNullType:false,
        //文档类型
        officeType:null,
        //文档名称
        lookName:"",
        //文档地址
        lookUrl:"",
      }
    },
    created () {

    },
    mounted () {

    },
    methods: {
      //初始化
      initialize(name,url,type){
        if(name&&url&&type){
          this.$set(this,'officeType',type);
          this.$set(this,'lookName',name);
          this.$set(this,'lookUrl',url);
          this.$set(this,'officeNullType',false);
          this.$set(this,'showType',true);
        }else{
          this.msgError('文件参数异常')
        }
      },
      //文件加载成功
      renderedHandler() {
        console.log("渲染完成")
        this.$set(this,'officeNullType',false);
      },
      //文件加载失败
      errorHandler() {
        console.log("渲染失败")
        this.$set(this,'officeNullType',true);
      },
      //退出按钮
      outButton(){
        this.$set(this,'showType',false);
        this.$set(this,'officeNullType',true);
        this.$set(this,'officeType',null);
        this.$set(this,'lookName','');
        this.$set(this,'lookUrl','');
      },
      //下载
      async downloadOffice() {
        // let currentDate = this.getCurrentTime()
        // 获取图片对象和画布对象
        const imgUrl = this.lookUrl
        const response = await fetch(imgUrl)
        const blob = await response.blob()
        // 创建下载链接
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = this.lookName
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        // 释放 Blob URL
        window.URL.revokeObjectURL(url)
      },
    },
  }
</script>
<style scoped lang="scss">
  .fade-enter-active, .fade-leave-active {
    transition: opacity .3s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .fullScreenFileLook{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.9);
    display: flex;
    flex-direction: column;
    .fullScreenFileLook-top-button-box{
      display: flex;
      height:50px;
      .title-p{
        flex:1;
        color:#fff;
        font-size:20px;
        text-align: center;
        line-height:50px;
      }
      .position-off-p{
        color:#fff;
        width:30px;
        height:30px;
        line-height:30px;
        text-align: center;
        font-size:30px;
        cursor: pointer;
        z-index: 999;
        margin:10px 40px 0 0;
      }
      .position-off-p:hover{
        color:#0183FA;
      }
      .position-download-p{
        color:#fff;
        width:30px;
        height:30px;
        line-height:30px;
        text-align: center;
        font-size:30px;
        cursor: pointer;
        z-index: 999;
        margin:10px 0 0 40px;
      }
      .position-download-p:hover{
        color:#0183FA;
      }
    }
    .max-img-box{
      flex:1;
      overflow: scroll;
      position: relative;
      .office-null-text{
        line-height:700px;
        text-align: center;
        color:#dedede;
        font-size:16px;
      }
    }
  }
</style>
