<!-- 课件展示 -->
<template>
  <div class="coursewareComponent-addPage">
    <div class="max-img-box" ref="viewBox" v-if="showType">
      <transition name="fade" mode="in-out">
        <vue-office-docx
          v-if="officeType === 'docx'&&!officeNullType"
          :src="lookUrl"
          :class="pdfType == 1?'':'vertical'"
          @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"
          :class="pdfType == 1?'':'vertical'"
          @rendered="renderedHandler"
          @error="errorHandler"/>
        <p v-if="officeNullType" class="office-null-text">加载失败...</p>
        <video-component v-if="officeType === 'video'" :userId="userId" :url="lookUrl" />
        <!--<video v-if="officeType === 'video'" ref="videoPlayer"-->
               <!--class="video-box" :src="lookUrl" autoplay  controls muted></video>-->
        <div  v-if="officeType === 'text'" class="rich-text-box" v-html="lookUrl"></div>
      </transition>
    </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'
  //引入VueOfficePdf组件
  import VueOfficePdf from '@vue-office/pdf'
  import JSZip from 'jszip'
  import videoComponent from "@/views/safetyEducationExaminationNew/components/videoComponent.vue";
  export default {
    name: 'addPage',
    components: {
      VueOfficeDocx,
      VueOfficeExcel,
      VueOfficePdf,
      videoComponent,
    },
    props: {
      coursewareComponentPropsData: {}
    },
    data() {
      return {
        userId:localStorage.getItem('userId'),
        showType:false,
        officeNullType:false,
        //文档类型
        officeType:null,
        //文档名称
        lookName:"",
        //文档地址
        lookUrl:"",
        currentPage: 1,
        totalPages: 1,
        currentScale: 1.0, // 初始缩放比例
        pdfType:1,
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      //初始化
      initialize(name,url,type){
        let self = this;
        this.$set(this,'officeNullType',true);
        this.$set(this,'showType',false);
        this.$nextTick(()=>{
          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,'pdfType',1);
            this.$set(this,'showType',true);
            if(type === 'docx'){
              this._detectDocxOrientation(url);
            }
          }else{
            this.msgError('文件参数异常')
          }
        })
      },
      // 解析 docx XML 自动判断纸张方向，设置 pdfType（1纵向 2横向）
      async _detectDocxOrientation(url) {
        try {
          const res = await fetch(url);
          const buf = await res.arrayBuffer();
          const zip = await JSZip.loadAsync(buf);
          const xmlStr = await zip.file('word/document.xml').async('string');
          const orientMatch = xmlStr.match(/w:pgSz[^/]*?w:orient="([^"]+)"/);
          if (orientMatch) {
            this.$set(this, 'pdfType', orientMatch[1] === 'landscape' ? 2 : 1);
            return;
          }
          // 无 orient 属性时比较 w:w 与 w:h
          const sizeMatch = xmlStr.match(/w:pgSz[^/]*?w:w="(\d+)"[^/]*?w:h="(\d+)"/);
          if (sizeMatch) {
            this.$set(this, 'pdfType', parseInt(sizeMatch[1]) > parseInt(sizeMatch[2]) ? 2 : 1);
          }
        } catch (e) {
          // 解析失败保持默认纵向
        }
      },
      // 1. 暂停播放
      pauseVideo() {
        const player = this.$refs.videoPlayer;
        if (player) {
          player.pause();
        }
      },
      // 2. 继续播放方法（如果已播完则不继续）
      resumeVideo() {
        const player = this.$refs.videoPlayer;
        if (player) {
          // 核心判断：如果视频已经播放结束（ended 为 true），则直接 return，不执行播放
          if (player.ended) {
            console.log('视频已播放完毕，不再继续');
            return;
          }
          player.play();
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .vertical{
    ::v-deep .docx{
      padding:0!important;
    }
  }
  .coursewareComponent-addPage {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .max-img-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      .office-null-text{
        line-height:700px;
        text-align: center;
        color:#dedede;
        font-size:16px;
      }
      .video-box{
        width:1458px;
        height:797px;
      }
      .rich-text-box {
        padding:20px 100px;
        flex:1;
        background-color: #fff;
        line-height: 1.6; /* 基础行高 */
        word-break: break-word; /* 防止长单词或长链接撑破布局 */
      }

      /* 穿透样式，控制富文本内部的标签 */
      .rich-text-box ::v-deep img {
        max-width: 100% !important; /* 防止图片超出容器 */
        height: auto !important;
        display: block;
        margin: 10px auto;
      }

      .rich-text-box ::v-deep table {
        width: 100%;
        border-collapse: collapse;
      }

      .rich-text-box ::v-deep p {
        margin-bottom: 10px;
      }
    }

    //滚动条样式
    .max-img-box::-webkit-scrollbar{
      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }
    .max-img-box::-webkit-scrollbar-thumb{
      border-radius: 5px;
      background: #D3D7D4;
    }
    .max-img-box::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
      border-radius: 0;
      background: #FFFFFF;
    }
    //滚动条样式
    ::v-deep .ofd-footer{
      padding:10px 0;
    }
    ::v-deep .ofd-body::-webkit-scrollbar{
      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }
    ::v-deep .ofd-body::-webkit-scrollbar-thumb{
      border-radius: 5px;
      background: #D3D7D4;
    }
    ::v-deep .ofd-body::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
      border-radius: 0;
      background: #FFFFFF;
    }
  }
</style>
