<template>
  <div>
    <el-container>
      <el-header style="font-size: 20px; font-weight: bold">
        卡车调度系统车辆监控视频
      </el-header>
      <el-container>
        <el-aside width="230px" style="height: 79vh">
          <el-tree
            :data="videoData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            accordion
          >
            <div slot-scope="{ node }">
              <span>
                <i class="el-icon-video-camera-solid"> {{ node.label }}</i>
              </span>
            </div>
          </el-tree>
        </el-aside>

        <el-main id="elMain">
          
          <div v-if="isChildren1" class="iframeList">
            <div v-for="(item,index) in itemList" :key="index" class="videoChildren">
              <video :ref="item.ref" width="330" height="200" muted autoplay class="twelveVideo"></video>
            </div>
          </div>

          <div v-if="btnChildren" class="btn1">
            <el-button
              :disabled="up"
              @click="upPage"
              style="background-color: #7bbfea; color: white"
              >上一页</el-button
            ><el-button
              :disabled="down"
              @click="downPage"
              style="background-color: #7bbfea; color: white"
              >下一页</el-button
            >
          </div>

          <div v-if="isChildren2">
            <iframe :src="url" class="iframeSingle"></iframe>
          </div>

          <div v-show="noPtz">
            <video id="noPtzVideo" width="1300" height="700" muted autoplay></video>
          </div>

          <div v-show="isChildren3" class="dahuaViews"></div>
          
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Hls from "hls.js"
//import EZUIKit from "ezuikit-js";
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
var noPtzhls = null;
export default {
  data() {
    return {
      videoData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      itemList: [],
      itemListNext: [],
      itemListMiddleman: [],
      isChildren1: true,
      isChildren2: false,
      isChildren3: false,
      btnChildren: false,
      isIP: "",
      // url: "http://127.0.0.1:5500/webs/cn/demo.html",
      // url1: "http://127.0.0.1:5500/webs/cn/demo1.html",
      url:"http://192.168.9.2:85/cn/demo.html?ip=",
      url1:"http://192.168.9.2:85/cn/demo",
      dahuaData: [],
      up: true,
      down: false,
      accessToken:"",
      noPtz:false,
    };
  },
  mounted() {
    this.getCode();
    //this.getDaHua();
    //this.getAccessToken();
  },
  methods: {
    getAccessToken() {
      let param = {};
      HttpReq.truckDispatching.mineMonitoringGetTokenaQuery(param).then((res) => {
				this.accessToken = res.data.accessToken;
			})
    },
    getCode() {
      //分区数据
      HttpReq.truckDispatching.carMonitoringFleetQuery({size: 999}).then((res) => {
        let data1 = [];
        res.content.forEach((item) => {
          item.label = item.name;
          data1.push(item);
        });
        if (res != "") {
          //总摄像头数据
          HttpReq.truckDispatching.carMonitoringCarsQuery({size: 999}).then((res) => {
            let fenquName = [];
            res.content.forEach((item,index) => {
              item.ref = "video" + index;
              item.hls = null;
              item.label = item.car + '/' + item.carnumber;
              fenquName.push(item);
            });
            data1.forEach((item) => {
              item.children = [];
              fenquName.forEach((itemSon,index)=>{
                if(item.id == itemSon.motorcadeId){
                  item.children.push(itemSon);
                }
              })
            });
            this.videoData = data1;
            console.log(this.videoData);
          })
        }
			})
    },
    handleNodeClick(data) {
      console.log(data);
      let that = this;
      if (data.children) {
        let temporaryData1 = [];
        let temporaryData2 = [];
        if (data.children.length > 12) {
          for (let i = 0; i < 12; i++) {
            temporaryData1.push(data.children[i]);
          }
          for (let j = 12; j < data.children.length; j++) {
            temporaryData2.push(data.children[j]);
          }
          this.itemList = temporaryData1;
          this.itemListNext = temporaryData2;
          this.btnChildren = true;

          this.$nextTick(()=>{
            this.itemList.forEach(function(item,index){ 
              item.hls = new Hls();
              //item.hls.loadSource(item.url)
              item.hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8')
              item.hls.attachMedia(that.$refs[item.ref][0]);
              item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
                that.$refs[item.ref][0].play();
              });
            })
          })

          if(noPtzhls != null){
            noPtzhls.destroy();
          }
            
        } else {
          this.btnChildren = false;
          this.itemList = data.children;

          this.$nextTick(()=>{
            this.itemList.forEach(function(item,index){ 
              item.hls = new Hls();
              //item.hls.loadSource(item.url)
              item.hls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8')
              item.hls.attachMedia(that.$refs[item.ref][0]);
              item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
                that.$refs[item.ref][0].play();
              });
            })
          })

          if(noPtzhls != null){
            noPtzhls.destroy();
          }

        }

        this.isChildren1 = true;
        this.isChildren2 = false;
        this.isChildren3 = false;
        this.up = true;
        this.down = false;
        this.noPtz = false;

        //改变视频大小
        this.$nextTick(()=>{
          this.winSize();
        })
      } else {
        this.btnChildren = false;
        let noPtzVideo = document.getElementById('noPtzVideo');
        noPtzhls = new Hls();
        //noPtzhls.loadSource(data.url);
        noPtzhls.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8');
        noPtzhls.attachMedia(noPtzVideo);
        noPtzhls.on(Hls.Events.MANIFEST_PARSED,function() {
          noPtzVideo.play();
        });
        this.isChildren1 = false;
        this.isChildren2 = false;
        this.isChildren3 = false;
        this.btnChildren = false;
        this.noPtz = true;
      }
    },
    getDaHua() {
      HttpReq.truckDispatching.carMonitoringCarsQuery({page:0,size:100}).then((res) => {
        let dahua = [];
        res.content.forEach(function (item) {
          if (item.motorcadeId == 2) {
            dahua.push(item);
          }
        });
        this.dahuaData = dahua;
			})
    },
    upPage() {
      let that = this;
      this.up = true;
      this.down = false;
      this.itemList = this.itemListMiddleman;
      this.$nextTick(()=>{
        this.itemList.forEach(function(item,index){ 
          item.hls = new Hls();
          item.hls.loadSource(item.url)
          item.hls.attachMedia(that.$refs[item.ref][0]);
          item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
            that.$refs[item.ref][0].play();
          });
        })
      })
      //改变视频大小
      this.$nextTick(()=>{
        this.winSize();
      })
    },
    downPage() {
      let that = this;
      this.itemListMiddleman = this.itemList;
      this.itemList = [];
      this.up = false;
      this.down = true;
      this.itemList = this.itemListNext;
      this.$nextTick(()=>{
        this.itemList.forEach(function(item,index){ 
          item.hls = new Hls();
          item.hls.loadSource(item.url)
          item.hls.attachMedia(that.$refs[item.ref][0]);
          item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
            that.$refs[item.ref][0].play();
          });
        })
      })
      //改变视频大小
      this.$nextTick(()=>{
        this.winSize();
      })
    },
    //监控el-main大小
    winSize(){
      let elMain = document.getElementById('elMain');
      let elMainWight = parseInt(getComputedStyle(elMain).width) ;
      if(elMainWight > 1650){
        let twelveVideo = document.getElementsByClassName('twelveVideo');
        for(let i = 0;i < twelveVideo.length;i++){
          twelveVideo[i].width = 450;
          twelveVideo[i].height = 320;
        }
      }

    }
  },
  // 销毁
  destroyed() {
    this.itemList.forEach(function(item,index){ 
      item.hls.destroy();
    })
    if(noPtzhls != null){
      noPtzhls.destroy();
    }
  }
  
};
</script>
<style>
.mianBodysSon{
  width: 100%;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
}
.btn1 {
  position: absolute;
  top: 92%;
  left: 57%;
}
.dahuaViews {
  display: flex;
  flex-wrap: wrap;
  margin-left: 5px;
}
.dahuaViews>div{
  margin-left: 1px;
  border: 1px greenyellow solid;
}

.videoChildren {
  scrollbar-width: none;
}
.el-header,
.el-footer {
  background-color: #7bbfea;
  color: white;
  text-align: center;
  letter-spacing: 10px;
  font-size: 25px !important;
  line-height: 60px;
}

.el-aside::-webkit-scrollbar {
  display: none;
}
.el-aside {
  scrollbar-width: none;
}
.el-aside {
  background-color: #fffef9;
  color: #333;
  text-align: center;
  padding: 0;
  margin-bottom: 0px;
}

.el-main {
  background-color: white;
  color: #333;
  text-align: center;
  height: 79vh;
  overflow:hidden;
  width: 73vw;
}

.el-tree-node__content {
  height: 55px;
  background-color: #e9eef3;
  width: 228px;
}
.el-tree-node {
  background-color: #e9eef3;
  border: 1px solid #d3d7d4;
}
.el-tree-node__content:hover {
  background-color: white;
}
.iframeList {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  padding-left: 25px;
  box-sizing: border-box;
}
.iframeList>div{
  border: 1px greenyellow solid;
}
.iframeItem {
  height: 220px;
  width: 340px;
  background: #fff;
  margin-bottom: 0px;
}
.iframeItem::-webkit-scrollbar {
  display: none;
}
.iframeItem {
  scrollbar-width: none;
}
@-moz-document url-prefix() {
  .iframeItem {
    border: 1px solid palegreen;
  }
}
.iframeSingle {
  width: 1378px;
  height: 763px;
}
</style>
