<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">
<!--          <iframe src="hk/index.html?ip=192.168.0.56&port=80&un=admin&pw=gemho10-7" class="plugin"></iframe>-->
          <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'

export default {
  components: {
    DPcomputer17,
  },
  data() {
    return {
      videoData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      noPtz: false,
      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;
          })
        }
      })
    },
    handleNodeClick(data) {
      this.$parent.closeHkView();
      if (data.children) {
        return;
      }
      this.noPtz = true;
      this.cameraUrl = `hk/index.html?ip=${data.cameraIp}&port=${data.port}&un=${data.userName}&pw=${data.passWord}`;
      // this.cameraUrl = `hk/index.html?ip=192.168.0.54&port=80&un=admin&pw=gemho10-7`;
      this.createIframe();
    },
    createIframe() {
      var iframe = document.createElement("iframe");
      iframe.style.width = '100%';
      iframe.style.height = '100%';
      iframe.style.margin = '0';
      iframe.style.padding = '0';
      iframe.style.overflow = 'hidden';
      iframe.style.border = 'none';
      iframe.id = "hkIframe";
      document.getElementById("hkView").appendChild(iframe);
      iframe.src = this.cameraUrl;
      return iframe;
    },
    noPtzCloseFn() {
      var thisNode = document.getElementById("hkIframe");
      if(thisNode){
        thisNode.src = 'about:blank';
        document.getElementById("hkView").removeChild(thisNode);
      }
      this.noPtz = false;
    },
  },
  //销毁
  beforeDestroy() {

  }

};
</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>
