<template>
  <el-dialog
    width="75%"
    height="70%"
    top=" calc(50vh - 440px)"
    class="dialog-mini body-small addWindow"
    v-el-drag-dialog
    custom-class="no-header-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible="visible"
  >
    <div class="content">
      <div class="c-header">
        <div style="width: 80px"></div>
        <div class="header-title">查播视频和云平台功能</div>
        <div class="header-close">
          <img
            src="/img/monitoringList/close.png"
            style="cursor: pointer"
            @click="closeVisible"
          />
        </div>
      </div>
      <div class="c-body">
        <div class="body-left">
          <div class="b-l-top">视频分组</div>
          <div class="b-l-search">
            <input v-model="searchVal" />
            <div @click="selectTree">
              <i class="el-icon-search"> </i>
              <span style="margin-left: 5px">搜索</span>
            </div>
          </div>
          <el-tree
            :data="list"
            :lazy="true"
            :props="props"
            style="border: 1px solid white; width: 90%; margin-top: 10px"
            :load="treeExpand"
            @node-click="treeClick"
            :filter-node-method="filterNode"
            ref="treeFilt"
          ></el-tree>
        </div>
        <div class="body-video">
          <div
            class="video-item"
            v-for="(item, index) in videoList"
            :key="index"
            :style="{
              border:
                index == nowSelectVideo
                  ? '1px solid rgba(255, 217, 0, 0.651)'
                  : '1px solid rgba(204, 204, 204, 0.479)',
            }"
            @click="checkVideo(item, index)"
          >
            <video
              :id="'video' + index"
              class="video"
              ref="videoPlay"
              @ontimeupdate="progress"
              @dblclick="dblVideo"
            ></video>
          </div>
        </div>
        <div class="body-right">
          <div class="body-item">
            <div class="item-title">
              <div>云视频操作平台</div>
              <img src="/img/monitoringList/fz.png" />
            </div>
            <div class="item-body">
              <div class="line">
                <div class="line-item" @click="connect">连接平台</div>
                <div class="line-item" @click="pausevideo">停止视频</div>
              </div>
              <div class="line">
                <div class="line-item" @click="startcall">开始喊话</div>
                <div class="line-item" @click="stopcall">停止喊话</div>
              </div>
              <div class="line">
                <div
                  class="line-item"
                  @mousedown="zoomcontrol('zoomin')"
                  @mouseup="zoomcontrol('stop')"
                >
                  放大图像
                </div>
                <div
                  class="line-item"
                  @mousedown="zoomcontrol('zoomout')"
                  @mouseup="zoomcontrol('stop')"
                >
                  缩小图像
                </div>
              </div>
              <div class="line">
                <div
                  class="line-item"
                  @mousedown="focuscontrol('near')"
                  @mouseup="focuscontrol('stop')"
                >
                  拉近焦距
                </div>
                <div
                  class="line-item"
                  @mousedown="focuscontrol('faraway')"
                  @mouseup="focuscontrol('stop')"
                >
                  推远焦距
                </div>
              </div>
              <div class="line">
                <div
                  class="line-item"
                  @mousedown="aperture('augment')"
                  @mouseup="aperture('stop')"
                >
                  增大光圈
                </div>
                <div
                  class="line-item"
                  @mousedown="aperture('minish')"
                  @mouseup="aperture('stop')"
                >
                  减小光圈
                </div>
              </div>
            </div>
          </div>
          <div class="body-item">
            <div class="item-title">
              <div>设置预置位</div>
              <img src="/img/monitoringList/fz.png" />
            </div>
            <div class="item-body">
              <div class="line">
                <div class="line-item">连接平台</div>
                <div class="line-item">停止视频</div>
              </div>
              <div class="line">
                <div class="line-item">开始喊话</div>
                <div class="line-item">停止喊话</div>
              </div>
            </div>
          </div>
          <div class="body-item">
            <div class="item-title">
              <div>旋转云平台</div>
              <img src="/img/monitoringList/fz.png" />
            </div>
            <div class="item-body">
              <div class="line">
                <div
                  class="line-item"
                  @mousedown="turncontrol('up')"
                  @mouseup="turncontrol('stop')"
                >
                  上
                </div>
                <div
                  class="line-item"
                  @mousedown="turncontrol('down')"
                  @mouseup="turncontrol('stop')"
                >
                  下
                </div>
              </div>
              <div class="line">
                <div
                  class="line-item"
                  @mousedown="turncontrol('left')"
                  @mouseup="turncontrol('stop')"
                >
                  左
                </div>
                <div
                  class="line-item"
                  @mousedown="turncontrol('right')"
                  @mouseup="turncontrol('stop')"
                >
                  右
                </div>
              </div>
            </div>
          </div>

          <div class="body-item">
            <div class="item-title">
              <div>云存储操作</div>
              <img src="/img/monitoringList/fz.png" />
            </div>
            <div class="item-body">
              <div class="line">
                <div class="line-item" @click="startmanual">开始云抓拍</div>
                <div class="line-item" @click="stopmanual(yzpId)">
                  停止云抓拍
                </div>
              </div>
              <div class="line">
                <div class="line-item" @click="startstorage">开始云录像</div>
                <div class="line-item" @click="stopmanual(ylxId)">
                  停止云录像
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { postMethodCommon } from "@/api/common.js";
import appConfig from "../../../../public/config/app.json";
import axios from "axios";
import videoConfig from "../lib/videoConfig.json";
import flvjs from "flv.js";
import talk from "../lib/talk.js";
import alawmulaw from "../lib/alawmulaw.min.js";
export default {
  name: "monitoringList",
  props: {},
  data() {
    return {
      token: "",
      list: [],

      props: {
        isLeaf: "leaf",
      },
      flvPlayer: null,
      nowSelect: null,
      videoList: [null, null, null, null],
      videoDataList: [null, null, null, null],
      nowSelectVideo: 0,
      visible: false,
      yzpId: "",
      ylxId: "",
      searchVal: "",
    };
  },
  watch: {},
  created() {},
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    selectTree() {
      this.$refs.treeFilt.filter(this.searchVal);
    },
    // 双击全屏
    dblVideo() {
      let videoElement = document.getElementById("video" + this.nowSelectVideo);
      if (videoElement.requestFullscreen) {
        if (document.fullscreenElement) {
          document.exitFullscreen();
        } else {
          videoElement.requestFullscreen();
        }
      } else if (videoElement.mozRequestFullScreen) {
        if (document.mozFullScreenElement) {
          document.mozCancelFullScreen();
        } else {
          videoElement.mozRequestFullScreen();
        }
      } else if (videoElement.webkitRequestFullscreen) {
        if (document.webkitFullscreenElement) {
          document.webkitExitFullscreen();
        } else {
          videoElement.webkitRequestFullscreen();
        }
      } else if (videoElement.msRequestFullscreen) {
        if (document.msFullscreenElement) {
          document.msExitFullscreen();
        } else {
          videoElement.msRequestFullscreen();
        }
      }
    },
    // 云抓拍
    startmanual() {
      if (!this.nowSelect) return;
      axios({
        method: "post",
        url: `${videoConfig.q2http_url}CSS/C_CSS_StartManualSnapshot`,
        params: { token: this.token },
        data: {
          puid: this.nowSelect.puid,
          idx: this.nowSelect.Idx,
          stream: 0,
        },
      }).then((res) => {
        this.yzpId = res.data.ID;
      });
    },
    // 云录像
    startstorage() {
      if (!this.nowSelect) return;
      axios({
        method: "post",
        url: `${videoConfig.q2http_url}CSS/C_CSS_StartManualStorage`,
        params: { token: this.token },
        data: {
          puid: this.nowSelect.puid,
          idx: this.nowSelect.Idx,
          duration: 5,
          reserveDay: 30,
          fileLength: 15,
          type: 0,
        },
      }).then((res) => {
        this.ylxId = res.data.Param.ID;
      });
    },
    // 停止抓拍、云录像
    stopmanual(id) {
      if (!this.nowSelect) return;
      axios({
        method: "post",
        url: `${videoConfig.q2http_url}CSS/C_CSS_StopManualStorage`,
        params: { token: this.token },
        data: {
          id: id,
        },
      }).then((res) => {
        this.ylxId = res.data.Param.ID;
      });
    },
    showVisible() {
      this.connect();
      this.visible = true;
    },
    closeVisible() {
      this.stopcall();
      this.visible = false;
    },
    loadVideoAndShow(e) {
      this.showVisible();
      this.$nextTick(() => {
        let that = this;
        console.log(e);
        let url = `${videoConfig.q2http_url}stream.flv?puid=${e.PUID}&idx=${e.Idx}&stream=0&token=${e.token}`;
        // 提前结束通话通道
        this.stopcall();
        this.nowSelect = {
          ...e,
          puid: e.PUID,
          Idx: e.Idx,
        };
        if (flvjs.isSupported()) {
          that.videoDataList[that.nowSelectVideo] = e;
          if (that.videoList[that.nowSelectVideo]) {
            that.videoList[that.nowSelectVideo].pause();
            that.videoList[that.nowSelectVideo].unload();
            that.videoList[that.nowSelectVideo].detachMediaElement();
            that.videoList[that.nowSelectVideo].destroy();
          }
          let videoElement = document.getElementById(
            "video" + that.nowSelectVideo
          );
          console.log(videoElement);
          that.videoList[that.nowSelectVideo] = flvjs.createPlayer(
            {
              type: "flv",
              url: url,
              isLive: true,
              hasAudio: false,
            },
            {
              cors: true,
              enableWorker: false,
              autoCleanupSourceBuffer: true, //清理缓冲区
              enableStashBuffer: false,
              stashInitialSize: 128, // 减少首桢显示等待时长
              statisticsInfoReportInterval: 600,
            }
          );
          that.videoList[that.nowSelectVideo].attachMediaElement(videoElement);
          that.videoList[that.nowSelectVideo].load();
          that.videoList[that.nowSelectVideo].play();
          that.videoList[that.nowSelectVideo].on(
            flvjs.Events.ERROR,
            (errType, errDetail) => {
              console.log(errType);
              console.log(errDetail);
            }
          );
        }
      });
    },
    // 云台上下
    turncontrol(option) {
      if (!this.nowSelect) return;
      if (option == "up") {
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}PTZ/C_PTZ_Turn`,
          params: { token: this.token },
          data: {
            puid: this.nowSelect.puid,
            idx: this.nowSelect.Idx,
            motion: "up",
          },
        }).then((res) => {
          console.log("上返回", res.data);
        });
      } else if (option == "down") {
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}PTZ/C_PTZ_Turn`,
          params: { token: this.token },
          data: {
            puid: this.nowSelect.puid,
            idx: this.nowSelect.Idx,
            motion: "down",
          },
        }).then((res) => {
          console.log("下返回", res.data);
        });
      } else if (option == "left") {
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}PTZ/C_PTZ_Turn`,
          params: { token: this.token },
          data: {
            puid: this.nowSelect.puid,
            idx: this.nowSelect.Idx,
            motion: "left",
          },
        }).then((res) => {
          console.log("左返回", res.data);
        });
      } else if (option == "right") {
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}PTZ/C_PTZ_Turn`,
          params: { token: this.token },
          data: {
            puid: this.nowSelect.puid,
            idx: this.nowSelect.Idx,
            motion: "right",
          },
        }).then((res) => {
          console.log("右返回", res.data);
        });
      } else {
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}PTZ/C_PTZ_Turn`,
          params: { token: this.token },
          data: {
            puid: this.nowSelect.puid,
            idx: this.nowSelect.Idx,
            motion: "stop",
          },
        }).then((res) => {
          console.log("下返回", res.data);
        });
      }
    },
    // 光圈
    aperture(option) {
      if (!this.nowSelect) return;
      if (option == "augment") {
        let xml = `<?xml version="1.0" encoding="UTF-8"?>
                        <M Type="ComReq">
                            <C Type="G" Prio="1" EPID="${videoConfig.connParams.epid}" Lang="zh_CN">
                                <Res Type="IV" Idx="${this.nowSelect.Idx}" OptID="C_PTZ_AugmentAperture" Stream="0"><Param></Param></Res>
                            </C>
                        </M>`;
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}RawRequest`,
          params: {
            token: this.token,
            dstType: "201",
            dstID: this.nowSelect.puid,
          },
          data: { xml: xml },
        }).then((res) => {
          console.log("光圈放大返回", res.data);
        });
      } else if (option == "minish") {
        let xml = `<?xml version="1.0" encoding="UTF-8"?>
                        <M Type="ComReq">
                            <C Type="G" Prio="1" EPID="${videoConfig.connParams.epid}" Lang="zh_CN">
                                <Res Type="IV" Idx="${this.nowSelect.Idx}" OptID="C_PTZ_MinishAperture" Stream="0"><Param></Param></Res>
                            </C>
                        </M>`;
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}RawRequest`,
          params: {
            token: this.token,
            dstType: "201",
            dstID: this.nowSelect.puid,
          },
          data: { xml: xml },
        }).then((res) => {
          console.log("光圈缩小返回", res.data);
        });
      } else {
        let xml = `<?xml version="1.0" encoding="UTF-8"?>
                        <M Type="ComReq">
                            <C Type="G" Prio="1" EPID="${videoConfig.connParams.epid}" Lang="zh_CN">
                                <Res Type="IV" Idx="${this.nowSelect.Idx}" OptID="C_PTZ_StopApertureZoom" Stream="0"><Param></Param></Res>
                            </C>
                        </M>`;
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}RawRequest`,
          params: {
            token: this.token,
            dstType: "201",
            dstID: this.nowSelect.puid,
          },
          data: { xml: xml },
        }).then((res) => {
          console.log("光圈停止返回", res.data);
        });
      }
    },
    // 拉进推远焦点
    focuscontrol(option) {
      if (!this.nowSelect) return;
      let params = {
        puid: this.nowSelect.puid,
        idx: this.nowSelect.Idx,
      };
      if (option == "near") {
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}PTZ/C_PTZ_MakeFocusNear`,
          params: { token: this.token },
          data: params,
        }).then((res) => {
          console.log("拉进返回", res.data);
        });
      } else if (option == "faraway") {
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}PTZ/C_PTZ_MakeFocusFar`,
          params: { token: this.token },
          data: params,
        }).then((res) => {
          console.log("推远返回", res.data);
        });
      } else {
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}PTZ/C_PTZ_StopFocusMove`,
          params: { token: this.token },
          data: params,
        }).then((res) => {
          console.log("停止返回", res.data);
        });
      }
    },
    // 缩放放大功能
    zoomcontrol(option) {
      if (!this.nowSelect) return;
      let params = {
        puid: this.nowSelect.puid,
        idx: this.nowSelect.Idx,
      };
      if (option == "stop") {
        // 停止缩放
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}PTZ/C_PTZ_StopPictureZoom`,
          params: { token: this.token },
          data: params,
        }).then((res) => {
          console.log("停止返回", res.data);
        });
      } else if (option == "zoomin") {
        // 放大图像
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}PTZ/C_PTZ_ZoomInPicture`,
          params: { token: this.token },
          data: params,
        }).then((res) => {
          console.log("放大返回", res.data);
        });
      } else {
        // 缩小图像
        axios({
          method: "post",
          url: `${videoConfig.q2http_url}PTZ/C_PTZ_ZoomOutPicture`,
          params: { token: this.token },
          data: params,
        }).then((res) => {
          console.log("缩小返回", res.data);
        });
      }
    },
    // 开始喊话
    startcall() {
      if (!this.nowSelect) {
        return;
      }
      let data = this.nowSelect;
      var puid = data.puid;
      var idx = data.Idx;
      var name = puid + "_" + idx;
      console.log(name);
      startCall(
        videoConfig.q2http_url,
        videoConfig.websocket_url,
        this.token,
        puid,
        idx,
        name,
        (res) => {
          console.log("喊话回调", res);
        }
      );
    },
    // 结束喊话
    stopcall() {
      if (!this.nowSelect) {
        return;
      }
      let data = this.nowSelect;
      var puid = data.puid;
      var idx = data.Idx;
      var name = puid + "_" + idx;
      console.log(name);
      stopCall(name);
    },
    // 停止视频
    pausevideo() {
      if (this.videoList[this.nowSelectVideo]) {
        if (flvjs.isSupported) {
          this.videoList[this.nowSelectVideo].pause();
          this.videoList[this.nowSelectVideo].unload();
          this.videoList[this.nowSelectVideo].detachMediaElement();
          this.videoList[this.nowSelectVideo].destroy();
          this.videoList[this.nowSelectVideo] = null;
        }
        this.videoDataList[this.nowSelectVideo] = null;
      }
    },
    progress(e) {
      console.log("progress");
      var bf = e.srcElement.buffered;
      var currentTime = e.srcElement.currentTime;
      if (bf.length > 0) {
        let end = bf.end(0);
        if (end - currentTime > 1.5) {
          e.srcElement.currentTime = end - 0.1;
        }
      }
    },
    connect() {
      let params = {
        address: videoConfig.connParams.address,
        port: videoConfig.connParams.port,
        user: videoConfig.connParams.user,
        password: videoConfig.connParams.password,
        epid: videoConfig.connParams.epid,
        fixaddr: videoConfig.connParams.bfix,
      };
      axios({
        method: "post",
        url: `${videoConfig.q2http_url}login`,
        data: params,
      }).then((res) => {
        let data = res.data;
        this.token = data.token;
        this.getFacilityList(0, 200);
      });
    },
    getFacilityList(offset, count) {
      let that = this;
      axios({
        method: "get",
        url: `${videoConfig.q2http_url}CAS/C_CAS_QueryPUIDSets`,
        params: {
          offset: offset,
          count: count,
          token: that.token,
        },
      }).then((res) => {
        let data = res.data;
        data.map((item) => {
          item.id = item.$;
          item.label = item.Name;
        });
        this.list = data;
      });
    },
    treeExpand(node, resolve) {
      if (node.level === 0) {
        return;
      }
      let that = this;
      axios({
        method: "post",
        url: `${videoConfig.q2http_url}C_CAS_QueryPUIDRes`,
        params: {
          token: that.token,
        },
        data: {
          puid: node.data.id,
        },
      }).then((res) => {
        let data = res.data["Res"];
        let list = [];
        data.map((item) => {
          if (item.Type == "IV") {
            console.log(item);
            item.label = item.Name;
            item.id = item.Name;
            item.leaf = true;
            item.OnlineFlag = node.data.OnlineFlag;
            item.puid = node.data.id;
            list.push(item);
          }
        });
        resolve(list);
      });
    },
    treeClick(data, a, b) {
      let that = this;
      // 判断的是否是叶节点
      if (data.leaf) {
        console.log(data);
        if (data.OnlineFlag == "0") {
          this.$message.error("当前设备已下线！");
          return;
        }
        let url = `${videoConfig.q2http_url}stream.flv?puid=${data.puid}&idx=${data.Idx}&stream=0&token=${this.token}`;
        // 提前结束通话通道
        this.stopcall();
        this.nowSelect = data;
        if (flvjs.isSupported()) {
          that.videoDataList[that.nowSelectVideo] = data;
          if (that.videoList[that.nowSelectVideo]) {
            that.videoList[that.nowSelectVideo].pause();
            that.videoList[that.nowSelectVideo].unload();
            that.videoList[that.nowSelectVideo].detachMediaElement();
            that.videoList[that.nowSelectVideo].destroy();
          }
          let videoElement = document.getElementById(
            "video" + that.nowSelectVideo
          );
          console.log(videoElement);
          that.videoList[that.nowSelectVideo] = flvjs.createPlayer(
            {
              type: "flv",
              url: url,
              isLive: true,
              hasAudio: false,
            },
            {
              cors: true,
              enableWorker: false,
              autoCleanupSourceBuffer: true, //清理缓冲区
              enableStashBuffer: false,
              stashInitialSize: 128, // 减少首桢显示等待时长
              statisticsInfoReportInterval: 600,
            }
          );
          that.videoList[that.nowSelectVideo].attachMediaElement(videoElement);
          that.videoList[that.nowSelectVideo].load();
          that.videoList[that.nowSelectVideo].play();
          that.videoList[that.nowSelectVideo].on(
            flvjs.Events.ERROR,
            (errType, errDetail) => {
              console.log(errType);
              console.log(errDetail);
            }
          );
        }
      }
    },
    checkVideo(e, a) {
      this.nowSelectVideo = a;
      this.nowSelect = this.videoDataList[a];
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .no-header-dialog .el-dialog__header {
  display: none !important;
}
.el-table {
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    /*滚动条宽度*/
    height: 10px;
    /*滚动条高度*/
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: 0px 1px 3px #071e4a inset;
    /*滚动条的背景区域的内阴影*/
    border-radius: 10px;
    /*滚动条的背景区域的圆角*/
    background-color: rgba(0, 9, 34, 1);
    /*滚动条的背景颜色*/
  }

  /*定义滑块 内阴影+圆角*/
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    box-shadow: 0px 1px 3px #00a0e9 inset;
    /*滚动条的内阴影*/
    border-radius: 10px;
    /*滚动条的圆角*/
    background-color: rgba(0, 9, 34, 1);

    /*滚动条的背景颜色*/
  }
}
::v-deep .sticky {
  background: rgba(0, 9, 34, 0.6);
}

::v-deep .dialog-mini .el-dialog__header {
  background: rgba(10, 39, 78, 1);
  padding: 0px !important;
}

::v-deep .dialog-mini .el-dialog__header .el-dialog__title {
  color: #fff;
}

::v-deep .el-descriptions__body {
  background: rgba(0, 9, 34, 1);
  color: #fff;
}

::v-deep .el-descriptions-item__label.is-bordered-label {
  background: rgba(0, 9, 34, 0.6);
  color: #fff;
}

::v-deep .el-dialog {
  background-color: #ffffff00;

  background-image: url("/img/monitoringList/background.png");
  background-size: 100% 100%;
}
.content {
  height: 82vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2%;
}
.c-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.header-title {
  color: white;
  font-size: 33px;
}
.header-close {
  height: 100%;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 35px;
  }
}
.c-body {
  flex: 1;
  width: 96%;
  margin-top: 1%;
  display: flex;
  justify-content: space-between;
}
.body-left {
  width: 21%;
  border: 1px solid #0e4391;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.b-l-top {
  background: linear-gradient(to left, #091729 0%, #1968db 100%);
  width: 100%;
  height: 60px;
  border: 1px solid black;
  font-size: 28px;
  padding-left: 17px;
  line-height: 60px;
  color: white;
}
.b-l-search {
  width: 94%;
  display: flex;
  margin-top: 12px;
  input {
    width: 69%;
    color: white;
    background-color: #009fe900;
    border-left: 1px solid #0e4391;
    border-top: 1px solid #0e4391;
    border-bottom: 1px solid #0e4391;
    border-right: 0px;
    height: 43px;
  }
  div {
    width: 30%;
    background-color: #1970ee;
    height: 43px;
    border-radius: 0px 5px 5px 0px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }
}
.body-video {
  width: 55%;
  border: 1px solid #0e4391;
  display: flex;
  flex-wrap: wrap;
}
.video-item {
  width: 50%;
  height: 50%;
  border: 1px solid rgba(255, 217, 0, 0.651);
  position: relative;
}
.video {
  height: 100%;
  width: 100%;
  object-fit: fill;
  position: absolute;
}
.body-right {
  width: 21%;
}
.body-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item-title {
  height: 45px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  img {
    height: 26px;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  div {
    height: 45px;
    color: white;
    z-index: 2;
    font-size: 19px;
    display: flex;
    align-items: center;
    margin-left: 30px;
    position: absolute;
  }
}
.item-body {
  width: 100%;
  margin-top: 15px;
}
.line {
  width: 100%;
  display: flex;
}
.line-item {
  margin-left: 30px;
  width: 80px;
  height: 30px;
  margin-bottom: 10px;
  border: 1px solid #1551aa;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #1a6ce5;
  cursor: pointer;
}
::v-deep.el-tree {
  background-color: #ffffff00 !important;
  border: none !important;
}
::v-deep .el-tree-node__content:hover,
.el-upload-list__item:hover {
  background-color: #ffffff00 !important;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
  background-color: #ffffff00 !important;
}
</style>