<template>
  <div class="left-nav">
    <div v-if="showNav" class="top-box">
      <div class="ul">
        <div
          class="li"
          :class="{ active: current == index }"
          v-for="(item, index) in navList"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="bom-box">
      <div class="title">
        <span>检索</span>
      </div>
      <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">
          <span class="name-1">核心点位</span>
          <div class="tree-b">
            <span class="name-2">摄像头1</span>
            <span class="name-2 activee">摄像头1</span>
            <span class="name-2">摄像头1</span>
          </div>
        </div>
        <div class="tree-a">
          <span class="name-1">核心点位</span>
          <div class="tree-b">
            <span class="name-2">摄像头1</span>
            <span class="name-2 activee">摄像头1</span>
            <span class="name-2">摄像头1</span>
          </div>
        </div>
        <div class="tree-a">
          <span class="name-1">其他</span>
          <div class="tree-b" v-if="true">
            <span class="name-2">摄像头1</span>
            <span class="name-2 activee">摄像头1</span>
            <span class="name-2">摄像头1</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div v-if="videoLog == 1" class="video-wrapper">
    <div class="video-list">
      <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 }}
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="video-detail" v-if="videoLog == 2">
    <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>
</template>

<script setup>
  import { postRefreshApi } from '@/api/home'
  import { getVideoTypeApi } from '@/api/monitor'

  import Hls from 'hls.js'

  let props = defineProps({
    list: {
      type: Array,
      default: () => []
    },
    showNav: {
      type: Boolean,
      default: () => true
    }
  })

  let videoList = ref([])
  let navList = ref([])
  let current = ref(0)

  watch(
    () => props.list,
    (val) => {
      videoList.value = val
      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()
          hls.loadSource(res.data.hlsUrl)
          hls.attachMedia(video)
          hls.on(Hls.Events.MANIFEST_PARSED, () => {
            video.play()
          })
        })
      })
    },
    { immediate: true }
  )

  let videoLog = ref(1)
  let videoRef = ref()

  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()
        hls.loadSource(res.data.hlsUrl)
        hls.attachMedia(video)
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          video.play()
        })
      })
    })
  }
  const handleBack = () => {
    videoLog.value = 1
    initVideo()
  }

  const handleItemVideo = (url, type) => {
    videoLog.value = 2
    nextTick(() => {
      const hls = new Hls()
      hls.loadSource(url)
      hls.attachMedia(videoRef.value)
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        videoRef.value.play()
      })
      if (type == 100) initVideo()
    })
  }

  const getVideoType = async () => {
    let res = await getVideoTypeApi({
      businessScenicArea: '',
      businessVideoDisplayPosition: ''
    })
    navList.value = res.data
  }
  onMounted(() => {
    getVideoType()
  })
</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;
  }
  .left-nav {
    margin-left: vw(10);
    // margin-top:vh(35);
    width: vw(250);

    .bom-box {
      margin-top: vh(20);
      .search-box {
        background: rgba(217, 217, 217, 0);
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #0096ff;
        margin: vw(20) auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search-icon {
          width: vw(16);
          height: vh(16);
          margin: 0 vw(20);
        }
      }

      .tree-box::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-box::after {
        position: absolute;
        content: '';
        width: vw(12);
        height: vw(12);
        background-image: url('/src/assets/images/icon-a-1.png');
        background-size: 100% 100%;
        bottom: vw(-4);
        left: vw(-8);
      }
      .tree-box {
        margin-left: vw(10);
        margin-top: vh(20);
        position: relative;
        border-left: vw(3) solid;
        border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
        .tree-a {
          .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::after{
        // 	position:absolute;
        // 	content: '';
        // 	width:vw(12);
        // 	height:vw(12);
        // 	background-image: url('/src/assets/images/icon-a-1.png');
        // 	background-size:100% 100%;
        // 	bottom:vw(-4);
        // 	left:vw(-8);

        // }
        .tree-b {
          // margin-top:vh(20);
          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 {
            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-box .tree-a:first-child {
        position: relative;
        top: vh(-15);
      }
      .tree-box .tree-a:last-child {
        position: relative;
        bottom: vh(-12);
      }
      .title {
        background-image: url('/src/assets/images/nav-l-t-bg.png');
        background-size: 100% 100%;

        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;
        }
      }
    }
    .top-box {
      text-align: left;
      font-weight: 400;
      font-size: vw(18);
      color: rgba(255, 255, 255, 0.7);
      line-height: 21px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      .title {
        font-weight: 600;
        font-size: vw(15);
        text-align: left;
        font-style: normal;
        text-transform: none;
        height: vh(35);
        line-height: vh(34);
        padding-left: vw(20);
        // background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
      }
      .ul {
        .li {
          background: url('/src/assets/images/m-nav-bg-1.png');
          background-size: 100% 100%;
          width: vw(250);
          height: vh(58);
          line-height: vh(58);
          text-align: center;
          margin-bottom: vh(15);
        }
        .active {
          background: url('/src/assets/images/m-nav-bg-2.png');
          background-size: 100% 100%;
          // width:vw(178);
        }
      }
    }
  }

  .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(410);
      height: vh(300);
      padding: vw(10);
      background-image: url('/src/assets/images/item-primary.png');
      background-size: 100% 100%;
      &:nth-child(5n) {
        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(286);
    }

    &-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>
