<!--监控模块-->
<template>
  <div class="newVideoComponent">
    <div class="button-box">
      <p class="left-button-p el-icon-arrow-left" v-if="dataList[2]" @click="leftButton()"></p>
    </div>
    <div class="video-max-big-box">
      <H5PlayerVideo class="sub-video-box" :videoProps="item"
       v-for="(item,index) in videoList" :key="index"></H5PlayerVideo>
      <p class="null-text-p" v-if="!videoList[0]">该实验室未配置监控设备</p>
    </div>
    <div class="button-box">
      <p class="right-button-p el-icon-arrow-right" v-if="dataList[2]" @click="rightButton()"></p>
    </div>
    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
  </div>
</template>
<script>
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
  import {
    iotCameraFindByCondition
  } from '@/api/index'
  export default {
    name: 'newVideoComponent',
    components: {
      H5PlayerVideo,
      fullH5PlayerVideo
    },
    data () {
      return {
        videoList:[],
        //全屏视频参数
        fullVideoProps:{},
        fullVideoType:false,
        showIndex:0,
        dataList:[],
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //初始化 查询实验室摄像头
      initialize(data){
        let self = this;
        this.$set(this,'dataList',[])
        this.$set(this, 'videoList', [])
        // type 1.楼栋 2.楼层 3.楼道 4.实验室
        let obj = {
          page:1,
          pageSize:10,
          passageway:'',
          subIds:[data.subId],
          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
          streamType:1,
          source:0,
        };
        iotCameraFindByCondition(obj).then(response => {
          let list = [];
          for(let i=0;i<response.data.records.length;i++){
            list.push(
              {
                width: 300, //(宽度:非必传-默认600)
                height: 200, //(高度:非必传-默认338)
                url: response.data.records[i].streamUrl,
                cameraIndexCode: response.data.records[i].deviceNo,
              }
            )
          }
          this.$set(this,'dataList',list)
          let videoList = []
          if(list[0]){
            videoList.push(list[0])
          }
          if(list[1]){
            videoList.push(list[1])
          }
          this.$set(this, 'videoList', videoList);
        });
      },
      leftButton(){
        let self = this;
        if(this.showIndex>1){
          let videoList = [];
          if(self.dataList[self.showIndex-2]){
            videoList.push(self.dataList[self.showIndex-2])
          }
          if(self.dataList[self.showIndex-1]){
            self.$set(self,'videoList',[]);
            videoList.push(self.dataList[self.showIndex-1])
          }
          setTimeout(function(){
            if(videoList[0]){
              self.$set(self,'showIndex',self.showIndex-2);
              self.$set(self,'videoList',videoList);
            }
          },200);
        }
      },
      rightButton(){
        let self = this;
        let videoList = [];
        if(self.dataList[self.showIndex+2]){
          self.$set(self,'videoList',[]);
          videoList.push(self.dataList[self.showIndex+2])
        }
        if(self.dataList[self.showIndex+3]){
          videoList.push(self.dataList[self.showIndex+3])
        }
        setTimeout(function(){
          if(videoList[0]){
            self.$set(self,'showIndex',self.showIndex+2);
            self.$set(self,'videoList',videoList);
          }
        },200);
      },
      //全屏开启-关闭轮播
      stopTime(cameraIndexCode){
        this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
        this.$set(this,'fullVideoType',true);
      },
      //全屏关闭-开启轮播
      outFullScreen(){
        this.$set(this,'fullVideoType',false);
        this.$set(this,'fullVideoProps',{});
      },
    },
  }
</script>
<style scoped lang="scss">
  .newVideoComponent{
    width:800px;
    height:290px;
    background-color: #052F48;
    display: flex;
    .video-max-big-box{
      flex:1;
      padding-left:12px;
      padding-top:45px;
      .sub-video-box:nth-child(1){
        margin-right:20px;
      }
      .sub-video-box{
        display: inline-block;
        width:300px;
        height:200px;
      }
      .null-text-p{
        text-align: center;
        color: #dedede;
        font-size: 14px;
        line-height: 200px;
      }
    }
    .button-box{
      width:78px;
      overflow: hidden;
      .left-button-p{
        cursor: pointer;
        color:#24D1F9;
        border-radius:50%;
        border:1px solid #24D1F9;
        text-align: center;
        width:30px;
        height:30px;
        line-height:30px;
        margin:126px 20px 0 30px;
      }
      .right-button-p{
        cursor: pointer;
        color:#24D1F9;
        border-radius:50%;
        border:1px solid #24D1F9;
        text-align: center;
        width:30px;
        height:30px;
        line-height:30px;
        margin:126px 30px 0 20px;
      }
    }
  }
</style>
