<template>
  <div id="video2">
    <div @click="switchLay" style="width: 100%;font-size: 12px;height: 40px;line-height: 40px;display: flex;align-items: center;cursor: pointer;">
      <i class="iconfont iconpailie" style="margin-right: 5px;"></i>
      排列方式
    </div>
    <div class="videoCon">
      <div class="videoBox" :id="'dv'+index" v-for="(item,index) in data" :key="index" :style="{width:boxWidth}">
        <dv-border-box-13 :ref="'box13'+index" class="videoItem" >
          <div class="mapStyle">
            <div :ref="'tit'+index" class="videoIitle" align="center">{{item.name}}</div>
            <video
             :id="'videoId'+index"
             width="100%"
             controls='controls'
             muted="muted"
             style="object-fit:fill"
             >
             </video>
          </div>
        </dv-border-box-13>
      </div>
    </div>
  </div>
</template>

<script>
  import {getDeviceVideo} from "@/api/grid/index.js";
  require("../common/sockjs.min.js")
  require("../common/stomp.min.js")
  // import Stomp from "stompjs"
  // import stompClient from "sockjs-client"
  import {pushStream} from "@/api/device/videoclouddevice"
  export default{
    data(){
      return{
        // baseUrlVedio: "http://139.9.103.171/live?port=1935&app=myapp&stream=",
        baseUrlVedio: "http://36.103.228.148:8888/live/",
        data:[],
        videoList:[],
        boxWidth:'25%',
        switchIndex:true,
        path:"ws://192.168.1.128:7006/ws",
        socket:""
      }
    },
    mounted() {
      this.getVedioData();
    },
    destroyed () {
        // 销毁监听
        // this.socket.onclose = this.close
    },
    props: {
      residential: {
        type: Object,
        default: {}
      }
    },

    methods:{
      initSocket(){
        let socket = new SockJS('http://192.168.1.128:9534/ws');
        let stompClient = Stomp.over(socket);
        stompClient.connect({Referer:""}, ()=>{
          stompClient.subscribe("/topic/" + '64010106001324001385', (res)=> {
            console.log(res,"监听ws")
          });
          stompClient.send("/wsapp/videocloud.addUser",{},JSON.stringify({sender: '64010106001324001385', type: 'JOIN'})
          )
        }, ()=>{
          console.log('连接失败')
        });
      },
      switchLay(){
        var _this = this;
        this.switchIndex = !this.switchIndex
        // this.boxWidth = '11.11%'
        this.videoList.map((item,index)=>{
          if(_this.switchIndex){
            _this.boxWidth = '25%'
            _this.$refs[`tit${index}`][0].classList.remove('videoIitle1')
            _this.$refs[`tit${index}`][0].classList.add('videoIitle')
          }else{
            _this.boxWidth = '16.66%'
            _this.$refs[`tit${index}`][0].classList.remove('videoIitle')
            _this.$refs[`tit${index}`][0].classList.add('videoIitle1')
          }
          _this.$refs[`box13${index}`][0].initWH()
        })
      },
      jump(item){
        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;
        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', ()=>{
            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 residentialName = this.residential.id;
        if (residentialName){
          getDeviceVideo(residentialName).then(res => {
            if (res.data.code == 200){
              const data = res.data.data.records;
              data.forEach((item,index) => {
                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">
  #video2{
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
    box-sizing: content-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: 10px!important;
      display: block!important;
    }
    .videoCon{
      display: flex;
      flex-wrap: wrap;
      width: 100%;

    }
    .videoBox{
      width: 25%;
      // height: 100%;
      box-sizing: border-box;
      // margin-bottom: 10px;
      display: none;
    }
    .videoItem{
      position: relative;
      flex-direction: column;
      display: flex;
      // justify-content: center;
      // align-items: center;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      padding-top: 10px;
      // height: 100%;
      // background-color: rgba(29,73,178,0.5);
    }
    .videoIitle{
      position: absolute;
      left: 0;
      right: 0;
      font-size: 14px;
      font-weight: bold;
      text-align: left;
      padding: 5px 0 5px 5px;
      width: 100%;
      background: linear-gradient(to bottom,rgba(0,9,40,.5),rgba(0,9,40,.1));
    }
    .videoIitle1{
      position: absolute;
      left: 0;
      right: 0;
      font-size: 8px;
      text-align: left;
      padding: 2px;
      width: 100%;
      background: linear-gradient(to bottom,rgba(0,9,40,.5),rgba(0,9,40,.1));
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      line-clamp: 1;
      -webkit-line-clamp: 1;
    }
    .mapStyle{
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.15);
      box-shadow: inset 0 0 50px rgba(255,255,255,.1), 0 0 5px rgba(0,0,0,.3);
    }
  }
</style>
