<template>
  <div class="video-control-box">
    <main>
      <ul
        ref="ref_show"
        class="video-list"
        :class="[
          'video-list' + gridVideoList.length,
          showFullScreen ? 'full-screen' : '',
        ]"
      >
        <li
          v-for="(item, index) in gridVideoList"
          :key="index"
          :class="currentPlayIndex == index ? 'play' : ''"
          @click="changeCurrentPlayIndexFn(index)"
        >
          <tsl-video-player
            :ref="'video-item-' + index"
            :mainSrc="item.mainSrc"
            :otherSrc="item.otherSrc"
            @closeItemVideo="closeItemVideoFn(index)"
          />
        </li>
      </ul>
      <div class="video-control">
        <div class="list-control">
          <i
            class="full-screen"
            title="网页全屏，按ESC可退出"
            @click="fullScreenFn"
          ></i>
          <ul class="video-numbers-list">
            <li
              v-for="(item, index) in listGrid"
              :key="index"
              @click="changeGridType(index)"
              :title="item.title"
            >
              <img
                :src="
                  index === currentGridTypeIndex ? item.imgSrc2 : item.imgSrc1
                "
                :alt="item.title"
                srcset=""
              />
            </li>
          </ul>
          <i class="screenshots" title="截图" @click="screenshotsFn"></i>
          <ul class="video-numbers-list" v-show="config.isShowBackTime">
            <li
              v-for="(item, index) in listGridBackControl"
              :key="index"
              @click="changeGridBack(index)"
              :title="item.title"
            >
              <img
                :src="
                  index === currentGridBackIndex ? item.imgSrc2 : item.imgSrc1
                "
                :alt="item.title"
                srcset=""
              />
            </li>
          </ul>
        </div>
        <div style="width: 22%">
          <div class="btn-control">
            <div class="btn" @click="save">保存预案</div>
            <div class="btn" @click="closeOneFn">关闭</div>
            <div class="btn" @click="closeAllFn">全部关闭</div>
          </div>
        </div>
      </div>
    </main>
    <aside>
      <div
        class="top-tree"
        :class="currentNavIndex == 0 ? 'height-80' : 'height-100'"
      >
        <nav class="menu">
          <li
            :class="currentNavIndex == 0 ? 'active' : ''"
            @click="changeNavIndexFn(0)"
          >
            视频资源
          </li>
          <li
            :class="currentNavIndex == 1 ? 'active' : ''"
            @click="changeNavIndexFn(1)"
            v-show="config.isShowGroup"
          >
            分组预案
          </li>
        </nav>
        <div class="input-box">
          <el-input
            :placeholder="
              currentNavIndex == 0 ? '名字/编号' : '预案名称/名人姓名/编号'
            "
            @input="searchVideoFn"
            v-model="searchValue"
            clearable
          />
        </div>
        <div class="video-resources" :class="'active-' + currentNavIndex">
          <div v-if="currentNavIndex == 0">
            <div class="tree-content" v-if="currentShowTree">
              <el-tree
                lazy
                :data="videoResourcesTree"
                :load="loadNode"
                :highlight-current="true"
                :props="defaultProps"
                @node-click="handleNodeClick"
                :default-expand-all="config.defaultExpandAll"
              ></el-tree>
              <div class="btn-control group" v-show="config.isShowTreeGroup">
                <div class="btn" @click="changeT_my(2)">上一组</div>
                <div class="btn" @click="changeT_my(0)">上一个</div>
                <div class="btn" @click="changeT_my(1)">下一个</div>
                <div class="btn" @click="changeT_my(3)">下一组</div>
              </div>
            </div>
            <ul class="video-search-list" v-else>
              <li
                v-for="(item, index) in searchValueList"
                :class="currentSearchValueIndex == index ? 'active' : ''"
                @click="clickSearchItem(item, index)"
                :key="index"
              >
                {{ item.label }}
              </li>
            </ul>
          </div>
          <div v-else>
            <ul class="group-list">
              <li v-for="(item, index) in videoGroupData" :key="index">
                <p class="name" @click="changeGroupStatus(index)">
                  <span>{{ item.label }}</span>
                  <i @click.stop="playGroup(item, index)"></i>
                </p>
                <div class="children-box" v-show="item.isOpen">
                  <p class="item" v-for="i in item.children" :key="i.thingID">
                    {{ i.label }}
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="bottom-control" v-show="currentNavIndex == 0">
        <nav class="menu">
          <li
            :class="currentControlNavIndex == 0 ? 'active' : ''"
            @click="changeControlIndexFn(0)"
          >
            历史回放
          </li>
          <li
            :class="currentControlNavIndex == 1 ? 'active' : ''"
            @click="changeControlIndexFn(1)"
            v-show="config.isShowPTZ"
          >
            PTZ操作
          </li>
          <li
            :class="currentControlNavIndex == 2 ? 'active' : ''"
            @click="changeControlIndexFn(2)"
            v-show="config.isShowQuality"
          >
            质量调节
          </li>
        </nav>
        <ul class="backplay" v-if="currentControlNavIndex == 0">
          <li>
            <p>开始时间</p>
            <div class="block">
              <el-date-picker
                v-model="form.startTime"
                type="datetime"
                value-format="timestamp"
                placeholder="选择开始时间"
              >
              </el-date-picker>
            </div>
          </li>
          <li>
            <p>结束时间</p>
            <div class="block">
              <el-date-picker
                v-model="form.endTime"
                type="datetime"
                value-format="timestamp"
                placeholder="选择结束时间"
              >
              </el-date-picker>
            </div>
          </li>
          <li>
            <button class="btn-play" type="primary" @click="onSubmit">
              播放
            </button>
          </li>
        </ul>
        <div class="ptz" v-if="currentControlNavIndex == 1">
          <ptz />
        </div>
        <div class="quality" v-if="currentControlNavIndex == 2">
          <quality />
        </div>
      </div>
    </aside>
  </div>
</template>

<script>
import * as controlFn from "./js/control.js";
import html2canvas from "html2canvas";
import tslVideoPlayer from "../tsl-video-player/TslVideoPlayer.vue";

import ptz from "./child/ptz";
import quality from "./child/quality";

export default {
  name: "TslVideoControl",
  componentName: "TslVideoControl",
  components: { tslVideoPlayer, ptz, quality },
  props: {
    // 搜索值返回的列表
    searchValueList: {
      type: Array,
      default: ()=>[],
    },
    // 树资源列表
    videoResourcesTree: {
      type: Array,
      default: ()=>[],
    },
    // 分组资源列表
    videoGroupList: {
      type: Array,
      default: ()=>[],
    },
    // 当前需要播放的视频地址
    currentPlayList: {
      type: Array,
      default: ()=>[],
    },
    config: {
      type: Object,
      default: () => {
        return {
          isShowGroup: true, // 是否显示分组预案
          isShowQuality: false, // 是否显示质量调节
          isShowPTZ: false, // 是否显示PTZ
          defaultExpandAllGroup: false, // 默认打开全部分组资源
          defaultExpandAll: true, // 默认打开全部树资源
          maxGridNumber: 6, // 最大是6宫格还是9宫格
          isShowTreeGroup: false, // 是否显示树资源处的“上一组”和“下一组”功能
          isShowBackTime: false, // 是否显示回放时间组
        };
      },
    },
  },
  data() {
    return {
      // 单个视频的使用
      mainSrc: "",
      otherSrc: "",

      // 看用户传的是九宫格还是六宫格
      listGrid: [],
      // 默认九宫格
      listGridCopy: [
        {
          type: 1,
          title: "单个",
          imgSrc1: require("./imgs/middle1.png"),
          imgSrc2: require("./imgs/middle1_active.png"),
        },
        {
          type: 4,
          title: "4宫格",
          imgSrc1: require("./imgs/middle2.png"),
          imgSrc2: require("./imgs/middle2_active.png"),
        },
        {
          type: 6,
          title: "6宫格",
          imgSrc1: require("./imgs/middle4.png"),
          imgSrc2: require("./imgs/middle4_active.png"),
        },
        {
          type: 9,
          title: "9宫格",
          imgSrc1: require("./imgs/middle3.png"),
          imgSrc2: require("./imgs/middle3_active.png"),
        },
      ],
      // 回放按钮
      listGridBackControl: [
        {
          title: "回放30s",
          imgSrc1: require("./imgs/right3.png"),
          imgSrc2: require("./imgs/right3_active.png"),
          time: "30",
        },
        {
          title: "回放1m",
          imgSrc1: require("./imgs/right4.png"),
          imgSrc2: require("./imgs/right4_active.png"),
          time: "60",
        },
        {
          title: "回放2m",
          imgSrc1: require("./imgs/right5.png"),
          imgSrc2: require("./imgs/right5_active.png"),
          time: "120",
        },
        {
          title: "回放3m",
          imgSrc1: require("./imgs/right6.png"),
          imgSrc2: require("./imgs/right6_active.png"),
          time: "180",
        },
        {
          title: "回放5m",
          imgSrc1: require("./imgs/right8.png"),
          imgSrc2: require("./imgs/right8_active.png"),
          time: "300",
        },
      ],
      currentSearchValueIndex: -1, // 当前选的是第几个搜索列表中的项
      currentGridTypeIndex: 0, // 当前选的是第几个宫格
      currentGridBackIndex: -1, // 当前选的是回放几秒
      gridVideoList: [1], // 当前所有视频列表
      currentPlayIndex: 0, // 当前播放的是第几个视频
      showFullScreen: false, // 是否全屏

      // 右边数据
      currentNavIndex: 0, // 当前是选择“视频资源”还是“分组预案”
      currentControlNavIndex: 0, // 当前选择的是“历史回放”还是“PTZ”
      searchValue: "", // 搜索值
      currentShowTree: true, // 当前显示树资源还是显示搜索列表【默认为树】
      videoGroupData: this.videoGroupList,
      videoGroupDataCopy: [], // 备份
      currentClickItemInfo: "", // 当前点击的树资源的信息
      filterList: [], // 当前选择了哪个组【仅在“上一组”“下一组”模块使用】
      filterListIndex: 0, // 当前选择了该组的第几个【仅在“上一组”“下一组”模块使用】
      // 树资源配置
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "isLeaf",
      },
      form: {
        startTime: "",
        endTime: "",
      },
    };
  },
  mounted() {
    this.initFn();
  },
  watch: {
    searchValueList: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
    videoResourcesTree: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
    videoGroupList: {
      handler(val) {
        this.initVideoGroupList();
      },
      deep: true,
      immediate: true,
    },
    maxGridNumber: {
      handler(val) {
        this.initGrid();
      },
      deep: true,
      immediate: true,
    },
    currentPlayList: {
      handler(val) {
        if (val.length) {
          this.addGridPlay();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initFn() {
      this.escListen();
      this.changeNavIndexFn(0);
    },
    // 初始化9宫格
    initGrid() {
      let _gridNumber = controlFn.length2number(this.config.maxGridNumber);
      let index = this.listGridCopy.findIndex((v) => v.type === _gridNumber);
      this.listGrid = this.listGridCopy.slice(0, index + 1);
    },
    /**
     * 添加9宫格视频
     * 1. 判断如果有未关闭的视频先关闭
     * 2. 将传入的视频地址和树资源处的单项信息放进视频列表数组
     * 3. 刷新视频列表
     * 4. 初始化视频
     *
     * 如果传过来是有数据，而此时未播放，证明是刚打开
     * 如果传过来是空数据，而此时正在播放，证明需要关闭
     */
    addGridPlay() {
      let ref = this.$refs["video-item-" + this.currentPlayIndex][0];
      if (
        this.currentPlayList[this.currentPlayIndex].length == 0 &&
        ref.mainSrc.length
      ) {
        ref.closeVideo("auto");
      }
      if (this.currentPlayList[this.currentPlayIndex].length) {
        this.gridVideoList[this.currentPlayIndex] = Object.assign(
          {
            mainSrc: this.currentPlayList[this.currentPlayIndex],
          },
          this.currentClickItemInfo
        );
        this.refreshVidoList();
        ref.init();
        if (this.gridVideoList.length - 1 > this.currentPlayIndex) {
          ++this.currentPlayIndex;
        }
      }
    },
    // 懒加载树资源
    loadNode(node, resolve) {
      if (node.level === 0) {
        resolve(node.data);
        return;
      }
      if (node.data.children) {
        resolve(node.data.children);
        return;
      }
      if (node.data.isLeaf) {
        resolve([]);
        return;
      }
      this.$emit("treeLazy", node, resolve);
    },
    // 监听ESC键
    escListen() {
      document.addEventListener(
        "keydown",
        (e) => {
          if (e.which == 27) {
            this.showFullScreen = false;
          }
        },
        false
      );
    },
    changeCurrentPlayIndexFn(index) {
      this.currentPlayIndex = index;
    },
    // 改成9宫格或4宫格
    changeGridType(index, data = null) {
      this.closeAllFn();
      this.currentGridTypeIndex = index;
      let _length = this.listGrid[index].type;
      this.gridVideoList = new Array(_length).fill(1);
      this.$nextTick(() => {
        if (data) {
          data.forEach((v, index) => {
            ++this.currentPlayIndex;
            this.gridVideoList[index] = {
              mainSrc: v.mainSrc,
              otherSrc: v.otherSrc,
            };
          });
        }
      });
    },
    // 改成回放几秒
    changeGridBack(index) {
      this.checkEmptyVideo().then(() => {
        this.currentGridBackIndex =
          this.currentGridBackIndex === index ? -1 : index;
      });
    },
    // 左下角全屏方法
    fullScreenFn() {
      this.showFullScreen = true;
    },
    save() {
      this.$emit("save", this.gridVideoList);
    },
    // 关闭单个
    closeOneFn() {
      let ref = this.$refs["video-item-" + this.currentPlayIndex];
      if (ref) {
        ref[0].closeVideo();
        --this.currentPlayIndex;
      }
      if (this.currentPlayIndex == -1) {
        this.currentPlayIndex = 0;
      }
    },
    // 关闭全部
    closeAllFn() {
      this.gridVideoList.forEach((val, index) => {
        let ref = this.$refs["video-item-" + index][0];
        ref.closeVideo();
      });
      this.currentPlayIndex = 0;
    },
    // 大的截图功能
    screenshotsFn() {
      let _this=this
      const ref = this.$refs.ref_show; // 截图区域

      setTimeout(() => {
        html2canvas(ref, { backgroundColor: "#142E48" })
          .then((canvas) => {
            let dataURL = canvas.toDataURL("image/png");
            let creatDom = document.createElement("a");
            document.body.appendChild(creatDom);
            creatDom.href = dataURL;
            creatDom.download = "截图_" + +new Date();
            creatDom.click();
          })
          .catch((err) => {
            _this.$message({
              message: "图片生成失败，请重试",
              type: "error",
            });
          });
      }, 500);
    },
    // 切换“视频资源”或“分组预案”
    changeNavIndexFn(index) {
      this.currentNavIndex = index;
    },
    // 切换“历史回看”或“PTZ”
    changeControlIndexFn(index) {
      this.currentControlNavIndex = index;
    },
    // 刷新视频列表
    refreshVidoList() {
      this.$set(
        this.gridVideoList,
        this.currentPlayIndex,
        this.gridVideoList[this.currentPlayIndex]
      );
    },
    // 点击子节点
    handleNodeClick(data, info) {
      if (!info.childNodes.length) {
        this.currentClickItemInfo = Object.assign(data, { level: info.level });
        this.$emit("clickItem", data);
      }
    },
    // 点击搜索列表的子节点
    clickSearchItem(data, index) {
      this.currentSearchValueIndex = index;
      this.$emit("clickItem", data);
    },
    // 搜索框输入事件
    searchVideoFn() {
      if (this.currentNavIndex === 0) {
        if (this.searchValue.length) {
          this.currentShowTree = false;
          this.$emit("search", this.searchValue);
        } else {
          this.currentShowTree = true;
        }
      } else {
        let list = [];
        this.videoGroupDataCopy.map((v) => {
          if (v.label.includes(this.searchValue)) {
            list.push(v);
          } else if (
            v.children.filter((i) => i.label.includes(this.searchValue)).length
          ) {
            list.push(v);
          }
        });
        this.videoGroupData = list;
      }
    },
    // 递归查询播放最后一个摄像机的组
    getCode(data, id) {
      data.map((item, index) => {
        if (item.id === id) {
          this.filterList = data;
          this.filterListIndex = index;
          return;
        }
        if (item.children && item.children.length > 0) {
          this.getCode(item.children, id);
        }
      });
    },
    // 检查当前是否是空视频
    checkEmptyVideo() {
      return new Promise((resolve, reject) => {
        if (
          this.currentPlayIndex === 0 &&
          !this.gridVideoList[this.currentPlayIndex].mainSrc
        ) {
          this.$message.warning("请先选择小视频播放地址");
        } else {
          resolve();
        }
      });
    },

    /**
     * 上一个、下一个、上一组、下一组切换视频方法
     * 0---------上一个
     * 1---------下一个
     * 2---------上一组
     * 3---------下一组
     */
    changeT_my(index) {
      this.checkEmptyVideo().then(() => {
        this.getCode(this.videoResourcesTree, this.currentClickItemInfo.id);
        switch (index) {
          case 0:
            if (this.filterListIndex === 0) {
              return this.$message.warning(
                "已到最前面一项，请重新选择播放视频"
              );
            } else {
              --this.filterListIndex;
              this.handleNodeClick(this.filterList[this.filterListIndex], {
                level: this.currentClickItemInfo.level,
                childNodes: [],
              });
            }
            break;

          case 1:
            if (this.filterListIndex === this.filterList.length - 1) {
              return this.$message.warning(
                "已到最后面一项，请重新选择播放视频"
              );
            } else {
              ++this.filterListIndex;
              this.handleNodeClick(this.filterList[this.filterListIndex], {
                level: this.currentClickItemInfo.level,
                childNodes: [],
              });
            }
            break;
          case 2:
            console.log(this.filterList, this.filterListIndex);
            break;
          case 3:
            break;

          default:
            break;
        }
      });
    },
    // 回放
    onSubmit() {
      this.checkEmptyVideo().then(() => {
        // if(!this.form.startTime){
        //   return this.$message.warning("请选择开始时间");
        // }
        // if(!this.form.endTime){
        //   return this.$message.warning("请选择结束时间");
        // }
        this.$emit(
          "playback",
          this.form,
          this.gridVideoList[this.currentPlayIndex]
        );
      });
    },

    // 处理分组资源列表
    initVideoGroupList() {
      this.videoGroupData = this.videoGroupData.map((v) => {
        v.isOpen = this.config.defaultExpandAllGroup;
        return v;
      });
      this.videoGroupDataCopy = JSON.parse(JSON.stringify(this.videoGroupData));
    },
    // 切换分组资源开关状态
    changeGroupStatus(index) {
      this.videoGroupData[index].isOpen = !this.videoGroupData[index].isOpen;
      this.$set(this.videoGroupData, index, this.videoGroupData[index]);
    },
    // 播放分组预案
    playGroup(item, index1) {
      this.$confirm("确认使用该预案？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let _length = item.children.length;
          let _gridNumber = controlFn.length2number(_length);
          let index = this.listGrid.findIndex((v) => v.type === _gridNumber);
          this.changeGridType(index, item.children);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 点击了视频的关闭按钮
    closeItemVideoFn(index) {
      this.$emit("closeItemVideo", index);
    },
  },
  beforeDestroy() {},
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/deep/ .el-tree {
  background-color: transparent;
  color: #fff;
  height: 28vw;
  overflow: auto;
}
/deep/ .el-tree-node__label {
  font-size: 0.9vw;
}

/deep/ .el-tree-node {
  padding: 0.2vw 0;
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: transparent;
}
/deep/ .el-tree-node :hover {
  background-color: transparent;
}

/deep/ .el-tree-node__content :hover {
  background-color: #f00;
}

/deep/ .expanded + .el-tree-node__label::before {
  content: "";
  display: inline-block;
  width: 0.78vw;
  height: 0.78vw;
  background: url("./imgs/icon-video-building.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 0.26vw;
}
/deep/ .is-leaf + .el-tree-node__label::before {
  content: "";
  display: inline-block;
  width: 0.78vw;
  height: 0.78vw;
  background: url("./imgs/icon-video-monitoring.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 0.26vw;
}
/deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: transparent;
}
/deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content
  .el-tree-node__label {
  background-color: #f00;
}
/deep/ .is-leaf:hover {
  background-color: transparent;
}
/deep/ .el-input {
  font-size: 0.9vw;
  height: 2vw;
  line-height: 2vw;
}

/deep/ .el-input__inner {
  background-color: transparent;
  color: #fff;
}
/deep/ .bottom-control .el-input__inner {
  border: none;
}
</style>
<style>
.el-picker-panel {
  background: #13204a;
  border: 1px solid rgba(186, 210, 229, 0.3);
}
.el-picker-panel__body {
  background: #13204a;
  border: 1px solid rgba(186, 210, 229, 0.3);
}
.el-date-picker__time-header {
  border-bottom: none;
}
.el-time-panel .el-popper {
  background: #13204a;
  border: 1px solid rgba(186, 210, 229, 0.3);
}
.el-time-panel__content {
  background: #13204a;
  border: 1px solid rgba(186, 210, 229, 0.3);
}
.el-input__inner {
  background: #13204a;
}
.el-picker-panel__footer {
  background: #13204a;
  border-color: none;
  background-color: none;
  border: 1px solid rgba(186, 210, 229, 0.3);
}
.el-button + .el-button {
  background: rgba(40, 191, 255, 0.3);
  border: 1px solid #51cfff;
}
.el-date-picker__header-label {
  color: #fff;
}
.el-date-picker .el-picker-panel__content {
  border: 1px solid rgba(186, 210, 229, 0.3);
}
.el-date-table th {
  color: #fff;
  border-bottom: none;
}
li {
  list-style-type: none;
}
</style>
<style lang="scss" scoped>
.video-control-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  color: #fff;
  list-style: none;

  main {
    width: 79.5%;
    height: 100%;
    background-color: #0f1a30;
    padding: 0.8%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .video-list {
      height: 94%;
      display: grid;
      grid-gap: 1%;
      border: 1px solid rgba(255, 255, 255, 0.2);
      li {
        width: 100%;
        height: 100%;
        &.play {
          border: 1px solid #ffd800;
        }
      }
      &.video-list1 {
        grid-template-columns: repeat(1, 1fr);
      }
      &.video-list4 {
        grid-template-columns: repeat(2, 1fr);
      }
      &.video-list6 {
        grid-template-columns: repeat(3, 1fr);
        li:nth-child(1) {
          grid-column-start: 1;
          grid-column-end: 3;
          grid-row-start: 1;
          grid-row-end: 3;
        }
      }
      &.video-list9 {
        grid-template-columns: repeat(3, 1fr);
      }
      &.full-screen {
        position: fixed;
        top: 0;
        left: 0;
        background: #0f1a30;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
    }
    .video-control {
      display: flex;
      height: 2vw;
      justify-content: space-between;
      .list-control {
        display: flex;
        i {
          width: 2vw;
          height: 2vw;
          display: inline-block;
          margin: 0 1.5vw;
          cursor: pointer;

          &.full-screen {
            background-image: url("./imgs/fullscreen.png");
            background-size: 100% 100%;
            &:hover {
              background-image: url("./imgs/fullscreen_active.png");
            }
          }
          &.screenshots {
            background-image: url("./imgs/screenshots.png");
            background-size: 100% 100%;
          }
        }
        .video-numbers-list {
          display: flex;
          justify-content: space-evenly;
          border-left: 1px solid #009fe8;
          border-right: 1px solid #009fe8;
          li {
            width: 2vw;
            height: 2vw;
            margin: 0 1vw;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  aside {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    nav.menu {
      display: flex;
      li {
        cursor: pointer;
        position: relative;
        width: 5vw;
        height: 2vw;
        text-align: center;
        line-height: 2vw;
        z-index: 0;
        margin-right: 0.5vw;
        font-size: 1vw;
        cursor: pointer;
        &.active::before,
        &:hover::before {
          background-color: #0680fd;
        }
        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          top: 0;
          right: 0;
          left: 0;
          z-index: -1;
          background-color: #113567;
          transform: skewX(-25deg);
        }
      }
    }
    .top-tree {
      background-color: #0f1a30;
      padding: 5%;
      &.height-80 {
        height: 71%;
        .video-resources {
          height: 85%;
          max-height: 100%;
        }
      }
      &.height-100 {
        height: 100%;
        .video-resources {
          height: 90%;
          max-height: 100%;
        }
      }
      .input-box {
        margin: 0.5vw 0;
        input {
          width: 100%;
          background-color: transparent;
        }
      }
      .video-resources {
        overflow: auto;
        .video-search-list {
          li {
            text-align: left;
            padding-top: 0.5vw;
            cursor: pointer;
            font-size: 0.9vw;
            color: rgba(255, 255, 255, 0.8);
            &.active {
              color: #ffd800;
            }
            &:hover {
              color: #ffd800;
            }
            &:hover::before {
              background: url("./imgs/icon-video-monitoring-active.png")
                no-repeat;
              background-size: 100% 100%;
            }
            &::before {
              content: "";
              display: inline-block;
              width: 0.9vw;
              height: 0.9vw;
              background: url("./imgs/icon-video-monitoring.png") no-repeat;
              background-size: 100% 100%;
              margin-right: 0.26vw;
            }
          }
        }
        .group-list {
          li {
            padding-top: 0.5vw;
            cursor: pointer;
            font-size: 0.72vw;
            color: rgba(255, 255, 255, 0.8);
            .name {
              font-size: 0.9vw;
              height: 1vw;
              line-height: 1vw;
              cursor: pointer;
              width: 100%;
              text-align: left;
              &.active::before {
                background: url("./imgs/icon-video-folder-active.png") no-repeat;
                background-size: 100% 100%;
              }
              &::before {
                content: "";
                display: inline-block;
                width: 0.78vw;
                height: 0.78vw;
                background: url("./imgs/icon-video-folder.png") no-repeat;
                background-size: 100% 100%;
                margin-right: 0.26vw;
              }
              i {
                display: inline-block;
                width: 1vw;
                height: 0.78vw;
                margin: 0.15vw 0;
                background: url("./imgs/icon-video-play.png") no-repeat;
                background-size: 100% 100%;
                margin-right: 2.6vw;
                float: right;
              }
            }
            .children-box {
              margin: 0 0 0.5vw 1vw;
              text-align: left;

              .item {
                margin: 0.5vw 0 0 0;
                cursor: pointer;
                font-size: 0.9vw;
                &::before {
                  content: "";
                  display: inline-block;
                  width: 0.78vw;
                  height: 0.78vw;
                  background: url("./imgs/icon-video-monitoring.png") no-repeat;
                  background-size: 100% 100%;
                  margin-right: 0.26vw;
                }
              }
            }
          }
        }
        .tree-content {
          position: relative;
          height: 28.125vw;
          .group {
            position: absolute;
            bottom: 0;
            left: 0;
            .btn {
              width: 4.16vw;
            }
          }
        }
      }
    }
    .bottom-control {
      background-color: #0f1a30;
      height: 27.72%;
      padding: 7%;
      h6 {
        font-size: 0.83vw;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
      }
      ul {
        li {
          margin-top: 0.41vw;
          &:last-child {
            text-align: right;
          }
          p {
            margin: 0 0 0.26vw 0;
            text-align: left;
            font-size: 0.83vw;
          }
          .block {
            background-size: 100% 100%;
            position: relative;
            height: 2.1vw;
            box-sizing: border-box;
            padding: 0 0.5vw;
            &:before {
              content: "";
              width: 0.5vw;
              height: 100%;
              background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAkCAYAAAHdr3vjAAAAAXNSR0IArs4c6QAAAUNJREFUKBXNUrtKQ0EQnZm7VyJ4t/ATLJQIVukFQQSbYBK79IKFpYUPro+QaKmN4CeIEMHGwn/wC/QLAkqMXdYd70zYPIRIxMYtds+ZmTM7szsAspLiKZMA3QQA2PLZEQHDc48OdmZGZaIS0BcpsJvn65CU6hzl8qtE/OnSQeohhAhVAjILmsuWGicCjCTFaZwVotH+o/vaJwJkqacHfyKGTFTwiEuqaTcPntDDnBDtQFoMScacdqN2YSuNS3FHU/MrDwj+MZdfQyMW9nAIEfsJy/lr2IwBxC6Rqbbv9m6lgN+s8MRBM1JNMMpJtli7UgNhUti6joOTGHhbP8g599J6W7Tl+o44MYxCiOzcpyj3jb8jRH4//6diqEHkbPp2kSiJY3NjELGTkQqauOWdW35v7h+P9DTxs+tEiTR75TRT9bN8AQ5YVNK4LeU6AAAAAElFTkSuQmCC)
                center center no-repeat;
              background-size: 100% 100%;
              position: absolute;
              top: 0;
              left: 0;
            }
            &:after {
              content: "";
              width: 0.5vw;
              height: 100%;
              background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAkCAYAAAHdr3vjAAAAAXNSR0IArs4c6QAAAU9JREFUKBXNUr1KA0EQntkETXOLBisLW4ur8gZaqEUgchcCER/CSgsRjyTcGSH4HhZaiBZW9oKdTyJY3M/uuLPnJhdiwEZwitmd75ufb5YFGV5FAkA8G6cPjHPmBYkWoAq0mHW1hr9f0oZ8EVxqEnYqRYb1DkcZWMqmys5oKAjgYtam7LXq7624WeX5LQVAduMT0MU6MkJFEQFQKcMVzI1cHrh0oyd+q6SJB6twpnKaWLkQESLHMhy3qcgesdkd+3mevTNoGa8zNKuZ12Pn7C+DtTDeNaKOeZZVsHk02fhM0y03/Ben23pOZ7XONnaADOI+CvQoV606gzJMnhBrkc7TFik4Y8x+hY/787bOs1cTW9AS7H6ypcP/J4Gyd9MElfapUA3zGyf8I3mv6Vt5vettUOoUNd0B6duFpWWQDBhcXBBRM1F3GRywEelLcwy+AHWXZv1uZOIUAAAAAElFTkSuQmCC)
                center center no-repeat;
              background-size: 100% 100%;
              position: absolute;
              top: 0;
              right: 0;
            }
            > div {
              width: 100%;
              border-top: 1px solid rgba(0, 190, 255, 0.6);
              border-bottom: 1px solid rgba(0, 190, 255, 0.6);
              box-sizing: border-box;
            }
          }
          .btn-play {
            width: 5.3vw;
            height: 2vw;
            text-align: center;
            border: 1px solid #009fe8;
            line-height: 2vw;
            cursor: pointer;
            background-color: transparent;
            color: #fff;
            font-size: 1vw;
          }
        }
      }
      .ptz {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.btn-control {
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 2vw;
  .btn {
    width: 5.3vw;
    height: 2vw;
    text-align: center;
    border: 1px solid #009fe8;
    line-height: 2vw;
    cursor: pointer;
    font-size: 1vw;
  }
}
</style>
