<template>
  <div class="video111 videoKuang">
    <el-container>
      <el-container style="display:flex;justify-content: space-between;">
        <el-aside width="20vw" style="height: 80vh;z-index: 3;">
          <el-tree
            :data="videoData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            accordion
          >
            <div slot-scope="{ node }" class="roadClass">{{ node.label }}</div>
          </el-tree>
        </el-aside>

        <DPcomputer17 class="DPcomputer17Class"></DPcomputer17>

        <div v-show="noPtz" id="hkView" class="noPtzVideo1">
          <video id="rtcStreamerVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}" style="width: 100%;height: 100%;" autoplay>
            您的浏览器不支持：HTML5 video.
          </video>
          <el-button class="noPtzCloseStyle" type="danger" icon="el-icon-close" @click="noPtzCloseFn()" size="mini">关闭
          </el-button>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
import DPcomputer17 from '../../views/MLargeScreen/components/smallComponents/DPcomputer17.vue'
import {flvjs} from '@/assets/js/flv.js';

export default {
  components: {
    DPcomputer17,
  },
  data() {
    return {
      videoData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      flvPlayer: null,
      noPtz: false,
      webRtcServer: null,
      cameraUrl: `hk/index.html?ip=192.168.0.54&port=80&un=admin&pw=gemho10-7`,
    };
  },
  mounted() {
    this.getCode();
  },
  methods: {
    getCode() {
      //分区数据
      HttpReq.truckDispatching.mineMonitoringPartitionQuery({size: 999}).then((res) => {
        let data1 = [];
        res.content.forEach((item) => {
          item.label = item.name;
          data1.push(item);
        });
        if (res != "") {
          //总摄像头数据
          HttpReq.truckDispatching.mineMonitoringCameraQuery({size: 999}).then((res) => {
            let fenquName = [];
            res.content.forEach((item, index) => {
              item.ref = "video" + index;
              item.label = item.cameraName;
              fenquName.push(item);
            });
            data1.forEach((item) => {
              item.children = [];
              fenquName.forEach((itemSon, index) => {
                if (item.id == itemSon.cameraId) {
                  item.children.push(itemSon);
                }
              })
            });
            this.videoData = data1;
          })
        }
      })
    },
    stopPlay(){
      if(this.flvPlayer && this.flvPlayer._msectl && this.flvPlayer.e){
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null
      }
    },
    handleNodeClick(data) {
      this.$parent.closeHkView();
      if (data.children) {
        return;
      }
      this.noPtz = true;
      // this.webRtcServer = new WebRtcStreamer("rtcStreamerVideo","http://39.164.225.220:5007");
      // this.webRtcServer.connect(`rtsp://${data.userName}:${data.passWord}@${data.cameraIp}:554/h264/ch1/main/av_stream`);

      if (flvjs.isSupported()) {
        this.flvPlayer && this.stopPlay();
        this.flvPlayer = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          hasAudio: false,
          url: data.url,
        });
        this.flvPlayer.attachMediaElement(document.getElementById("rtcStreamerVideo"));
        this.flvPlayer.load();
      } else {
        console.log("不支持的格式");
      }
    },
    noPtzCloseFn() {
      if(this.webRtcServer){
        this.webRtcServer.disconnect();
        this.webRtcServer=null;
      }
      this.noPtz = false;
    },
  },
  //销毁
  beforeDestroy() {
    this.noPtzCloseFn();
  }

};
</script>
<style>
.video111 .DPcomputer17Class {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 4;
}

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

.el-aside {
  background-color: rgba(32, 42, 67, 0.95);
  color: #333;
  text-align: center;
  padding: 0;
  margin-bottom: 0px;
  z-index: 3;
  overflow: hidden;
}

.videoKuang .el-tree {
  height: 57vh;
  background-color: rgba(32, 42, 67, 0.95);
  overflow-y: scroll;
}

.videoKuang .el-tree::-webkit-scrollbar {
  display: none;
}

.videoKuang .el-tree {
  scrollbar-width: none;
}

.videoKuang .el-tree-node__content {
  height: 50px;
  background-color: rgba(32, 42, 67, 0.95);
  width: 20vw;
}

.videoKuang .el-tree-node {
  background-color: rgba(32, 42, 67, 0.95);
}

.videoKuang .el-tree-node__content:hover {
  background-color: rgba(32, 42, 67, 0.95);
}

.videoKuang .el-tree-node:focus > .el-tree-node__content {
  background-color: rgba(32, 42, 67, 0.95);
}

.videoKuang .el-tree-node__content > .el-tree-node__expand-icon {
  display: none;
}

.videoKuang .roadClass {
  height: 35px;
  width: 90%;
  line-height: 35px;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 2px;
  color: white;
  border-radius: 5px;
  background: linear-gradient(to bottom, #30CFBE, #007EFF);
  margin: 0px auto;
}

.videoKuang .el-tree-node__children {
  width: 90%;
  border: 1.5px solid #A6F6F9;
  margin: 0 auto;
  border-radius: 10px;
}

.videoKuang .el-tree-node__children .el-tree-node__content {
  height: 30px;
  background-color: rgba(32, 42, 67, 0.95);
  width: 100%;
  margin-left: -10px;
}

.videoKuang .el-tree-node__children .roadClass {
  height: 30px;
  width: 90%;
  line-height: 30px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #A6F6F9;
  border-radius: 5px;
  background: linear-gradient(to bottom, rgba(32, 42, 67, 0.95), rgba(32, 42, 67, 0.95));
  margin: 0px auto;
}

.videoKuang .noPtzCloseStyle {
  position: absolute;
  top: 0.5vh;
  right: 0.5vh;
  font-size: 20px;
  cursor: pointer;
}

.plugin {
  width: 60vw;
  height: 94.5vh;
  background-color: gray;
}

.videoKuang .noPtzVideo1 {
  width: 60vw;
  height: 94.5vh;
  overflow: hidden;
  background-color: gray;
  position: absolute;
  left: 20vw;
  top: 0;
  z-index: 3;
}


</style>
