<template>
  <div class="androidFilePreview">
    <div class="office-box" v-if="!errorType">
      <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"
      />
    </div>
    <p class="error-text-p" v-if="errorType">出错啦.请联系管理员</p>
    <p v-if="officeNullType" class="error-text-p">加载失败...</p>
  </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'
  //引入VueOfficePdf组件
  import VueOfficePdf from '@vue-office/pdf'
  export default {
    name: 'androidFilePreview',
    components: {
      VueOfficeDocx,
      VueOfficeExcel,
      VueOfficePdf
    },
    data () {
      return {
        errorType:false,
        //文档类型
        officeType:null,
        //开关
        officeNullType:true,
        //文档地址
        lookUrl:"",
      }
    },
    created(){
      let text = this.$route.query
      if(text.url){
        let type = '';
        if (text.url.indexOf('docx') != -1) {
          type = 'docx'
        }else if (text.url.indexOf('xlsx') != -1) {
          type = 'xlsx'
        }else if (text.url.indexOf('pdf') != -1) {
          type = 'pdf'
        }
        let url = text.url;
        this.$set(this,'lookUrl',url);
        this.$set(this,'officeType',type);
        this.$set(this,'officeNullType',false);
      }else{
        this.$set(this,'officeNullType',true);
      }
    },
    mounted(){

    },
    methods:{
      //文件加载成功
      renderedHandler() {
        this.$set(this,'officeNullType',false);
      },
      //文件加载失败
      errorHandler() {
        this.$set(this,'officeNullType',true);
      },
    },
  }
</script>
<style scoped lang="scss">
  .androidFilePreview{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .office-box{
      flex:1;
      overflow: hidden;
    }
    .error-text-p{
      text-align: center;
      font-size:18px;
      color:#999;
      line-height:400px;

    }
  }
</style>
