<template>
  <div class="box-2">
    <div class="left-nav">
      <div v-if="showNav" class="ul">
        <div
          class="li"
          :class="{ active: current == index }"
          v-for="(item, index) in navList"
          :key="index"
          @click="handleNav(index)"
        >
          <span v-if="!params.businessScenicArea && index==0">
           核心路段
          </span>
          <span v-else>
               {{ item.dictLabel }}
          </span>
        </div>
      </div>
      <div class="bom-box">
        <Title2 title="检索" />
        <!-- <div class="search-box flex">
          <el-input placeholder="请输入内容" v-model="searchValue" clearable> </el-input>
          <img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
        </div> -->
        <div class="tree-box">
          <div class="tree-a" v-for="(item, i) in regionList" :key="i">
            <div class="flex align-center">
              <img class="node" src="@/assets/images/node.png" alt="" />
              <span class="name-1">{{ item.regions }}</span>
            </div>
            <div
              class="tree-b"
              v-for="(resource, x) in item.videoResources"
              :key="x"
              @click="handleCamera(resource.cameraIndexCode)"
            >
              <span class="name-2 activee">
                {{ resource.cameraName || resource.cameraIndexCode }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="videoLog == 1" class="video-wrapper">
      <div
        class="video-list"
        v-infinite-scroll="getVideoList"
        :infinite-scroll-immediate="false"
        :infinite-scroll-distance="50"
      >
        <div
          class="video-item"
          v-for="(item, index) in videoList"
          :key="index"
          @click="handleItemVideo(item.hlsUrl, 100)"
        >
          <div class="video-item__inner">
            <video
              class="video-item__video"
              :id="'monitorVideo' + index"
              muted
              autoplay
              :controls="false"
              style="object-fit: cover"
            >
              <source src="" type="application/x-mpegURL" />
            </video>
            <p class="video-item__title--primary">
              {{ item.cameraName || item.cameraIndexCode }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div v-if="videoLog == 2" class="video-detail">
      <div class="video-detail__wrapper">
        <video
          class="video-detail__video"
          ref="videoRef"
          muted
          autoplay
          controls
          style="object-fit: cover"
        >
          <source src="" type="application/x-mpegURL" />
        </video>
      </div>
      <div class="video-right">
        <div class="flex justify-between">
          <Title2 title="异常告警" />
          <div class="back-box" @click="handleBack">
            <img class="icon" src="@/assets/images/back.png" />
            <span>返回</span>
          </div>
        </div>
        <ul class="list">
          <li
            class="item"
            v-for="(item, index) in videoList"
            :key="index"
            @click="handleItemVideo(item.hlsUrl, 101)"
          >
            <div>
              <p class="item-title--primary">
                {{ item.cameraName }}
              </p>
              <video
                class="item-img"
                :id="'monitorVideo' + index"
                muted
                autoplay
                :controls="false"
                style="object-fit: cover"
              >
                <source src="" type="application/x-mpegURL" />
              </video>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <VideoDialog v-model="show" :src="videoSrc" />
</template>

<script setup>
  import { getVideoListApi, postRefreshApi, getPreviewUrlApi } from '@/api/home'
  import { getVideoTypeApi, getVideoRegionsApi, postVideoRemainApi } from '@/api/monitor'

  import PubSub from 'pubsub-js'
  import Hls from 'hls.js'

  let videoList = ref([])
  let navList = ref([])
  let current = ref(0)
  let showNav = ref(true)
  let videoLog = ref(1)
  let videoRef = ref()
  let regionList = ref()
  let monitorChange = null
  let videoSrc = ref('')
  let show = ref(false)
  let loading = ref(false)
  let params = reactive({
    pageNum: 1,
    pageSize: 7,
    businessScenicArea: '',
    businessVideoDisplayPosition: ''
  })

  // const postVideoRemain = async () => {
  //   setInterval(() => {
  //     postVideoRemainApi({
  //       cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
  //     })
  //   }, 3000)
  // }

  const initVideo = () => {
    nextTick(() => {
      videoList.value.forEach(async (item, index) => {
        const video = document.getElementById(`monitorVideo${index}`)
        let res = await postRefreshApi({
          type: 'hls',
          businessVideoDisplayPosition: item.businessVideoDisplayPosition,
          cameraIndexCode: item.cameraIndexCode
        })
        item.hlsUrl = res.data.hlsUrl
        const hls = new Hls({
          maxBufferLength: 10, // 最大缓冲长度（秒）
          maxMaxBufferLength: 15, // 缓冲区长度的上限
          maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
        })
        hls.loadSource(res.data.hlsUrl)
        hls.attachMedia(video)
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          video.play()
        })
      })
    })
  }
  const handleNav = (e) => {
    if (current.value == e) return
    videoLog.value = 1
    params.pageNum = 1
    videoList.value = []
    current.value = e
    getVideoList()
  }
  const handleBack = () => {
    videoLog.value = 1
    initVideo()
  }
  const handleItemVideo = (url, type) => {
    videoLog.value = 2
    nextTick(() => {
      const hls = new Hls({
        maxBufferLength: 10, // 最大缓冲长度（秒）
        maxMaxBufferLength: 15, // 缓冲区长度的上限
        maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
      })
      hls.loadSource(url)
      hls.attachMedia(videoRef.value)
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        videoRef.value.play()
      })
      if (type == 100) initVideo()
    })
  }
  const handleCamera = async (cameraIndexCode) => {
    show.value = true
    let res = await getPreviewUrlApi({
      type: 'hls',
      cameraIndexCode
    })
    videoSrc.value = res.data.url
  }
  const getVideoList = async () => {
    try {
      if (loading.value) return
      loading.value = true
      params.businessVideoDisplayPosition = navList.value[current.value].dictValue
      let res = await getVideoListApi(params)
      if (res.data.length > 0) {
        let list = res.data
        list.forEach(async (i) => {
          let res = await postRefreshApi({
            type: 'hls',
            businessVideoDisplayPosition: i.businessVideoDisplayPosition,
            cameraIndexCode: i.cameraIndexCode
          })
          return {
            ...i,
            hlsUrl: res.data.hlsUrl
          }
        })
        videoList.value = [...videoList.value, ...res.data]
        params.pageNum++
        // postVideoRemain()
        nextTick(() => {
          videoList.value.forEach(async (x, index) => {
            const video = document.getElementById(`monitorVideo${index}`)
            const hls = new Hls({
              maxBufferLength: 10, // 最大缓冲长度（秒）
              maxMaxBufferLength: 15, // 缓冲区长度的上限
              maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
            })
            hls.loadSource(x.hlsUrl)
            hls.attachMedia(video)
            hls.on(Hls.Events.MANIFEST_PARSED, () => {
              video.play()
            })
          })
        })
      }
      loading.value = false
    } catch (error) {
      loading.value = false
    }
  }
  const getVideoType = async (id) => {
    let res = await getVideoTypeApi({
      businessScenicArea: params.businessScenicArea
    })
    if (res.data.length > 0) {
      navList.value = res.data
      getVideoList(id)
    } else {
      videoList.value = []
      initVideo()
    }
  }
  const getVideoRegions = async () => {
    let res = await getVideoRegionsApi({
      businessScenicArea: params.businessScenicArea
    })
    regionList.value = res.data
  }
  const onMonitorChange = () => {
    monitorChange = PubSub.subscribe('monitorChange', (res, data) => {
      params.businessScenicArea = data.scenicSpotId
      params.pageNum = 1
      videoList.value = []
      regionList.value = []
      getVideoType()
      getVideoRegions()
    })
  }
  onMounted(() => {
    getVideoType()
    getVideoRegions()
    onMonitorChange()
  })
  onUnmounted(() => {
    PubSub.unsubscribe(monitorChange)
  })
</script>

<style lang="scss" scoped>
  //背景色设置为透明
  :deep(.el-input__wrapper) {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    box-shadow: none;
  }
  //输入框颜色
  :deep(.el-input__inner) {
    background-color: rgba(0, 0, 0, 0) !important;
    color: #fff;
  }

  .box-2 {
    margin-top: vh(120);
    height: vh(950);
    display: flex;
    flex: 1;
  }
  .left-nav {
    margin: 0 vw(8);
    width: vw(250);
    background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
    .bom-box {
      margin-top: vh(20);
      .search-box {
        border-radius: vw(2);
        border: 1px solid #0096ff;
        margin: vh(10) auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(217, 217, 217, 0);

        .search-icon {
          width: vw(20);
          height: vw(20);
          margin-right: vw(10);
        }
      }

      .tree-box {
        position: relative;
        height: vh(550);
        padding: 0 vw(8);
        overflow-y: auto;
        overflow-x: hidden;
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
          width: vw(0); /* 滚动条的宽度 */
        }
        /* 滚动条轨道 */
        &::-webkit-scrollbar-track {
          background: #f1f1f1; /* 轨道的背景色 */
        }
        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
          background: #888; /* 滑块的背景色 */
          border-radius: 5px; /* 滑块的圆角 */
        }
        /* 当鼠标悬停在滚动条上时滑块的样式 */
        &::-webkit-scrollbar-thumb:hover {
          background: #555; /* 滑块的背景色 */
        }
        .tree-a {
          position: relative;
          border-left: vw(2) #37d8fc solid;

          .node {
            position: absolute;
            left: vw(-8);
            width: vw(16);
            height: vw(16);
          }
          .name-1 {
            padding: 0 vw(20);
            display: block;
            font-weight: 400;
            font-size: vw(15);
            color: #ffffff;
            height: vh(30);
            line-height: vh(30);
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .tree-b::before {
          position: absolute;
          top: vw(-8);
          left: vw(-8);
          content: '';
          width: vw(12);
          height: vw(12);
          background-image: url('/src/assets/images/icon-a-1.png');
          background-size: 100% 100%;
        }
        .tree-b {
          position: relative;
          border-left: vw(3) solid;
          border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
          margin-left: vw(30);
          margin-top: vh(10);
          .name-2 {
            cursor: pointer;
            padding: 0 vw(20);
            display: block;
            font-weight: 400;
            font-size: vw(15);
            color: #ffffff;
            height: vh(30);
            line-height: vh(30);
            white-space: nowrap; /* 保证文本在一行内显示 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
          }
        }
      }
    }
    .ul {
      font-weight: 400;
      font-size: vw(18);
      color: #fff;
      height: vh(340);
      overflow-y: auto;
      overflow-x: hidden;
      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        width: vw(0); /* 滚动条的宽度 */
      }
      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: #f1f1f1; /* 轨道的背景色 */
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: #888; /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }
      /* 当鼠标悬停在滚动条上时滑块的样式 */
      &::-webkit-scrollbar-thumb:hover {
        background: #555; /* 滑块的背景色 */
      }
      .li {
        cursor: pointer;
        width: vw(250);
        height: vh(58);
        line-height: vh(58);
        text-align: center;
        margin-bottom: vh(15);
        background: url('/src/assets/images/m-nav-bg-1.png');
        background-size: 100% 100%;
      }
      .active {
        background: url('/src/assets/images/m-nav-bg-2.png');
        background-size: 100% 100%;
      }
    }
  }

  .video {
    &-wrapper {
      width: 100%;
      height: vh(960);
      padding: vh(30) vw(20);
      background-image: url('/src/assets/images/log-v-bg.png');
      background-size: 100% 100%;
    }
    &-list {
      overflow-y: auto;
      width: 100%;
      height: 100%;
      gap: vw(8);
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

      &::-webkit-scrollbar {
        width: vw(4); /* 滚动条的宽度 */
      }
      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: 'transparent'; /* 轨道的背景色 */
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }
    }
    &-item {
      width: vw(686);
      height: vh(460);
      padding: vw(10);
      background-image: url('/src/assets/images/item-primary.png');
      background-size: 100% 100%;
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
    &-item__inner {
      position: relative;
    }
    &-item__title {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: vh(10) vw(10);
      color: #fff;
      font-size: vw(14);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      z-index: 999;
    }
    &-item__title--error {
      @extend .video-item__title;
      background-color: rgba(226, 27, 27, 0.72);
    }
    &-item__title--primary {
      @extend .video-item__title;
      background-color: rgba(4, 30, 69, 0.72);
    }
    &-item__video {
      width: 100%;
      height: vh(446);
    }

    &-detail {
      margin-left: vw(10);
      display: flex;
      justify-content: space-between;
    }
    &-detail__wrapper {
      position: relative;
      padding: vh(40) vw(50);
      width: vw(1660);
      height: vh(960);
      background-image: url('/src/assets/images/one-video-bg.png');
      background-size: 100% 100%;
    }
    &-detail__title {
      position: absolute;
      left: vw(50);
      right: vw(50);
      top: 40 (vh);
      z-index: 9;
      font-weight: 400;
      font-size: vw(14);
      color: #ffffff;
      padding: vw(20);
      display: flex;
      justify-content: space-between;
      background: rgba(4, 30, 69, 0.5);
    }
    &-detail__video {
      width: 100%;
      height: vh(880);
    }
    &-right {
      margin-left: vw(8);
      width: vw(440);
      height: vh(956);
      background: #082f5a;
      .back-box {
        cursor: pointer;
        padding-right: vw(20);
        display: flex;
        align-items: center;
        .icon {
          width: vw(30);
          height: auto;
          margin-right: vw(10);
        }
        & > span {
          font-weight: bold;
          font-size: vw(20);
          color: #ffffff;
        }
      }
      .list {
        overflow-y: auto;
        overflow-x: hidden;
        height: vh(920);
        padding: vw(8);
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
          width: vw(0); /* 滚动条的宽度 */
        }

        /* 滚动条轨道 */
        &::-webkit-scrollbar-track {
          background: #f1f1f1; /* 轨道的背景色 */
        }

        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
          background: #888; /* 滑块的背景色 */
          border-radius: 5px; /* 滑块的圆角 */
        }

        /* 当鼠标悬停在滚动条上时滑块的样式 */
        &::-webkit-scrollbar-thumb:hover {
          background: #555; /* 滑块的背景色 */
        }
      }

      .item {
        margin-bottom: vh(10);
        padding: vw(10);
        background-image: url('@/assets/images/item-primary.png');
        background-size: 100% 100%;
        & > div {
          position: relative;
        }
        &-title {
          position: absolute;
          bottom: 0;
          width: 100%;
          padding: vw(10);
          color: #fff;
          font-size: vw(14);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          z-index: 999;
        }
        &-title--error {
          @extend .item-title;
          background-color: rgba(226, 27, 27, 0.72);
        }
        &-title--primary {
          @extend .item-title;
          background-color: rgba(4, 30, 69, 0.72);
        }
        &-img {
          width: 100%;
          height: vh(164);
          display: block;
          object-fit: cover;
        }
      }
    }
    .video-live {
      .video-rt {
        width: vw(400);
        height: vh(950);
        background: radial-gradient(
          to bottom 70% at 99% 50%,
          #0a4190 0%,
          rgba(0, 77, 136, 0.6) 100%
        );
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        opacity: 0.4;
        border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
        margin-left: vw(10);
        padding: vw(20);
        .rt-v-box {
          overflow-y: auto;
          /* 滚动条整体样式 */
          &::-webkit-scrollbar {
            width: vw(4); /* 滚动条的宽度 */
          }
          /* 滚动条轨道 */
          &::-webkit-scrollbar-track {
            background: 'transparent'; /* 轨道的背景色 */
          }
          /* 滚动条滑块 */
          &::-webkit-scrollbar-thumb {
            background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
            border-radius: 5px; /* 滑块的圆角 */
          }
          height: 100%;
        }
        .title {
          background-image: url('/src/assets/images/nav-l-t-bg.png');
          background-size: 100% 100%;
          margin-bottom: vh(10);
          position: relative;
          left: vw(-20);
          span {
            margin-left: vw(30);
            font-weight: 800;
            font-size: vw(15);
            line-height: vh(26);
            text-align: center;
            font-style: normal;
            text-transform: none;

            background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
          }
        }
        .rt-video {
          width: 100%;
          height: vh(300);
          background-image: url('/src/assets/images/v-item-bg.png');
          background-size: 100% 100%;
          padding: vw(20);
          box-sizing: border-box;
          margin-bottom: vh(2);
          position: relative;
          .desc {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            z-index: 9;
            background: rgba(4, 30, 69, 0.5);
            border-radius: 0px 0px 0px 0px;
            text-align: center;
            font-weight: 400;
            font-size: vw(14);
            color: #ffffff;
            padding: vw(20);
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .v-error-bg {
          background-image: url('/src/assets/images/v-item-bg-1.png');
          background-size: 100% 100%;
          .desc {
            background: rgba(226, 27, 27, 0.5);
          }
        }
      }
    }
  }
</style>

<style lang="scss" scoped></style>
