<template>
  <div class="more">
    <!-- 标题区域 -->
    <div class="title"></div>

    <!-- 监控内容区域 -->
    <div class="content">
      <!-- 选择监控位置区域 -->
      <div class="content_left">
        <el-tree
          :data="dataSource"
          node-key="spotName"
          highlight-current
          accordion
          :props="treeProps"
          @node-click="handleNodeClick"
        >
          <template #default="{ node, data }">
            <div class="left_tree">
              <div class="tree_text">
                {{ data.spotName || data.installationSite || "未知" }}
              </div>
            </div>
          </template>
        </el-tree>
      </div>
      <!-- 监控展示区域 -->
      <div class="content_right">
        <div class="right_monitor">暂无监控</div>
        <video
          v-if="currentUrl"
          controls
          autoplay
          muted
          disablePictureInPicture
          controlsList="nodownload  noplaybackrate"
          :src="currentUrl"
        ></video>
      </div>
    </div>

    <!-- 关闭按钮区域 -->
    <div class="close" @click="handleClose">×</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { reqVideoList, reqVideoPull, reqVideoStop } from "@/api/video/index";

// 路由器实例
const router = useRouter();

// 当前监控地址
const currentUrl = ref("");

// 当前监控通道  默认学习大门
const currentD = ref("D70");

const treeProps = {
  label: "spotName",
  children: "items",
};

// 树状结构数据
const dataSource = ref([]);

onMounted(() => {
  startVideo();
  // 获取列表数据
  getVideoList();
});

onUnmounted(() => {
  if (currentD.value) {
    // 关流请求
    stopVideo2();
  }
});

// 获取列表数据
const getVideoList = async () => {
  const res = await reqVideoList();
  // console.log(res);
  dataSource.value = res.data;
};

// 点击树状结构每一个节点触发的回调
const handleNodeClick = (data: any) => {
  if (currentD.value) {
    // 关流请求
    stopVideo2();
  }
  // console.log(data);
  if (data.d) {
    currentD.value = data.d;
    // 监控拉流
    startVideo(currentD.value);
  } else {
    currentUrl.value = "";
  }
};

// 拉流请求
const startVideo = async (d: string = currentD.value) => {
  const res = await reqVideoPull({
    d,
    nowLine: "1",
    isNvr: "1",
  });
  // console.log(res);
  currentUrl.value = res.data.mp4;
};

// 关流请求
const stopVideo2 = async () => {
  await reqVideoStop({
    d: currentD.value,
    nowLine: "1",
  });
};

// 点击关闭按钮回调
const handleClose = () => {
  router.push("/");
};
</script>

<style lang="scss" scoped>
.more {
  z-index: 2;
  position: relative;
  margin-top: 39px;
  margin-left: 17px;
  padding: 22px 38px 33px 27px;
  width: 1887px;
  height: 942px;
  background-color: rgba(2, 27, 41, 0.9);

  .title {
    width: 1823px;
    height: 32px;
    background-image: url(@/assets/images/more-title-bg.png);
    background-size: 100% 100%;
  }

  .content {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    height: 824px;

    .content_left {
      width: 200px;
      height: 100%;
      overflow-y: auto;

      .left_tree {
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 14px;
        font-weight: bold;
        font-size: 14px;

        .tree_text {
          margin-left: 6px;
          font-size: 12px;
          font-weight: 400;
        }
      }
    }

    .content_right {
      position: relative;
      width: 1597px;
      height: 100%;

      .right_monitor {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 40px;
        background-color: rgba($color: #000000, $alpha: 1);
      }

      video {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
      }

      // 隐藏进度条
      video::-webkit-media-controls-timeline {
        display: none !important;
      }

      // 隐藏播放按钮
      video::-webkit-media-controls-play-button {
        display: none !important;
      }

      // 隐藏当前播放的时间点
      video::-webkit-media-controls-current-time-display {
        display: none !important;
      }

      // 隐藏剩余时间
      video::-webkit-media-controls-time-remaining-display {
        display: none !important;
      }
    }
  }

  .close {
    position: absolute;
    top: 18px;
    right: 38px;
    width: 24px;
    height: 24px;
    line-height: 18px;
    text-align: center;
    color: #a6a6a6;
    font-size: 25px;
    border-radius: 2px;
    border: 1px solid #a6a6a6;
    cursor: pointer;
  }
}

// 修改树形组件样式
::v-deep(.el-tree) {
  color: #fff;
  background: transparent;
}

::v-deep(
    .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content
  ),
::v-deep(.el-tree-node__content:hover),
::v-deep(.el-tree-node:focus > .el-tree-node__content) {
  background-color: rgba(112, 183, 250, 0.2);
  color: #70b7fa;
}
</style>
