<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="1378" 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) {
        if (data.children[0].motorcadeId == 1) {
          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.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.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 if (data.children[0].motorcadeId == 2) {
          this.isChildren1 = false;
          this.isChildren2 = false;
          this.isChildren3 = true;
          this.btnChildren = false;
          this.noPtz = false;

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

          let dahuaViews = document.querySelector(".dahuaViews");
          dahuaViews.innerHTML = `<div><div id="dahuaVideo0"></div></div>
                                  <div><div id="dahuaVideo1"></div></div>
                                  <div><div id="dahuaVideo2"></div></div>
                                  <div><div id="dahuaVideo3"></div></div>`;
          var player = this.$cyberplayerJs(`dahuaVideo0`).setup({
            width: 340, // 宽度，也可以支持百分比（不过父元素宽度要有）
            height: 210, // 高度，也可以支持百分比
            title: "", // 标题
            isLive: true, // 必须设置，表明是直播视频
            file: that.dahuaData[0].url, //您的视频源的地址（目前是乐橙示例播放地址）
            image: "", // 预览图
            autostart: true, // 是否自动播放
            stretching: "uniform", // 拉伸设置
            repeat: false, // 是否重复播放
            volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
            controls: false, // 是否显示控制栏
            hls: {
              reconnecttime: 5, // hls直播重连间隔秒数
            },
            ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
          });
          var player = this.$cyberplayerJs(`dahuaVideo1`).setup({
            width: 340, // 宽度，也可以支持百分比（不过父元素宽度要有）
            height: 210, // 高度，也可以支持百分比
            title: "", // 标题
            isLive: true, // 必须设置，表明是直播视频
            file: that.dahuaData[1].url, //您的视频源的地址（目前是乐橙示例播放地址）
            image: "", // 预览图
            autostart: true, // 是否自动播放
            stretching: "uniform", // 拉伸设置
            repeat: false, // 是否重复播放
            volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
            controls: false, // 是否显示控制栏
            hls: {
              reconnecttime: 5, // hls直播重连间隔秒数
            },
            ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
          });
          var player = this.$cyberplayerJs(`dahuaVideo2`).setup({
            width: 340, // 宽度，也可以支持百分比（不过父元素宽度要有）
            height: 210, // 高度，也可以支持百分比
            title: "", // 标题
            isLive: true, // 必须设置，表明是直播视频
            file: that.dahuaData[2].url, //您的视频源的地址（目前是乐橙示例播放地址）
            image: "", // 预览图
            autostart: true, // 是否自动播放
            stretching: "uniform", // 拉伸设置
            repeat: false, // 是否重复播放
            volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
            controls: false, // 是否显示控制栏
            hls: {
              reconnecttime: 5, // hls直播重连间隔秒数
            },
            ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
          });
          var player = this.$cyberplayerJs(`dahuaVideo3`).setup({
            width: 340, // 宽度，也可以支持百分比（不过父元素宽度要有）
            height: 210, // 高度，也可以支持百分比
            title: "", // 标题
            isLive: true, // 必须设置，表明是直播视频
            file: that.dahuaData[3].url, //您的视频源的地址（目前是乐橙示例播放地址）
            image: "", // 预览图
            autostart: true, // 是否自动播放
            stretching: "uniform", // 拉伸设置
            repeat: false, // 是否重复播放
            volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
            controls: false, // 是否显示控制栏
            hls: {
              reconnecttime: 5, // hls直播重连间隔秒数
            },
            ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
          });
        }
      } else {
        this.btnChildren = false;
        if (data.motorcadeId == 1) {
          HttpReq.truckDispatching.mineMonitoringHowYuntaiQuery({ip:data.cameraIp}).then((res) => {
            if(!res){
              let noPtzVideo = document.getElementById('noPtzVideo');
              noPtzhls = new Hls();
              noPtzhls.loadSource(data.url);
              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;
            }else{
              this.url = "";
              let originalUrl = "http://192.168.9.2:85/cn/demo.html?ip=";
              // let originalUrl = "http://127.0.0.1:5500/webs/cn/demo.html?ip=";
              this.isChildren1 = false;
              this.isChildren2 = true;
              this.isChildren3 = false;
              this.isIP = data.cameraIp;
              this.url = originalUrl + data.cameraIp;
              this.btnChildren = false;
              this.noPtz = false;

              if(noPtzhls != null){
                noPtzhls.destroy();
              }
            }
          })
        } else if (data.motorcadeId == 2) {
          this.isChildren1 = false;
          this.isChildren2 = false;
          this.isChildren3 = true;
          this.btnChildren = false;
          this.noPtz = false;

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

          let dahuaViews = document.querySelector(".dahuaViews");
          dahuaViews.innerHTML = '<div id="dahuaVideoAlone"></div>';
          var player = this.$cyberplayerJs(`dahuaVideoAlone`).setup({
            width: 1390, // 宽度，也可以支持百分比（不过父元素宽度要有）
            height: 760, // 高度，也可以支持百分比
            title: "", // 标题
            isLive: true, // 必须设置，表明是直播视频
            file: data.url, //您的视频源的地址（目前是乐橙示例播放地址）
            image: "", // 预览图
            autostart: true, // 是否自动播放
            stretching: "uniform", // 拉伸设置
            repeat: false, // 是否重复播放
            volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
            controls: false, // 是否显示控制栏
            hls: {
              reconnecttime: 5, // hls直播重连间隔秒数
            },
            ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
          });
        }
      }
    },
    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>
