<!-- 实验室实时监控视频 -->
<template>
  <div class="monitoringComponents">
    <p class="monitoring-title-p">重点实验室实时监控</p>
    <div class="monitoring-for-max-big-box">
      <H5PlayerVideo style="margin:10px 0 0 12px;"
                     v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
      <img v-if="!videoList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">
    </div>
    <div class="monitoring-bottom-button-box">
      <img class="left-button-img" @click="leftButton" src="@/assets/ZDimages/left_button.png">
      <div class="center-button-box">
      </div>
      <img class="right-button-img" @click="rightButton" src="@/assets/ZDimages/right_button.png">
    </div>
    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
  </div>
</template>
<script>
  import { laboratorySubRelInfoKeySubList, iotCameraFindByCondition } from '@/api/index'
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'

  export default {
    name: 'monitoringComponents',
    components: {
      H5PlayerVideo,
      fullH5PlayerVideo
    },
    data() {
      return {
        width: 450,
        height: 200,
        videoType: false,
        videoList: [],
        videoTotal: 0,
        videoQueryParams: {
          page: 1,
          pageSize: 4
        },
        //eCharts定时器
        eChartsTimer: null,
        subList: [],
        //全屏视频参数
        fullVideoProps:{},
        fullVideoType:false,
      }
    },
    created() {
      this.timedRefresh();
    },
    mounted() {

    },
    methods: {
      leftButton() {
        if (this.videoQueryParams.page > 1) {
          this.videoQueryParams.page--
          this.videoInitialize()
        }
      },
      rightButton() {
        this.videoQueryParams.page++
        this.videoInitialize()
      },
      timedRefresh() {
        let self = this
        self.getData()
        //定时动画
        window.clearInterval(self.eChartsTimer)
        self.eChartsTimer = setInterval(function() {
          self.videoQueryParams.page++
          self.videoInitialize('auto')
        }, 1000 * 180)
      },
      getData() {
        laboratorySubRelInfoKeySubList({
          page: this.videoQueryParams.page,
          pageSize: this.videoQueryParams.pageSize
        }).then(response => {
          let subList = []
          for (let i = 0; i < response.data.records.length; i++) {
            subList.push(response.data.records[i].subId)
          }
          this.$set(this, 'subList', subList)
          this.$nextTick(() => {
            this.videoInitialize()
          })
        })
      },
      videoInitialize(type) {
        let self = this
        // type 1.楼栋 2.楼层 3.楼道 4.实验室
        let obj = {
          page: this.videoQueryParams.page,
          pageSize: this.videoQueryParams.pageSize,
          buildId: '',
          floorId: '',
          passageway: '',
          subIds: this.subList,
          protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
          streamType:1,
          source:0,
        }
        iotCameraFindByCondition(obj).then(response => {
          if (response.data.records[0]) {
            self.$set(self, 'videoType', false)
            self.$set(self, 'videoList', [])
            setTimeout(function() {
              let list = []
              for (let i = 0; i < response.data.records.length; i++) {
                list.push(
                  {
                    width: self.width, //(宽度:非必传-默认600)
                    height: self.height, //(高度:非必传-默认338)
                    url: response.data.records[i].streamUrl,
                    cameraIndexCode: response.data.records[i].deviceNo,
                  }
                )
              }
              self.$set(self, 'videoList', list)
              self.$set(self, 'videoTotal', response.data.total)
              self.$nextTick(() => {
                setTimeout(function() {
                  self.$set(self, 'videoType', true)
                }, 50)
              })
            }, 50)
          } else {
            if(type == 'auto'){
              self.videoQueryParams.page = 1;
              self.$set(self, 'videoType', true)
              self.videoInitialize();
            }else{
              self.videoQueryParams.page--
              self.$set(self, 'videoType', true)
            }
          }
        })
      },
      //全屏开启-关闭轮播
      stopTime(cameraIndexCode){
        this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
        this.$set(this,'fullVideoType',true);
        window.clearInterval(this.eChartsTimer)
      },
      //全屏关闭-开启轮播
      outFullScreen(){
        let self = this;
        this.$set(this,'fullVideoType',false);
        this.$set(this,'fullVideoProps',{});
        window.clearInterval(self.eChartsTimer)
        this.eChartsTimer = setInterval(function() {
          self.videoQueryParams.page++
          self.videoInitialize('auto')
        }, 1000 * 180)
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer)
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer)
    }
  }
</script>
<style scoped lang="scss">
  .monitoringComponents {
    width: 934px;
    margin: 22px 30px;
    height: 566px;
    background: no-repeat;
    background-size: 100%;
    background-image: url("../../../assets/ZDimages/img_bg_zdsysssjk@1x.png");
    .monitoring-title-p {
      color: #00E6FF;
      font-size: 30px;
      text-align: center;
      font-weight: 700;
      line-height: 70px;
    }
    .monitoring-for-max-big-box {
      margin: 18px 0 15px;
      height: 420px;
      overflow: hidden;
      .null-img {
        display: block;
        width: 230px;
        margin: 100px auto 0;
      }
    }
    .monitoring-bottom-button-box {
      height: 26px;
      display: flex;
      .center-button-box {
        flex: 1;
      }
      .left-button-img {
        cursor: pointer;
        display: block;
        width: 136px;
        height: 26px;
        margin-left: 10px;
      }
      .right-button-img {
        cursor: pointer;
        display: block;
        width: 136px;
        height: 26px;
        margin-right: 10px;
      }
    }
    .full-video-box{
      position: fixed;
      top:0;
      left:0;
      flex:10;
      height:100%;
      width:100%;
      background-color: #004d8c;
    }
  }
</style>
