<!--视频监控-->
<template>
  <div class="videoComponent">
    <p class="title-p">视频监控</p>
    <img v-if="!videoType" class="video-max-big-box" src="@/assets/ZDimages/video_img.png">
    <H5PlayerVideo class="video-max-big-box" :videoProps="videoData" v-if="videoType"></H5PlayerVideo>
    <img class="position-left-bottom" src="@/assets/ZDimages/img_min_icon.png">
    <img class="position-right-bottom" src="@/assets/ZDimages/img_min_icon.png">
    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
  </div>
</template>
<script>
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
  export default {
    name: 'videoComponent',
    components: {
      H5PlayerVideo,
      fullH5PlayerVideo
    },
    data () {
      return {
        videoType:false,
        videoData:null,
        //全屏视频参数
        fullVideoProps:{},
        fullVideoType:false,
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      initialize(obj){
        // console.log('videoObj',obj);
        let self = this;
        this.$set(this,'videoType',false);
        setTimeout(function() {
          if(obj.monitorVisable){
            if(obj.videoList[0]){
              //开启
              self.$set(self,'videoData',{
                width: 737, //(宽度:非必传-默认600)
                height: 417, //(高度:非必传-默认338)
                url: obj.videoList[0].url,
                cameraIndexCode: obj.videoList[0].cameraIndexCode,
              });
              self.$set(self,'videoType',true);
            }else{
              //关闭
              self.$set(self,'videoType',false);
            }
          }else{
            //关闭
            self.$set(self,'videoType',false);
          }
        }, 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">
  .videoComponent{
    width:890px;
    height:512px;
    margin:20px 0 0 30px;
    background-image: url("../../assets/ZDimages/img_spjk_bg@1x.png");
    background-size: 100% 100%;
    position: relative;
    .title-p{
      height:47px;
      line-height: 47px;
      color:#fff;
      font-size:20px;
      font-weight: 700;
      font-family: Source Han Sans, Source Han Sans;
      padding-left:24px;
      text-align: center;
    }
    .video-max-big-box{
      width:739px;
      height:419px;
      margin: 24px 0 0 76px;
      border: 1px solid #0183FA;
    }
    .position-left-bottom{
      position: absolute;
      left:-15px;
      bottom:-15px;
      width:42px;
      height:42px;
      z-index:1;
      transform: rotate(270deg);
    }
    .position-right-bottom{
      position: absolute;
      right:-15px;
      bottom:-15px;
      width:42px;
      height:42px;
      z-index:1;
      transform: rotate(180deg);
    }
  }
</style>
