<template>
  <div class="mpegtsHorn">
    <div class="top-button-box">
      <p :class="checkType == 1?'checkP':''" @click="checkButton(1)">实验室监控</p>
      <p :class="checkType == 2?'checkP':''" @click="checkButton(2)" v-if="toButtonType == 5">楼道监控</p>
    </div>
    <div class="top-video-box">
      <p class="null-text" v-if="nullType">{{nullType}}</p>
      <div class="video-max-box" v-if="buttonType&&!fullVideoType">
        <mpegts-video class="video-box" :videoProps="item" ref="mpegtsRef" v-for="(item,index) in videoList" :key="index"></mpegts-video>
      </div>
    </div>
    <div class="bottom-broadcast-box">
      <voiceBroadcast :trumpetList="trumpetList" v-show="voiceType"></voiceBroadcast>
      <p class="right-button-p" @click="voiceButton()">语音广播</p>
    </div>
  </div>
</template>
<script>
  import { iotCameraFindByCondition,iotAppSpeakerFindHorn } from "@/api/index";
  import voiceBroadcast from '@/components/voiceBroadcast/voiceBroadcast.vue';
  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
  export default {
    name: 'mpegtsHorn',
    components: {
      mpegtsVideo,
      voiceBroadcast
    },
    data () {
      return {
        checkType:1,
        buttonType: false,
        width: null,
        height: null,
        videoList: [],
        nullType:false,
        //报警视频数据
        videoProps:null,
        //全屏视频参数
        fullVideoProps:{},
        fullVideoType:false,
        //喇叭数据
        trumpetList:[],
        voiceType:false,
        //顶部按钮状态
        toButtonType:0,
      }
    },
    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:{
      voiceButton(){
        this.$set(this,'voiceType',!this.voiceType);
      },
      checkButton(type){
        if(this.checkType != type){
          // 切换类型前先清理之前的HLS流
          this.$set(this,'checkType',type);
          this.$set(this, 'nullType', false);
          this.$set(this,'videoList',[]);
          this.$set(this, 'buttonType', false);
          this.getUrl();
        }
      },
      fullScreenWindowSwitch(data){
        let self = this;
        for(let i=0;i<self.$refs.mpegtsRef.length;i++){
          if(data.cameraIndexCode != self.$refs.mpegtsRef[i].videoData.cameraIndexCode){
            if(data.type){
              self.$refs.mpegtsRef[i].stopVideo();
            }else{
              self.$refs.mpegtsRef[i].playVideo();
            }
          }
        }
      },
      getUrl() {
        let text = decodeURIComponent(window.location.href);
        if(text.indexOf('touken') != -1){
          this.subVideo(text);
        }else{
          this.$set(this,'nullType','参数异常,请联系管理员');
        }
      },
      subVideo(text){
        let self = this;
        if(text.indexOf('touken') == -1){
          this.$set(this,'nullType','touken参数异常,请联系管理员');
          return
        }
        if(text.indexOf('source') == -1){
          this.$set(this,'nullType','source参数异常,请联系管理员');
          return
        }
        if(text.indexOf('type') == -1){
          this.$set(this,'nullType','type参数异常,请联系管理员');
          return
        }
        let urlList = text.split("?")[1].split("&");
        let urlData = {};
        urlList.forEach((item) => {
          urlData[item.split("=")[0]] = item.split("=")[1];
        });
        localStorage.setItem('touken',urlData.touken)
        // type 1.楼栋 2.楼层 3.楼道 4.实验室 5.楼道+实验室
        let obj = {
          page:'1',
          pageSize:'10',
          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
          streamType:1,
          videoStreamType:'flv',
        };
        if(urlData.type == 1){
          obj.buildId = urlData.buildId;
        }else  if(urlData.type == 2){
          obj.floorId = urlData.floorId;
        }else  if(urlData.type == 3){
          obj.passageway = urlData.floorId;
        }else  if(urlData.type == 4 || urlData.type == 5){
          if(urlData.type == 4){
            this.$set(this,'toButtonType','4');
          }else if(urlData.type == 5){
            this.$set(this,'toButtonType','5');
          }
          if(this.checkType == 1){
            obj.subIds = [urlData.subId];
          }else if(this.checkType == 2){
            obj.passageway = urlData.floorId;
          }
        }
        if(urlData.source == '2'){
          obj.source = 2;
        }else if (urlData.source == '5'){
          obj.source = 5;
        }
        if(urlData.type){
          iotAppSpeakerFindHorn({subId:urlData.subId,floorId:urlData.floorId}).then(response => {
            for (let i = 0; i < response.data.length; i++) {
              response.data[i].type = false;
            }
            this.$set(this, 'trumpetList', response.data)
          })
          iotCameraFindByCondition(obj).then(response => {
            if (!response.data.records[0]){
              this.$set(this,'nullType','视频异常,请联系管理员');
            }else{
              let list = [];
              for(let i=0;i<response.data.records.length;i++){
                list.push(
                  {
                    width: this.width, //(宽度:非必传-默认600)
                    height: this.height, //(高度:非必传-默认338)
                    url: response.data.records[i].streamUrl,
                    cameraIndexCode: response.data.records[i].deviceNo,
                  }
                )
              }
              this.$set(this,'videoList',list)
              this.$nextTick(()=>{
                setTimeout(function(){
                  self.$set(self, 'buttonType', true);
                },1000);
              })
            }
          });
        }else{
          this.$set(this,'nullType','参数异常,请联系管理员');
        }
      },
      //乘法
      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">
  .mpegtsHorn{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .top-button-box{
      display: flex;
      border-bottom:1px solid #999;
      height:80px;
      p{
        flex:1;
        text-align: center;
        font-size:36px;
        line-height:80px;
        height:80px;
        color:#999;
      }
      .checkP{
        background-color: #0183FA;
        color:#fff;
      }
    }
    .top-video-box{
      flex:1;
      overflow-y: scroll;
      overflow-x: hidden;
      .null-text{
        text-align: center;
        font-size:16px;
        line-height:80px;
      }
      .video-max-box {
        padding-top:10px;
        overflow: hidden;
      }
      .video-box {
        margin: 0 auto 10px;
        display: inline-block
      }
    }
    .bottom-broadcast-box{
      height:100px;
      .right-button-p{
        color:#fff;
        background-color: #0183fa;
        flex:1;
        height:80px;
        line-height:82px;
        border-radius:6px;
        font-size:30px;
        margin:10px 10px 10px 10px;
      }
    }
  }
</style>
