<template>
  <div id="player-main">
    <div id="player"></div>
    <!-- 为每个窗口添加控制按钮容器 -->
    <div
      class="video-controls"
      v-for="i in maxWindows"
      :key="i"
      :id="'controls-' + i"
      :style="{ display: 'none' }"
    >
      <div class="controls-top">
        <div class="top-left">{{ videoNameUp(i - 1) }}</div>
        <div @click="stopPlay(i)" class="top-close">
          关闭
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="controls-bottom">
        <div></div>
        <div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="`${talkbackBegin ? '结束' : '开始'}对讲`"
            placement="top"
          >
            <div
              class="bgImage talkback"
              :class="{ talkback_active: talkbackBegin }"
              @click="isTalkback(i)"
            ></div>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            :content="`${recordingBegin ? '结束' : '开始'}录制`"
            placement="top"
          >
            <div class="bgImage transcribe" @click="isTranscribe(i)"></div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="`抓图`" placement="top">
            <div class="bgImage screenshot" @click="capture('JPEG', i)"></div>
          </el-tooltip>

          <!-- <div>流畅</div> -->
          <el-tooltip
            class="item"
            effect="dark"
            :content="`${!muted ? '关闭' : '开启'}音量`"
            placement="top"
          >
            <div
              @click="handleVolume(i)"
              :class="!muted ? 'openVolume' : 'disableVolume'"
              class="bgImage"
            ></div>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            :content="`${isFullScreen ? '退出' : '进入'}全屏模式`"
            placement="top"
          >
            <div
              class="bgImage"
              :class="isFullScreen ? 'exitFullScreen' : 'fullScreen'"
              @click="singleFullScreen(i)"
            ></div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="player-tool">
      <el-tooltip class="item" effect="dark" :content="`默认`" placement="top">
        <div class="bgImage splitscreen1" @click="onTwoSubmit(1)"></div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" :content="`2x2`" placement="top">
        <div class="bgImage splitscreen2" @click="onTwoSubmit(2)"></div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" :content="`4x4`" placement="top">
        <div class="bgImage splitscreen3" @click="onTwoSubmit(4)"></div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" :content="`停止所有播放`" placement="top">
        <div class="bgImage stopAll" @click="stopAllPlay"></div>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        :content="`${isFullScreen ? '退出' : '进入'}全屏模式`"
        placement="top"
      >
        <div
          class="bgImage"
          :class="isFullScreen ? 'exitFullScreen' : 'fullScreen'"
          @click="wholeFullScreen(i)"
        ></div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
// 请求工具
// import http from "@/http/http2.js";
import {
  getVideoItemInfoApi,
  getTalkURLsApi,
} from "@/assets/js/api/equipmentCenter/cameraList";
import reloadImg from "@/assets/images/iscImage/reload.png";
import moment from "moment";
export default {
  name: "hik",
  props: ["devList", "type", "isIframe", "shrinkCloseFlag"],
  data() {
    return {
      // 监控点编码
      code: "",
      // 播放器对象
      player: null,
      devH5List: [],
      numCount: 2,
      iWndIndex: 0,
      maxWindows: 16, // 最大窗口数
      recordingBegin: false,
      muted: true,
      talkbackBegin: false,
      playback: {
        startTime: "2023-08-16T00:00:00",
        endTime: "2023-08-16T23:00:00",
        valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
        seekStart: "2023-08-16T10:00:00",
        rate: "",
      },
      isFullScreen: false,
      isFullScreenAll: false,
      randomNumber: "",
    };
  },
  watch: {
    //监听value的变化，进行相应的操作即可
    devList: function (a, b) {
      console.log("isc_plugin.vue获取到设备列表", a, b, this.devH5List);
      if (a.length > 4) {
        this.onTwoSubmit(4);
      }
      //a是value的新值，b是旧值
      a.map((item, index) => {
        if (index >= 16) return;
        const row = {
          ...item,
          eIndex: this.iWndIndex,
        };
        if (this.numCount == 1) {
          this.play(row, this.iWndIndex);
        } else if (a.length == 1) {
          this.play(row, this.iWndIndex);
          const findIndex = this.devH5List.findIndex(
            (item) => item.eIndex == this.iWndIndex
          );
          if (findIndex != -1) {
            this.devH5List.splice(findIndex, 1, row);
          } else {
            this.devH5List.push(row);
          }
        } else {
          this.play(
            {
              ...item,
              eIndex: index,
            },
            index
          );
        }
      });
      if (a.length > 1) {
        this.devH5List = a.map((item, index) => ({ ...item, eIndex: index }));
      }
    },
    randomNumber: {
      handler(newVal, oldVal) {
        console.log("随机数变化了", newVal, oldVal);
        // 使用选中事件来定位控制按钮
        const wnd = document.querySelector(`#player #player-container-${this.iWndIndex}`);
        if (wnd) {
          const controls = document.getElementById(`controls-${this.iWndIndex + 1}`);
          if (controls) {
            const player_playVideo = wnd.querySelector(
              `#player_playVideo${this.iWndIndex}`
            );
            if (player_playVideo.src || player_playVideo.poster) {
              const find = this.devH5List.find(
                (item, eIndex) => this.iWndIndex == eIndex
              );
              if (find) {
                this.$emit("selectPlayVideo", {
                  ...find,
                });
              }
            }
          }
        }
      },
    },
    shrinkCloseFlag: function (newVal, b) {
      console.log("新的值2222", newVal);
      this.onTwoSubmit(this.numCount);
    },
  },
  mounted() {
    this.devH5List = this.devList.map((item, index) => ({
      ...item,
      eIndex: index,
    }));
    console.log("我进来了", this.devList);
    // 页面加载初始化`
    this.initPlayer();
  },
  methods: {
    // 关闭所有视频
    stopAllPlay() {
      this.player.JS_StopRealPlayAll().then(
        () => {
          this.playback.rate = 0;
          console.log("stopAllPlay success");
          this.devH5List.forEach((item, index) => {
            const wnd = document.querySelector(`#player #player-container-${index}`);
            if (wnd) {
              const controls = document.getElementById(`controls-${index + 1}`);
              if (controls) {
                controls.classList.remove("video-controls_flex");
              }
            }
          });
          this.devH5List = [];
        },
        (e) => {
          console.error(e);
        }
      );
    },
    //  关闭单个
    stopPlay(currentWindowIndex, type) {
      console.log("stopPlay11333", currentWindowIndex);
      this.player.JS_Stop(currentWindowIndex - 1).then(
        () => {
          this.playback.rate = 0;
          console.log("stop realplay success");
          const wnd = document.querySelector(
            `#player #player-container-${currentWindowIndex - 1}`
          );
          console.log(11223344, wnd);
          if (wnd) {
            const controls = document.getElementById(`controls-${currentWindowIndex}`);
            console.log(1122334455, controls);
            if (controls) {
              controls.classList.remove("video-controls_flex");
            }
            const findIndex = Array.from(wnd.childNodes).findIndex(
              (item) => item.localName == "img" || item.className == "classImg"
            );
            if (findIndex !== -1) {
              wnd.removeChild(wnd.childNodes[findIndex]);
            }
            if (type == "delete") return;
            // this.devH5List.splice(currentWindowIndex - 1, 1);
          }
        },
        (e) => {
          console.error(e);
        }
      );
    },
    handleVolume(currentWindowIndex) {
      if (this.muted) {
        this.openSound(currentWindowIndex);
      } else {
        this.closeSound(currentWindowIndex);
      }
    },
    /* 声音、抓图、录像 */
    openSound(currentWindowIndex) {
      this.player.JS_OpenSound(currentWindowIndex - 1).then(
        () => {
          console.log("openSound success");
          this.muted = false;
        },
        (e) => {
          console.error(e);
        }
      );
    },
    closeSound(currentWindowIndex) {
      this.player.JS_CloseSound(currentWindowIndex - 1).then(
        () => {
          console.log("closeSound success");
          this.muted = true;
        },
        (e) => {
          console.error(e);
        }
      );
    },
    // 单个窗口全屏
    singleFullScreen(currentWindowIndex) {
      if (this.isFullScreenAll) {
        this.wholeFullScreen();
        return;
      }
      this.player.JS_FullScreenSingle(currentWindowIndex - 1).then(
        () => {
          console.log(`singleFullScreen success`);
        },
        (e) => {
          console.error(e);
        }
      );
    },
    // 整体窗口全屏
    wholeFullScreen() {
      this.player.JS_FullScreenDisplay(this.isFullScreenAll).then(
        () => {
          console.log(`wholeFullScreen success`);
          this.isFullScreenAll = !this.isFullScreenAll;
        },
        (e) => {
          console.error(e);
        }
      );
    },
    isTalkback(currentWindowIndex) {
      if (this.talkbackBegin) {
        this.talkbackStop(currentWindowIndex);
      } else {
        this.talkbackStart(currentWindowIndex);
      }
    },
    // 开始对讲
    talkbackStart(currentWindowIndex) {
      let player = this.player,
        index = currentWindowIndex - 1;
      console.log("record start ...1111", this.devH5List, player);

      getTalkURLsApi({
        protocol: "wss",
        projectSn: this.devH5List[index].projectSn,
        serialNumber: this.devH5List[index].serialNumber,
      }).then((res) => {
        const res2 = JSON.parse(res.result);
        if (!res2.data) {
          _this.$message.warning("获取url失败");
          return;
        }
        console.log(res2.data.url);

        const url = res2.data.url.replace("hrdl.zhgdyun.com", "sp.szjxj.com");
        player
          .JS_StartTalk(url, {
            // irecordType: 1,
            // cbStreamCB: this.streamcb,
          })
          .then(
            () => {
              this.$message.success("开始对讲");
              this.talkbackBegin = true;
              this.openSound(currentWindowIndex);
              console.log("record start ...");
            },
            (e) => {
              console.error(e);
              this.$message.error("对讲连接失败");
            }
          );
      });
    },
    // 结束对讲
    talkbackStop(currentWindowIndex) {
      let player = this.player;
      player.JS_StopTalk().then(
        (res) => {
          console.log("record stoped, saving ...", res);
          this.talkbackBegin = false;
          this.closeSound(currentWindowIndex);
        },
        (e) => {
          console.error(e);
        }
      );
    },
    isTranscribe(currentWindowIndex) {
      if (this.recordingBegin) {
        this.recordStop(currentWindowIndex);
      } else {
        this.recordStart("MP4", currentWindowIndex);
      }
    },
    // 开始录制
    recordStart(type, currentWindowIndex) {
      const codeMap = { MP4: 5, PS: 2 };
      //let options = {irecordType: 2, cbStreamCB: streamcb}
      let player = this.player,
        index = currentWindowIndex - 1,
        fileName = `${moment().format("YYYYMMDDHHmmss")}.mp4`,
        typeCode = codeMap[type];

      player
        .JS_StartSaveEx(index, fileName, typeCode, {
          irecordType: 1,
          cbStreamCB: this.streamcb,
        })
        .then(
          () => {
            this.$message.success("开始录制");
            this.recordingBegin = true;
            console.log("record start ...");
          },
          (e) => {
            console.error(e);
          }
        );
    },
    // 结束录制
    recordStop(currentWindowIndex) {
      let player = this.player,
        index = currentWindowIndex - 1;

      player.JS_StopSave(index).then(
        (res) => {
          console.log("record stoped, saving ...", res);
          this.recordingBegin = false;
        },
        (e) => {
          console.error(e);
        }
      );
    },
    // 抓图
    capture(imageType, currentWindowIndex) {
      let player = this.player,
        index = currentWindowIndex - 1;

      player.JS_CapturePicture(index, "img", imageType).then(
        () => {
          console.log("capture success", imageType);
        },
        (e) => {
          console.error(e);
        }
      );
    },
    /**
     * 初始化播放器
     */
    initPlayer() {
      const _this = this;
      this.player = new JSPlugin({
        // 需要英文字母开头 必填
        szId: "player",
        // 必填,引用H5player.min.js的js相对路径
        szBasePath: "/public/bin",

        iMaxSplit: 4,
        openDebug: true,
        mseWorkerEnable: false, //是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿
        bSupporDoubleClickFull: true, //是否支持双击全屏，true-双击是全屏；false-双击无响应

        // 分屏播放，默认最大分屏4*4
        // iMaxSplit: 16,
        iCurrentSplit: 2,

        // 样式
        oStyle: {
          border: "#343434",
          borderSelect: "#FFCC00",
          background: "#000",
        },
      });
      // 事件回调绑定
      this.player.JS_SetWindowControlCallback({
        windowEventSelect: function (iWndIndex) {
          //插件选中窗口回调
          console.log("windowSelect callback: ", iWndIndex);
          _this.iWndIndex = iWndIndex;
          _this.randomNumber = "id" + Math.random().toString(36).substr(2, 9);
        },
        pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
          //插件错误回调
          console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
        },
        windowEventOver: function (iWndIndex, iEventType, iMouseX, iMouseY) {
          //鼠标移过回调
          console.log(iWndIndex, iEventType);
          // 使用选中事件来定位控制按钮
          const wnd = document.querySelector(`#player #player-container-${iWndIndex}`);
          console.log(1111222, wnd);
          if (wnd) {
            const controls = document.getElementById(`controls-${iWndIndex + 1}`);
            console.log(controls, wnd);
            if (controls && !wnd.contains(controls)) {
              // 确保控制按钮只添加一次
              if (!wnd.querySelector(".video-controls")) {
                wnd.appendChild(controls);
                // controls.style.display = "flex";
              }
            }
            if (controls) {
              // console.log(888777, iWndIndex, _this.devH5List);
              // const findIndex = _this.devH5List.findIndex(item => item.eIndex === iWndIndex);
              // if (findIndex == -1) return;

              const player_playVideo = wnd.querySelector(`#player_playVideo${iWndIndex}`);
              const findFlag = Array.from(wnd.childNodes).find((item) => {
                return item.id && item.id.includes("player_playVideo");
              });
              const findImg = Array.from(wnd.childNodes).some((item) => {
                return item.className == "classImg";
              });
              // console.log(8848, findFlag, findImg, player_playVideo);
              if (player_playVideo.src || findImg || findFlag.duration == "Infinity") {
                controls.classList.add("video-controls_flex");
              }
            }
          }
        },
        windowEventOut: function (iWndIndex) {
          //鼠标移出回调
          console.log(iWndIndex);
          const wnd = document.querySelector(`#player #player-container-${iWndIndex}`);
          if (wnd) {
            const controls = document.getElementById(`controls-${iWndIndex + 1}`);
            if (controls) {
              controls.classList.remove("video-controls_flex");
            }
          }
        },
        windowEventUp: function (iWndIndex) {
          //鼠标mouseup事件回调
          //console.log(iWndIndex);
        },
        windowFullCcreenChange: function (bFull) {
          //全屏切换回调
          console.log("fullScreen callback: ", bFull);
          _this.isFullScreen = bFull;
          _this.isFullScreenAll = false;
        },
        firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
          //首帧显示回调
          console.log("firstFrame loaded callback: ", iWndIndex, iWidth, iHeight);
        },
        performanceLack: function (iWndIndex) {
          //性能不足回调
          console.log("performanceLack callback: ", iWndIndex);
        },
        StreamEnd: function (iWndIndex) {
          //性能不足回调
          console.log("recv StreamEnd: ", iWndIndex);
        },
        StreamHeadChanged: function (iWndIndex) {
          console.log("recv StreamHeadChanged: ", iWndIndex);
        },
        ThumbnailsEvent: (iWndIndex, eventType, eventCode) => {
          console.log(
            "recv ThumbnailsEvent: " +
              iWndIndex +
              ", eventType:" +
              eventType +
              ", eventCode:" +
              eventCode
          );
        },
        InterruptStream: (iWndIndex, iTime) => {
          console.log("recv InterruptStream: " + iWndIndex + ", iTime:" + iTime);
        },
        ElementChanged: (iWndIndex, szElementType) => {
          //回调采用的是video还是canvas
          console.log(
            "recv ElementChanged: " + iWndIndex + ", szElementType:" + szElementType
          );
        },
      });
      this.devH5List.forEach((item, index) => {
        this.play(item, index);
      });
    },

    /**
     * 获取取流连接
     * @returns {*}
     */
    getPreviewUrl(row) {
      let tempCode = row.serialNumber;
      const param = {
        cameraIndexCode: tempCode,
        streamType: row.defaultStreamType == 2 ? 0 : row.defaultStreamType,
        type: window.location.protocol.includes("https") ? "wss" : "ws",
        transmode: 1,
        itemId: row.itemId,
      };
      // 这里
      return getVideoItemInfoApi(param);
    },

    /**
     * 播放
     */
    play(row, index) {
      const _this = this;
      this.stopPlay(index + 1, "delete");
      this.getPreviewUrl({
        ...row,
      }).then((res) => {
        if (res.code !== 200) {
          _this.$message.warning("获取视频流失败！");
          return;
        }
        this.devH5List.splice(index, 1, {
          ...row,
          url: res.result.videoInfo.url,
        });

        // 视频添加加载中图片
        const id = "player-container-" + index;
        var d1 = document.getElementById(id); //获取div元素
        d1.childNodes.forEach((item) => {
          console.log("我是图片", item);
          if (
            item.nodeName == "" ||
            item.nodeName == "IMG" ||
            item.className == "classImg"
          ) {
            d1.removeChild(item);
          }
        });
        var im = document.createElement("img"); //创建图片
        im.src = require("@/assets/images/iscImage/loading.gif");
        //图片设置成和div一样大小
        const divHeightNum = d1.style.height.slice(0, d1.style.height.length - 2);
        // const imgHeightNum = divHeightNum * 0.2
        const imgHeightNum = 256;
        im.style.width = imgHeightNum + "px";
        im.style.height = imgHeightNum + "px";
        im.style.position = "absolute";
        im.style.top = "50%";
        im.style.left = "50%";
        const positionNum = imgHeightNum / 2 - imgHeightNum;
        im.style.marginLeft = positionNum + "px";
        im.style.marginTop = positionNum + "px";
        d1.appendChild(im); //图片挂载到div上
        let preUrl = res.result.videoInfo.url;
        const param = {
          playURL: preUrl,
          // 1：高级模式  0：普通模式，高级模式支持所有
          mode: 0,
        };
        // 索引默认0
        if (!index) {
          index = 0;
        }
        const findIndex = Array.from(d1.childNodes).findIndex(
          (item) => item.localName == "img"
        );
        _this.player.JS_Play(preUrl, param, index).then(
          () => {
            console.log(d1.childNodes);
            if (findIndex !== -1) {
              d1.removeChild(d1.childNodes[findIndex]);
              console.log("播放成功", findIndex);
            }
            // 播放成功回调
            // d1.removeChild(d1.childNodes[d1.childNodes.length - 1]);
            // console.log("播放成功");
          },
          (err) => {
            console.log("播放失败");
            // im.src = require("@/assets/images/iscImage/text-to-image.png");
            // const imgHeightNum = 20;
            // const imgWidthNum = 150;
            // im.style.width = imgWidthNum + "px";
            // im.style.height = imgHeightNum + "px";
            // const positionNum = imgHeightNum / 2 - imgHeightNum;
            // const positionWidthNum = imgWidthNum / 2 - imgWidthNum;
            // im.style.marginLeft = positionWidthNum + "px";
            // im.style.marginTop = positionNum + "px";
            if (findIndex !== -1) {
              d1.removeChild(d1.childNodes[findIndex]);
              let ndiv = document.createElement("div"); //创建图片
              const reloadBtn = document.createElement("div");

              // 创建图片元素
              const reloadIcon = document.createElement("img");
              reloadIcon.src = reloadImg; // 替换为你的图片路径

              reloadBtn.textContent = "重新加载";
              reloadBtn.addEventListener("click", (e) => {
                e.stopPropagation();
                this.onReload(row.itemId);
              });

              // 将图片添加到按钮
              reloadBtn.appendChild(reloadIcon);

              ndiv.innerHTML = `预览失败，请检查设备网络`;
              ndiv.style.position = "absolute";
              ndiv.style.top = "50%";
              ndiv.style.left = "50%";
              ndiv.style.transform = "translate(-50%, -50%)";
              ndiv.className = "classImg";
              ndiv.appendChild(reloadBtn);
              d1.appendChild(ndiv); //图片挂载到div上
            }
          }
        );
        _this.iWndIndex =
          _this.iWndIndex >= _this.numCount * _this.numCount - 1
            ? _this.iWndIndex
            : index + 1;
        _this.player.JS_SelectWnd(_this.iWndIndex).then(
          () => {
            console.info("JS_SelectWnd success");
            // do you want...
          },
          (err) => {
            console.info("JS_SelectWnd failed");
            // do you want...
          }
        );
        _this.player.JS_SetConnectTimeOut(index, 60).then(
          () => {
            console.info("JS_SetConnectTimeOut success");
            // do you want...
          },
          (err) => {
            console.info("JS_SetConnectTimeOut failed", err);
            // do you want...
          }
        );
      });
    },
    onReload(id) {
      console.log("重新加载", id);
      // 这里添加重新加载的逻辑
      const findItem = this.devH5List.find((item) => item.itemId === id);
      if (findItem) {
        this.play(findItem, findItem.eIndex);
      }
    },
    onTwoSubmit(num) {
      const _this = this;
      // 这里的分屏，是以列来算的，如果这里参数2，那么就是横竖两列，就是4格
      this.numCount = num;
      this.player.JS_ArrangeWindow(num).then(
        () => {
          // 循环取流
          //   for (let i = 0; i < num * num; i++) {
          //     _this.play(i);
          //   }
        },
        (e) => {
          console.error(e);
        }
      );
    },
  },
  computed: {
    videoNameUp() {
      return (index) => {
        const find = this.devH5List.find((item) => item.eIndex === index);
        console.log(8844555, this.devH5List);
        return find ? find.videoName : "";
      };
    },
  },
};
</script>
<style>
.el-message {
  min-width: initial;
}
</style>
<style lang="scss" scoped>
:deep(.classImg) {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  width: calc(100% - 24px);
  text-align: center;
  padding: 0 12px;
  z-index: 101;
  > div {
    color: rgb(255, 255, 255);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    > img {
      width: 16px;
      height: 16px;
      margin-left: 8px;
    }
  }
}
.bgImage {
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.transcribe {
  width: 20px;
  height: 20px;
  background-image: url("~@/assets/images/iscImage/transcribe.png");
}
.talkback {
  background-image: url("~@/assets/images/iscImage/talkback.png");
}
.talkback_active {
  background-image: url("~@/assets/images/iscImage/talkback_active.png");
}
.screenshot {
  background-image: url("~@/assets/images/iscImage/screenshot.png");
}
.disableVolume {
  background-image: url("~@/assets/images/iscImage/disableVolume.png");
}
.fullScreen {
  background-image: url("~@/assets/images/iscImage/fullScreen.png");
}
.openVolume {
  background-image: url("~@/assets/images/iscImage/openVolume.png");
}
.exitFullScreen {
  background-image: url("~@/assets/images/iscImage/exitFullScreen.png");
}
.splitscreen1 {
  background-image: url("~@/assets/images/iscImage/splitscreen1.png");
}
.splitscreen2 {
  background-image: url("~@/assets/images/iscImage/splitscreen2.png");
}
.splitscreen3 {
  background-image: url("~@/assets/images/iscImage/splitscreen3.png");
}
.stopAll {
  background-image: url("~@/assets/images/iscImage/stopAll.png");
}
.video-controls_flex {
  display: flex !important;
}
/* 添加控制按钮样式 */
.video-controls {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  //   background: rgba(0, 0, 0, 0.7);
  display: none;
  flex-direction: column;
  justify-content: space-between;
  .controls-bottom {
    height: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0 16px;
    > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      > div:not(:first-child) {
        margin-left: 15px;
      }
    }
  }
  .controls-top {
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 35px;
    background: rgba(0, 0, 0, 0.7);
    .top-left {
      font-size: 15px;
      color: #ffffff;
    }
    .top-close {
      width: 84px;
      font-size: 15px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      > i {
        margin-left: 5px;
      }
    }
  }
}
#player-main {
  width: 100%;
  height: 100%;
}
#player {
  width: 100%;
  height: calc(100% - 40px);
}
.player-tool {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #3d3d3d;
  height: 40px;
  padding: 0 16px;
  > div:not(:first-child) {
    margin-left: 16px;
  }
}
.hikvision-player {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#video-container {
  width: 100%;
  height: 500px;
  background-color: #000;
}

.control-bar {
  padding: 10px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.video-source {
  padding: 10px;
  background: #f5f5f5;
  display: flex;
  gap: 10px;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>
