<template>
  <div class="app-container demo">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">测试页面</p>
      <p class="page-top-title-add-p">测试</p>
    </div>
    <div class="scrollbar-box" v-if="pageType">
      <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: 'demo',
    components: {
      H5PlayerVideo
    },
    data () {
      return {
        pageType:true,
        videoList:[],
      }
    },
    created(){

    },
    mounted(){
      this.getUrl();
    },
    methods:{
      getUrl() {
        let self = this;
        // type 1.楼栋 2.楼层 3.楼道 4.实验室
        let obj = {
          page:'1',
          pageSize:'4',
          buildId:'',
          floorId:'',
          passageway:'',
          subIds:['1793100035379396609'],
        };
        iotCameraFindByCondition(obj).then(response => {
          if (!response.data.records[0]){
            this.msgError('视频异常,请联系管理员')
          }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,
                }
              )
            }
            this.$set(this,'videoList',list)
            this.$nextTick(()=>{
              setTimeout(function(){
                self.$set(self, 'pageType', true);
              },1000);
            })
          }
        });
      },
    },
  }
</script>
<style scoped lang="scss">
  .demo{

  }
</style>
