<template>
    <div ref="officeViewerRef" v-if="officeDialog" class="officeMain">
        <vue-office-excel
            v-if="xlsxDialog"
            :src="url"
            style="height: 100vh;"
            @rendered="renderedHandler"
            @error="errorHandler"
        />
    </div>
</template>

<script>
    import VueOfficeExcel from '@vue-office/excel'
    import '@vue-office/excel/lib/index.css'

    export default {
        name: "office-viewer",
        components: {
          VueOfficeExcel,
        },
        data(){
            return {
                previewUrl: '/formUploadController/previewFile',
                officeLoading: '',
                xlsxDialog:false,
                url:'',
                fjType:'',
                isEnd:false,
                officeDialog:true,
            }
        },
        watch: {
            isEnd() {
                this.officeDialog = false;
                this.$nextTick(()=>{
                    this.officeDialog = true;
                })
            },
        },
        mounted(){
            this.getOfficeUrl();
        },
        methods: {
            getOfficeUrl(){
                let fjid = this.$route.query.fjid;
                this.fjType = this.$route.query.fjType;
                this.url = window.JAVA_URL + this.previewUrl +`?id=${fjid}`;
                this.officeLoading = this.$loading({
                    lock: true,
                    target:this.$refs.officeViewerRef.$el,
                    text: '正在加载，请稍后....',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                if(this.fjType == 'excel'){
                    this.xlsxDialog = true;
                }

            },
            renderedHandler() {
                // this.$message.success("渲染完成！");
                this.officeLoading && this.officeLoading.close();
                if(this.fjType == 'excel'){
                    this.isEnd = true;
                }
            },
            errorHandler() {
                this.$message.error("渲染失败！");
                this.officeLoading && this.officeLoading.close();
            },
        }
    }
</script>

<style lang="scss">
.officeMain{
  background-color: #808080;
  height: 100%;
  padding: 30px 0;
  //.vue-office-docx,
  .vue-office-excel{
    height: calc(100% - 60px)!important;
  }
  .vue-office-excel{
    width: calc(100% - 60px);
    margin-left: 30px;
  }
  //.docx-wrapper{
  //  padding-top: 0!important;
  //  padding-bottom: 0!important;
  //}
  //.docx{
  //  border-radius: 3px;
  //}
  //.docx:last-child{
  //  margin-bottom: 0!important;
  //}
  .x-spreadsheet{
    padding-top: 5px;
    box-sizing: border-box;
    border-radius: 5px;
  }
}
</style>
