<!-- 小程序视频回放 -->
<template>
  <div class="miniProgramPlayback">
    <p class="null-text" v-if="nullType">{{nullType}}</p>
    <div class="video-max-box" v-if="buttonType">
      <H5PlayerVideoTime :videoProps="videoProps"></H5PlayerVideoTime>
    </div>
    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
  </div>
</template>
<script>
  import H5PlayerVideoTime from '@/components/H5PlayerVideoTime/H5PlayerVideoTime.vue';
  import fullH5PlayerVideo from '@/components/H5PlayerVideoTime/fullH5PlayerVideo.vue';
  import { iotCameraFindByCondition,iotCameraGetPlaybackURLs } from "@/api/index";
  export default {
    name: 'index',
    components: {
      H5PlayerVideoTime,
      fullH5PlayerVideo,
    },
    data () {
      return {
        buttonType: false,
        width: null,
        height: null,
        videoList: [],
        nullType:false,
        //报警视频数据
        videoProps:null,
        //全屏视频参数
        fullVideoProps:{},
        fullVideoType:false,
      }
    },
    created () {
      const ratio = 0.5625;
      const winWidth = window.innerWidth;
      let width = parseInt(winWidth - 20);
      let height = parseInt(this.accMul(width, ratio));
      this.$set(this, 'width', width);
      this.$set(this, 'height', height)
    },
    mounted () {
      this.getUrl();
    },
    methods: {
      //全屏开启-关闭轮播
      stopTime(videoProps){
        this.$set(this,'fullVideoProps',videoProps);
        this.$set(this,'fullVideoType',true);
        this.$set(this,'videoType',0);
      },
      //全屏关闭-开启轮播
      outFullScreen(){
        this.$set(this,'fullVideoType',false);
        this.$set(this,'fullVideoProps',{});
        this.$set(this,'videoType',1);
      },
      getUrl() {
        let text = decodeURIComponent(window.location.href);
        if(text.indexOf('cameraIndexCode') != -1){
          this.warningVideo(text);
        }else{
          this.$set(this,'nullType','参数异常,请联系管理员');
        }
      },
      warningVideo(text){
        let self = this;
        if(text.indexOf('cameraIndexCode') == -1){
          this.$set(this,'nullType','cameraIndexCode参数异常,请联系管理员');
          return
        }
        if(text.indexOf('startTime') == -1){
          this.$set(this,'nullType','startTime参数异常,请联系管理员');
          return
        }
        if(text.indexOf('endTime') == -1){
          this.$set(this,'nullType','endTime参数异常,请联系管理员');
          return
        }
        let urlList = text.split("?")[1].split("&");
        let urlData = {};
        urlList.forEach((item) => {
          urlData[item.split("=")[0]] = item.split("=")[1];
        });
        //视频回放流地址
        let obj = {
          cameraIndexCode :urlData.cameraIndexCode, //摄像头编号
          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
          startTime:urlData.startTime,    //开始时间 2025-03-07 09:29:00
          endTime :urlData.endTime,    //结束时间
          streamType:0,
        }
        iotCameraGetPlaybackURLs(obj).then(response => {
          let newObj = {
            width: this.width, //(宽度:非必传-默认600)
            height: this.height, //(高度:非必传-默认338)
            url: response.data,
            cameraIndexCode: obj.cameraIndexCode,
          }
          this.$set(this,'videoProps',newObj);
          this.$nextTick(()=>{
            setTimeout(function(){
              self.$set(self, 'buttonType', true);
            },1000);
          })
        })
      },
      //乘法
      accMul(arg1, arg2) {
        var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
        try {
          m += s1.split(".")[1].length
        } catch (e) {
        }
        try {
          m += s2.split(".")[1].length
        } catch (e) {
        }
        return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
      },
    },
  }
</script>
<style scoped lang="scss">
  .miniProgramPlayback{
    flex:1;
    .null-text{
      text-align: center;
      font-size:16px;
      line-height:80px;
    }
    .video-max-box {
      overflow: hidden;
      padding-top:10px;
    }

    .video-box {
      margin: 0 auto 10px;
    }
  }
</style>
