<template>
  <div class="videoMonitor">
    <div class="leftList">
      <div class="leftBox">
        <Left @playVideo="playVideo"/>
      </div>
    </div>
    <div class="rightVideo">
     <!-- <div id="player"></div>-->
      <div style="height: 5%;padding: 6px;">
        <el-dropdown @command="handleCommand" trigger="click">
          <span class="el-dropdown-link">
            <img src="@/assets/images/spilt.png" alt="spilt" style="width: 18px;height: 18px">
            分屏设置
          </span>
          <el-dropdown-menu slot="dropdown" style="width:100px">
            <el-dropdown-item command="1">1x1 </el-dropdown-item>
            <el-dropdown-item command="4">2x2</el-dropdown-item>
            <el-dropdown-item command="9">3x3</el-dropdown-item>
            <el-dropdown-item command="16">4x4</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div style="height: 95%;width: 100%;" ref="playVideo">
        <div v-for="num in spiltNum" class="videoShow" :style="{'width': countWidth,'height':countHeight}" @click="changeVideo('play'+num,num)">
          <PlayVideo
            :playId="'play'+num"
            :isChoice="showVideoNum == num"
            :ref="'play'+num"
          >
          </PlayVideo>

        </div>
      </div>

    </div>
  </div>
</template>

<script>
import Left from "./leftList/Left";
import PlayVideo from "@/components/Video/PlayVideo"
export default {
  name: "videoMonitor",
  components:{
    Left,
    PlayVideo
  },
  data() {
    return {
      active: 0,
      spiltNum: 0,
      activeName:'',
      showVideoNum: 1,
      playId: "play1"
    };
  },
  created(){

  },
  watch:{
    spiltNum(newVal,oldVal) {
      this.$nextTick(()=>{
        /*现在数据已经渲染完毕*/
        for(var i =1; i<=this.spiltNum; i++){
          const playId = 'play'+ i;
          this.$refs[playId][0].fit();
        }
      })
    }
  },
  mounted(){
    this.spiltNum = 4;
  },
  computed:{
    countWidth(){
      return (this.$refs.playVideo.offsetWidth-2)/Math.sqrt(this.spiltNum) + 'px';
    },
    countHeight(){
      return (this.$refs.playVideo.offsetHeight-2)/Math.sqrt(this.spiltNum) + 'px';
    }
  },
  methods: {
    changeVideo(playId,num){
      this.playId = playId;
      this.showVideoNum = num;
    },
    handleCommand(val){
      this.spiltNum = eval(val);
      this.playId = "play1";
      this.showVideoNum = 1;
    },
    playVideo(data){
      this.$refs[this.playId][0].playVideo(data);
    }

  }
}
</script>

<style scoped lang="scss">
  .videoMonitor{
    height: calc(100vh - 84px);
    margin: 13px 7px 7px 7px;
    //padding: 14px;
    //border: 1px solid;
  }
  .videoShow{
    //border: 1px solid blue;
    float: left;
    padding: 6px;
    //border-radius: 6px;
  }

  .leftList{
    height: 100%;
    width: 25%;
    padding: 13px;
    float: left;
    background: #fff;
    box-shadow: 6px 0px 18px 1px rgba(0, 0, 0, 0.06);
    border-radius: 4px 4px 4px 4px;
  }

  .rightVideo{
    //border: 1px solid;
    height: 100%;
    width: 74%;
    margin-left: 6px;
    float: left;
    background: #fff;
  }

  #player{
    width: 100% ;
    height: 100% ;
  }

  .el-dropdown-link {
    cursor: pointer;
    font-size: 20px;
    color: #334d6e;
  }

  .leftBox{
    box-shadow: 6px 0px 18px 1px rgba(0, 0, 0, 0.06);
    border-radius: 4px 4px 4px 4px;
    height: 100%
  }

</style>
