<!--视频模块-->
<template>
  <div class="indexRightPage-videoPage scrollbar-box">
    <div class="video-max-big-box scrollbar-box" v-if="videoType">
      <img class="null-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!videoList[0]">
      <H5PlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
    </div>
  </div>
</template>

<script>
  import { iotCameraFindByCondition } from "@/api/basicsModules/index";
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
  export default {
    name: 'videoPage',
    components: {
      H5PlayerVideo
    },
    data(){
      return{
        width: 378,
        height: 213,
        videoType:false,
        videoList:[],
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      initialize() {
        let self = this;
        self.$set(self, 'videoType', false);
        self.$set(self, 'videoList', []);
        // type 1.楼栋 2.楼层 3.楼道 4.实验室
        let obj = {
          page:'1',
          pageSize:'10',
          buildId:'',
          floorId:'',
          passageway:'',
          subIds:[this.$parent.subId],
        };
        iotCameraFindByCondition(obj).then(response => {
          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,
              }
            )
          }
          this.$set(this,'videoList',list)
          this.$nextTick(()=>{
            setTimeout(function(){
              self.$set(self, 'videoType', true);
            },1000);
          })
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  .indexRightPage-videoPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .null-img{
      display: block;
      margin:80px 0 0 150px;
      width:150px;
    }
    .video-max-big-box{
      flex:1;
      padding:0 0 10px 15px;
    }
  }
</style>
