<!--通知公告-->
<template>
  <div class="mediaAnnouncementComponent">
    <div class="content-box" id="scrollTextBox" v-if="pageType == 0" v-html="content"></div>
    <vue-office-pdf
      id="scrollPdfBox"
      :options="{width:1190}"
      v-if="pageType == 1"
      :src="lookUrl"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
    <vue-office-docx
      id="scrollDocxBox"
      style="width:1190px;margin:0 auto;"
      v-if="pageType == 2"
      :src="lookUrl"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
    <div class="img-max-big-box" ref="viewBox" v-if="pageType == 3">
      <img :src="lookImg" ref="viewImg"
           v-if="imgShowType"
           :style="'top:'+top+'px;left:'+left+'px;height:'+(height+(heightRatio*ratio))+'px;width:'+(width+(widthRatio*ratio))+'px;'">
    </div>
    <div class="mp4-max-big-box" ref="mp4Box" v-if="pageType == 4">
      <video class="video-player vjs-custom-skin"
             ref="videoBox"
             style="display:block;width:1300px;height:731px;margin:140px auto;"
             autoplay="autoplay"
             @ended="noticeCheck"
             v-if="mp4Url">
        <source :src="mp4Url" type="video/mp4">
      </video>
    </div>
  </div>
</template>
<script>
  //引入VueOfficeDocx组件
  import VueOfficeDocx from '@vue-office/docx'
  import '@vue-office/docx/lib/index.css'
  //引入VueOfficePdf组件
  import VueOfficePdf from '@vue-office/pdf'
  export default {
    name: 'mediaAnnouncementComponent',
    props: {
      mediaAnnouncementComponentData: {}
    },
    components: {
      VueOfficeDocx,
      VueOfficePdf
    },
    data () {
      return {
        pageType:null,
        //文本/文件地址
        content:null,
        //img地址
        lookUrl:null,
        //MP4地址
        mp4Url:null,
        //定时器
        scrollInterval:null,
        scrollIntervalTime:16,
        //图片数据
        //定位
        top: 0,
        left: 0,
        //尺寸
        width: 0,
        height: 0,
        //最大画布尺寸
        maxWidth: 0,
        maxHeight: 0,
        lookImg: '',
        imgShowType: false,
        imgNullType: false,
        ratio: 1,
        widthRatio: null,
        heightRatio: null,
      }
    },
    created(){

    },
    mounted(){
      this.initialize();
    },
    methods:{
      initialize(){
        let self = this;
        if(this.mediaAnnouncementComponentData.type == 0){
          this.$set(this,'pageType',0);
          this.$set(this,'content',this.mediaAnnouncementComponentData.content);
          setTimeout(function() {
            self.startScrolling()
          },500)
        }else{
          if(this.mediaAnnouncementComponentData.content.indexOf('.pdf') != -1){
            this.$set(this,'pageType',1);
            this.$set(this,'lookUrl',this.mediaAnnouncementComponentData.content);
          }else if(this.mediaAnnouncementComponentData.content.indexOf('.docx') != -1){
            this.$set(this,'pageType',2);
            this.$set(this,'lookUrl',this.mediaAnnouncementComponentData.content);
          }else if(this.mediaAnnouncementComponentData.content.indexOf('.png') != -1){
            this.$set(this,'pageType',3);
            this.getImgData(this.mediaAnnouncementComponentData.content);
          }else if(this.mediaAnnouncementComponentData.content.indexOf('.jpg') != -1){
            this.$set(this,'pageType',3);
            this.getImgData(this.mediaAnnouncementComponentData.content);
          }else if(this.mediaAnnouncementComponentData.content.indexOf('.mp4') != -1){
            this.$set(this,'mp4Url',this.mediaAnnouncementComponentData.content);
            this.$set(this,'pageType',4);
            setTimeout(function() {
              self.playVideo();
            },500)
          }
        }
      },
      noticeCheck(){
        this.playVideo();
      },
      //文件滚动
      startScrolling() {
        let scrollBox = null;
        if(this.pageType == 0){
          scrollBox = document.getElementById('scrollTextBox');
        }else if(this.pageType == 1){
          scrollBox = document.getElementById('scrollPdfBox');
        }else if(this.pageType == 2){
          scrollBox = document.getElementById('scrollDocxBox');
        }
        const maxScroll = scrollBox.scrollHeight - scrollBox.clientHeight;
        let currentPos = scrollBox.scrollTop;
        const speed = 1;
        this.scrollInterval = setInterval(() => {
          currentPos += speed;
          scrollBox.scrollTop = currentPos;
          // 到达底部时重置到顶部
          if (currentPos >= maxScroll) {
            currentPos = 0;
            scrollBox.scrollTop = 0;
            // 可选：这里可以重新获取maxScroll，防止内容动态变化
            // maxScroll = scrollBox.scrollHeight - scrollBox.clientHeight;
          }
        }, this.scrollIntervalTime);
      },
      //图片数据
      getImgData(newImg){
        let self = this;
        this.$set(this, 'maxWidth', this.$refs['viewBox'].offsetWidth)
        this.$set(this, 'maxHeight', this.$refs['viewBox'].offsetHeight)
        // 图片地址
        let img = new Image()
        let res = {}
        img.src = newImg
        img.onload = function() {
          res = {
            width: img.width,
            height: img.height
          }
          if (self.maxWidth >= res.width && self.maxHeight >= res.height) {
            let w = self.cal.accSub(self.maxWidth, res.width)
            let h = self.cal.accSub(self.maxHeight, res.height)
            self.$set(self, 'width', res.width)
            self.$set(self, 'height', res.height)
            self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
            self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
            self.$set(self, 'lookImg', newImg)
            self.$set(self, 'imgShowType', true)
            self.initializeRation(res.width, res.height)
          } else if (self.maxWidth >= res.width && self.maxHeight < res.height) {
            let a = self.cal.accDiv(res.width, res.height)
            let b = self.cal.accSub(res.height, (self.maxHeight - 100))
            let c = self.cal.accMul(a, b)
            let width = self.cal.accSub(res.width, c)
            let height = self.cal.accSub(res.height, b)
            let w = self.cal.accSub(self.maxWidth, width)
            let h = self.cal.accSub(self.maxHeight, height)
            self.$set(self, 'width', width)
            self.$set(self, 'height', height)
            self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
            self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
            self.$set(self, 'lookImg', newImg)
            self.$set(self, 'imgShowType', true)
            self.initializeRation(width, height)
          } else if (self.maxWidth < res.width && self.maxHeight >= res.height) {
            let a = self.cal.accDiv(res.height, res.width)
            let b = self.cal.accSub(res.width, (self.maxWidth - 100))
            let c = self.cal.accMul(a, b)
            let width = self.cal.accSub(res.width, b)
            let height = self.cal.accSub(res.height, c)
            let w = self.cal.accSub(self.maxWidth, width)
            let h = self.cal.accSub(self.maxHeight, height)
            self.$set(self, 'width', width)
            self.$set(self, 'height', height)
            self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
            self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
            self.$set(self, 'lookImg', newImg)
            self.$set(self, 'imgShowType', true)
            self.initializeRation(width, height)
          } else {
            let x = self.cal.accSub(res.width, self.maxWidth)
            let y = self.cal.accSub(res.height, self.maxHeight)
            if (x >= y) {
              let a = self.cal.accDiv(res.height, res.width)
              let b = self.cal.accSub(res.width, (self.maxWidth - 100))
              let c = self.cal.accMul(a, b)
              let width = self.cal.accSub(res.width, b)
              let height = self.cal.accSub(res.height, c)
              let w = self.cal.accSub(self.maxWidth, width)
              let h = self.cal.accSub(self.maxHeight, height)
              self.$set(self, 'width', width)
              self.$set(self, 'height', height)
              self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
              self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
              self.$set(self, 'lookImg', newImg)
              self.$set(self, 'imgShowType', true)
              self.initializeRation(width, height)
            } else {
              let a = self.cal.accDiv(res.width, res.height)
              let b = self.cal.accSub(res.height, (self.maxHeight - 100))
              let c = self.cal.accMul(a, b)
              let width = self.cal.accSub(res.width, c)
              let height = self.cal.accSub(res.height, b)
              let w = self.cal.accSub(self.maxWidth, width)
              let h = self.cal.accSub(self.maxHeight, height)
              self.$set(self, 'width', width)
              self.$set(self, 'height', height)
              self.$set(self, 'left', w > 2 ? self.cal.accDiv(w, 2) : 0)
              self.$set(self, 'top', h > 2 ? self.cal.accDiv(h, 2) : 0)
              self.$set(self, 'lookImg', newImg)
              self.$set(self, 'imgShowType', true)
              self.initializeRation(width, height)
            }
          }
        }
        img.onerror = function() {
          self.$set(self, 'imgNullType', true)
        }
      },
      //播放视频
      playVideo(){
        var video = this.$refs.videoBox;
        video.autoplay = true;
        video.play()
      },
      //初始化缩放倍率
      initializeRation(w, h) {
        this.$set(this, 'ratio', 0)
        this.$set(this, 'widthRatio', this.cal.accDiv(w, 10))
        this.$set(this, 'heightRatio', this.cal.accDiv(h, 10))
      },
      //文件加载成功
      renderedHandler() {
        console.log("渲染完成")
        this.startScrolling()
      },
      //文件加载失败
      errorHandler() {
        console.log("渲染失败")
      },
    },
    beforeDestroy() {
      clearInterval(this.scrollInterval);
    },
    destroyed() {
      clearInterval(this.scrollInterval);
    }
  }
</script>
<style scoped lang="scss">
  .mediaAnnouncementComponent{
    height:1020px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    //富文本
    .content-box{
      flex:1;
      width:1300px;
      margin:20px auto;
      overflow-y: scroll;
    }
    .content-box::-webkit-scrollbar{
      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }
    .content-box::-webkit-scrollbar-thumb{
      border-radius: 5px;
      background: #003988;
    }
    .content-box::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
      border-radius: 0;
      background: #FFFFFF;
      display: none;
    }
    //PDF
    ::v-deep .vue-office-pdf{
      margin:20px auto!important;
      width:1190px!important;
    }
    ::v-deep .vue-office-pdf-wrapper{
      background-color: rgba(0,0,0,0)!important;
    }
    ::v-deep .vue-office-pdf::-webkit-scrollbar{
      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }
    ::v-deep .vue-office-pdf::-webkit-scrollbar-thumb{
      border-radius: 5px;
      background: #003988;
    }
    ::v-deep .vue-office-pdf::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
      border-radius: 0;
      background: #FFFFFF;
      display: none;
    }
    //docx
    ::v-deep .vue-office-docx{
      margin:20px auto!important;
      width:1190px!important;
    }
    ::v-deep .docx-wrapper{
      background-color: rgba(0,0,0,0)!important;
    }
    ::v-deep .vue-office-docx::-webkit-scrollbar{
      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }
    ::v-deep .vue-office-docx::-webkit-scrollbar-thumb{
      border-radius: 5px;
      background: #003988;
    }
    ::v-deep .vue-office-docx::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 5px #FFFFFF;
      border-radius: 0;
      background: #FFFFFF;
      display: none;
    }
    .img-max-big-box{
      flex: 1;
      overflow: hidden;
      position: relative;
      img {
        position: absolute;
        -webkit-user-drag: none;
      }
    }
  }
</style>
