<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></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="`${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 class="ant-radio-group3">
      <!-- 时间筛选 -->
      <div class="Progress_timeline">
        <div class="Progress_timelineLeft" @click="onClickOffsetX('left')">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="Progress_timelineCenterWrap">
          <div class="Progress_placeholder"></div>
          <div class="Progress_timelineCenter1">
            <div
              class="Progress_timelineCenter"
              @mousemove="mousemoveTime"
              @click="seekTo"
            >
              <div class="Progress_cover"></div>
              <div
                class="Progress_time"
                :style="`transform: translateX(${videoInfo.offsetTranslateX}%);`"
              >
                <div
                  class="Progress_timeItem"
                  v-for="(item, index) in videoInfo.timeList"
                  :key="index"
                >
                  {{ item }}
                </div>
                <!-- <div class="Progress_timeItem">1:00</div>
                                                <div class="Progress_timeItem">2:00</div> -->
              </div>
              <div class="Progress_line"></div>
              <div
                class="Progress_area"
                :style="`transform: translateX(${videoInfo.offsetTranslateX}%);`"
              >
                <div
                  class="Progress_areaItem"
                  v-for="(item, index) in videoInfo.timeList"
                  :key="index"
                >
                  {{ item }}
                </div>
                <!-- <div class="Progress_areaItem">1:00</div>
                                                <div class="Progress_areaItem">2:00</div> -->
              </div>
              <div
                class="Progress_arrowTime"
                :style="`left:${videoInfo.offsetX}%; transform: translateX(${videoInfo.translateX}%);`"
              >
                {{ videoInfo.minuteTime }}
              </div>
              <div
                class="Progress_arrow"
                :style="`left:${videoInfo.offsetX}%`"
              ></div>
            </div>
          </div>
        </div>
        <div class="Progress_timelineRight" @click="onClickOffsetX('right')">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <el-date-picker
        class="date-picker"
        :clearable="false"
        v-model="videoInfo.dateTime"
        type="date"
        value-format="YYYY-MM-DD"
        placeholder="请选择"
      />
    </div>
  </div>
</template>

<script>
// 请求工具
// import http from "@/http/http2.js";
import { callPostPlaybackURLsApi } from "@/assets/js/api/equipmentCenter/cameraList";
import moment from "moment";
import dayjs from "dayjs";
import { Message } from "element-ui";
export default {
  name: "hik",
  props: [
    "devList",
    "isReplayNum",
    "startTime",
    "endTime",
    "showVideo",
    "locationValue",
  ],
  data() {
    return {
      // 监控点编码
      code: "",
      // 播放器对象
      player: null,
      devH5List: [],
      numCount: 1,
      iWndIndex: 0,
      maxWindows: 16, // 最大窗口数
      recordingBegin: false,
      muted: true,
      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,
      videoInfo: {
        // 时间筛选
        dateTime: dayjs(new Date()).format("YYYY-MM-DD"),
        offsetX: 0,
        translateX: 0,
        offsetTranslateX: 0,
        offsetPage: 0,
        timeList: [],
        minuteTime: "0:00",
      },
    };
  },
  watch: {
    //监听value的变化，进行相应的操作即可
    devList: function (a, b) {
      console.log("isc_plugin.vue获取到设备列表", a, b, this.devH5List);
      //a是value的新值，b是旧值
      a.forEach((item, index) => {
        if (this.numCount == 1) {
          this.play(item, this.iWndIndex);
        } else if (a.length == 1) {
          this.play(item, this.iWndIndex);
          this.devH5List.push(item);
        } else {
          this.play(item, index);
        }
      });
      if(a.length > 1) {
        this.devH5List = a;
      }
    },
    isReplayNum: function (newVal, oldVal) {
      console.log("新的值", newVal);
      if (newVal > 0) {
        this.play(this.devH5List[this.iWndIndex], this.iWndIndex);
      } else {
        this.stopAllPlay();
      }
    },
  },
  mounted() {
    this.devH5List = this.devList;
    this.videoInfo.dateTime = dayjs(this.startTime).format("YYYY-MM-DD");
    // 获取时间(24)
    for (let index = 0; index < 24; index++) {
      this.videoInfo.timeList.push(`${index}:00`);
    }
    this.videoInfo.timeList.push(`00:00`);
    console.log("我进来了", this.devList);
    // 页面加载初始化`
    this.initPlayer();
  },
  methods: {
    // 左右偏移
    onClickOffsetX(position) {
      // 内容的宽度
      const timeWidth = document.querySelector(".Progress_time").offsetWidth;
      // 内容的宽度
      const width = document.querySelector(".Progress_cover").offsetWidth;
      // console.log(timeWidth, width, (width / timeWidth) * 100)

      if (position == "left") {
        if (this.videoInfo.offsetPage == 0)
          return this.$message.warning("已经是最左侧了");
        this.videoInfo.offsetPage -= 1;
      } else if (position == "right") {
        if (this.videoInfo.offsetPage == 1)
          return this.$message.warning("已经是最右侧了");
        this.videoInfo.offsetPage += 1;
        // if (offsetX == 2) offsetX = -80
      }
      const offsetX = -(
        ((width - 18) / timeWidth) *
        100 *
        this.videoInfo.offsetPage
      );
      // console.log(this.videoInfo.offsetPage, offsetX - 10)
      this.videoInfo.offsetTranslateX = offsetX;
    },
    onDateChange() {
      console.log(this.videoInfo.dateTime, this.videoInfo.minuteTime);
    },
    // 移入
    mousemoveTime(event) {
      // console.log("鼠标移入", event.offsetX, document.querySelector(".Progress_cover").offsetWidth)
      // 内容的宽度
      const width = document.querySelector(".Progress_cover").offsetWidth;
      // 提示的宽度
      const arrowWidth = document.querySelector(
        ".Progress_arrowTime"
      ).offsetWidth;
      // 占位符的宽度
      const placeholderWidth = document.querySelector(
        ".Progress_placeholder"
      ).offsetWidth;
      // 当前鼠标移入的位置
      this.videoInfo.offsetX = (event.offsetX / width) * 100;
      // console.log(arrowWidth, width - event.offsetX)
      console.log(arrowWidth - (width - event.offsetX) >= arrowWidth / 2);
      // 靠右
      if (arrowWidth - (width - event.offsetX) >= arrowWidth / 2) {
        this.videoInfo.translateX = -(
          50 -
          ((width - event.offsetX) / arrowWidth) * 100
        );
        // console.log(this.videoInfo.translateX)
      } else if (event.offsetX <= arrowWidth / 2 - placeholderWidth) {
        this.videoInfo.translateX = 50 - (event.offsetX / arrowWidth) * 100;
        // console.log(this.videoInfo.translateX, event.offsetX, arrowWidth, placeholderWidth)
      } else {
        this.videoInfo.translateX = 0;
      }
      // console.log(this.videoInfo.offsetX)
      // 获取时间的宽度
      const timeWidth =
        document.querySelector(".Progress_timeItem").offsetWidth;
      const timeIndex = Math.floor(event.offsetX / timeWidth);
      // 当前分钟的位置
      const minuteIndex = Math.ceil(
        (event.offsetX / timeWidth - timeIndex) * 100
      );
      // 当前分钟
      const minute = Math.ceil((minuteIndex / 100) * 60);
      const offsetIndex =
        this.videoInfo.offsetPage == 0
          ? timeIndex
          : 14 * this.videoInfo.offsetPage + timeIndex;
      console.log(offsetIndex, 8, this.videoInfo.offsetPage, timeIndex);
      // 截取当前字符串的时间
      const hour =
        this.videoInfo.timeList[offsetIndex] &&
        this.videoInfo.timeList[offsetIndex].substring(
          0,
          this.videoInfo.timeList[offsetIndex].indexOf(":")
        );
      if (!hour || hour == "00") return;
      if (hour == undefined) return;
      this.videoInfo.minuteTime = `${this.videoInfo.dateTime} ${
        hour < 10 ? "0" + hour : hour
      }:${minute < 10 ? "0" + minute : minute}`;
      // console.log(111111111, width, offsetIndex,)

      // console.log(Math.floor(event.offsetX / timeWidth), this.videoInfo.timeList[offsetIndex], this.videoInfo.offsetPage)
    },
    // 定位
    seekTo() {
      // 确保时间格式一致，可以统一使用dayjs对象
      const currentTime = dayjs(this.videoInfo.minuteTime);
      const start = dayjs(this.startTime);
      const end = dayjs(this.endTime);
      console.log(this.videoInfo.minuteTime, this.startTime, this.endTime);
      if (currentTime.isBefore(start, "second")) {
        this.$message.warning("不能定位到开始时间之前");
        return;
      }
      if (currentTime.isAfter(end, "second")) {
        this.$message.warning("不能定位到结束时间之后");
        return;
      }

      let seekStart =
        dayjs(this.videoInfo.minuteTime).format(
          moment.HTML5_FMT.DATETIME_LOCAL_SECONDS
        ) + ".000+08:00";
      let endTime =
        dayjs(this.endTime).format(moment.HTML5_FMT.DATETIME_LOCAL_SECONDS) +
        ".000+08:00";
      this.player
        .JS_Seek(this.player.currentWindowIndex, seekStart, endTime)
        .then(
          () => {
            console.log("seekTo success");
          },
          (e) => {
            this.$message.error(e);
          }
        );
    },
    // 关闭所有视频
    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) {
      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}`
          );
          if (wnd) {
            const controls = document.getElementById(
              `controls-${currentWindowIndex}`
            );
            if (controls) {
              controls.classList.remove("video-controls_flex");
            }
            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);
        }
      );
    },
    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: 1,

        // 样式
        oStyle: {
          border: "#343434",
          borderSelect: "#FFCC00",
          background: "#000",
        },
      });
      // 事件回调绑定
      this.player.JS_SetWindowControlCallback({
        windowEventSelect: function (iWndIndex) {
          //插件选中窗口回调
          console.log("windowSelect callback: ", iWndIndex);
          _this.iWndIndex = iWndIndex;
        },
        pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
          //插件错误回调
          console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
        },
        windowEventOver: function (iWndIndex) {
          //鼠标移过回调
          console.log(iWndIndex);
          // 使用选中事件来定位控制按钮
          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) {
              if (iWndIndex > _this.devH5List.length - 1) return;
              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.$nextTick(() => {
        this.play(this.devH5List[0], this.iWndIndex);
      });
    },

    /**
     * 获取取流连接
     * @returns {*}
     */
    getPreviewUrl(row) {
      let tempCode = row.serialNumber;
      const param = {
        // cameraIndexCode: tempCode,
        // streamType: row.defaultStreamType == 2 ? 0 : row.defaultStreamType,
        // transmode: 1,
        // itemId: row.itemId,
        serialNumber: row.serialNumber,
        projectSn: row.projectSn,
        protocol: "ws",

        beginTime: this.startTime,
        endTime: this.endTime,
        recordLocation: this.locationValue,
      };
      // 这里
      return callPostPlaybackURLsApi(param);
    },

    /**
     * 播放
     */
    play(row, index) {
      const _this = this;
      this.getPreviewUrl({
        ...row,
      }).then((res) => {
        if (res.code !== 200) {
          _this.$message.warning("获取视频流失败！");
          return;
        }
        // 视频添加加载中图片
        const id = "player-container-" + index;
        var d1 = document.getElementById(id); //获取div元素
        d1.childNodes.forEach((item) => {
          if (item.nodeName == "" || item.nodeName == "IMG") {
            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.url;
        console.log(preUrl);
        const param = {
          playURL: preUrl,
          // 1：高级模式  0：普通模式，高级模式支持所有
          mode: 1,
          keepDecoder: 0,
        };
        // 索引默认0
        if (!index) {
          index = 0;
        }
        let startTime =
          dayjs(this.startTime).format(
            moment.HTML5_FMT.DATETIME_LOCAL_SECONDS
          ) + ".000+08:00";
        let endTime =
          dayjs(this.endTime).format(moment.HTML5_FMT.DATETIME_LOCAL_SECONDS) +
          ".000+08:00";
        console.log(8887777, startTime, endTime);
        _this.player.JS_Play(preUrl, param, index, startTime, endTime).then(
          () => {
            // 播放成功回调
            console.log("播放成功");
            _this.$message.success("播放成功！");
          },
          (err) => {
            const obj = {
              "0x019308cb": "取流失败",
              "0x12f900009": "取流超时,请检查网络状态",
            };
            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";
            _this.$message.warning(obj[err] || "播放失败");
          }
        );
      });
    },
    /**
     * 分屏，这里我太懒了，就循环了一个视频流
     */
    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);
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.ant-radio-group3 {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;

  .Progress_timeline {
    background: #19233a;
    border: 1px solid #2b344c;
    border-radius: 4px;
    display: flex;
    height: 44px;
    // width: 431px;
    width: 100%;
    // margin-right: 10px;

    .Progress_timelineRight,
    .Progress_timelineLeft {
      align-items: center;
      background: #202a43;
      border-left: 1px solid #2b344c;
      border-radius: 0 4px 4px 0;
      color: #7a8bb5;
      display: flex;
      justify-content: center;
      width: 50px;
      cursor: pointer;
    }

    .Progress_timelineCenterWrap {
      margin-top: -50px;
      overflow: hidden;
      padding-top: 50px;
      // width: 391px;
      width: calc(92% - 60px);
      display: flex;

      > div:first-child {
        width: 20px;
      }

      .Progress_timelineCenter1 {
        position: relative;
        // width: 371px;
        width: 100%;
        // padding-left: 20px;

        .Progress_timelineCenter {
          // width: 960px;
          width: 1500px;

          &:hover .Progress_arrowTime,
          &:hover .Progress_arrow {
            display: block;
          }

          .Progress_cover {
            width: 100%;
            height: 100%;
            cursor: pointer;
            left: 0;
            position: absolute;
            top: 0;
            z-index: 1;
          }

          .Progress_time {
            display: flex;

            .Progress_timeItem {
              min-width: 100px;
              color: #99a0b4;
              font-size: 12px;
              font-weight: 700;
              left: 0px;
              line-height: 14px;
              padding: 3px 0;
              position: relative;
              text-align: left;
            }
          }

          .Progress_line {
            bottom: 0;
            display: flex;
            height: 24px;
            position: absolute;
            // left: 20px;
          }

          .Progress_area {
            align-items: center;
            border-top: 1px solid #2b344c;
            display: flex;
            height: 24px;
            opacity: 0.5;
            // margin-left: 20px;

            .Progress_areaItem {
              min-width: 100px;
              border-left: 1px solid #fff;
              height: 10px;
              opacity: 0.1;
            }
          }

          .Progress_arrowTime {
            background: linear-gradient(180deg, #89a3f8, #516aee);
            border-radius: 10px;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            height: 19px;
            line-height: 19px;
            margin-left: -60px;
            position: absolute;
            text-align: center;
            // top: -45px;
            top: -20px;
            width: 120px;
            // display: none;
          }

          .Progress_arrow {
            background: linear-gradient(180deg, #89a3f8, #516aee);
            box-shadow: 0 0 6px 0 #5363f2;
            height: 44px;
            position: absolute;
            top: 0;
            width: 2px;
            // display: none;
          }
        }
      }
    }
  }

  :deep() {
    .date-picker {
      width: initial;
      cursor: pointer;
      position: absolute;
      right: 40px;
      width: 20px;
      height: 20px;
      .el-input__icon {
        line-height: 0;
      }
    }

    .date-picker .el-input__wrapper {
      padding-right: 0;
      padding-left: 8px;
      cursor: pointer;
      background-color: #19233a;
      border: 1px solid #2b344c;
      box-shadow: none;
    }

    .date-picker .el-input__inner {
      display: none;
    }
  }
}
.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");
}
.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: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .top-close {
      width: 84px;
      height: 27px;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 41px;
      font-size: 15px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      > i {
        margin-left: 5px;
      }
    }
  }
}
#player-main {
  width: 100%;
  height: 100%;
}
#player {
  width: 100%;
  height: calc(100% - 46px);
}
.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>