<template>
  <div id="video">
    <cmpTitle title="视频点监控" visitMoreBtn="true" @onMore="jump"></cmpTitle>
    <div class="videoCon">
        <div class="videoBox" :id="'dv'+index" v-for="(item,index) in data" :key="index" >
          <dv-border-box-13 :ref="'box13'+index" class="videoItem">
            <div class="mapStyle">
              <video
               :id="'videoId'+index"
               muted="muted"
               controls = "true"
               width="100%"
               height="100%"
               style="object-fit:fill"
               >
               </video>
            </div>
          </dv-border-box-13>
        </div>
    </div>
  </div>
</template>

<script>
  import {getDeviceVideo} from "@/api/grid/index.js";
  import cmpTitle from "../common/cmpTitle.vue"
  import {pushStream} from "@/api/device/videoclouddevice"
  export default{
    components:{
      cmpTitle
    },
   data(){
        return{
          // baseUrlVedio: "http://139.9.103.171/live?port=1935&app=myapp&stream=",
          baseUrlVedio: "http://36.103.228.148:8888/live/",
          data:[],
          videoList:[],
        }
      },
      mounted() {
        this.getVedioData();
      },
      methods:{
        jump(){
          this.$router.push({path:'/smartapplication/videoSurveillance'})
        },
        stopPlay(){
          var _this = this;
          if(this.videoList.length>0){
            _this.videoList.map((item,index)=>{
              item.pause()
             item.unload()
             item.detachMediaElement()
             item.destroy()
             item = null
            })
          }
        },
        play(){
          var _this = this;
          let num = 0
          this.data.map((item,index)=>{
            let divElement = document.getElementById('dv'+index);
            let videoElement = document.getElementById('videoId'+index);
            let flvPlayer = flvjs.createPlayer({
              type: 'flv',
              url: item.src
            });
            _this.videoList.push(flvPlayer)
            // flvPlayer.on('error', err => {
            //   divElement.remove()
            // });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load()
            videoElement.addEventListener('loadedmetadata', ()=>{
              if(num<2){
                num++
                divElement.style.display = "block";
                  flvPlayer.play()
                  _this.$refs[`box13${index}`][0].initWH()
              }
            });
              // let playPromise = flvPlayer.play()
              // if (playPromise !== undefined) {
              //     playPromise.then(() => {
              //       divElement.style.display = "block";
              //     }).catch(()=> {

              //     })
              // }
          })
        },
        getVedioData(){
          let _this = this;
          let residential = JSON.parse(localStorage.getItem('agencies2'))
          let residentialName = residential.id;
          if (residentialName){
            getDeviceVideo(residentialName).then(res => {
              if (res.data.code == 200){
                this.data = [];
                const data = res.data.data.records;
                data.forEach(item => {
                  pushStream({deviceNum: item.deviceNum}).then((psres)=>{
                    let psdata = psres.data.data
                    if(psdata&&psdata.videoExists){
                      let obj = {};
                      obj.src = psdata.flvUrl;
                      obj.name = psdata.deviceName;
                      _this.data.push(obj);
                      _this.$nextTick(()=>{
                        _this.play();
                      })
                    }
                  })
                })
              }
            });
          }
        }
      },
      destroyed() {
        this.stopPlay()
      }
  }
</script>

<style lang="less">
  #video{
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    video::-webkit-media-controls-mute-button {
        display: none !important;
    }
    // video::-webkit-media-controls-play-button {
    //     display: none;
    // }
    // video::-webkit-media-controls-timeline {
    //     display: none;
    // }
    .border-box-content{
      padding: 9px!important;
      display: block!important;
    }
    .videoCon{
      display: flex;
      width: 100%;
      height: 90%;
    }
    .videoBox{
      width: 50%;
      height:90%;
      display: none;
    }
    .videoItem{
      display: flex;
      justify-content: center;
      align-items: center;
      flex:1;
      padding-top: 5px;
      // background-color: rgba(29,73,178,0.5);
    }
    .mapStyle{
      border-top-right-radius: 16px;
      border-bottom-left-radius: 16px;
      overflow: hidden;
      width: 100%;
      height: 100%;
    }
  }
</style>
