<template>
  <div class="video-box">
	  <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
	  	 :class="{ active: current == 3 }"
	  	@click="handleNav(3)" class="li">
	  		<span>自定义</span>
	  	</div>
	    </div>
	    <div class="bom-box">
	      <Title2 title="检索" />
	      <div class="search-box">
	        <el-input placeholder="请输入内容" v-model="cameraName" @input="onInput" />
	        <img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
	      </div>

	      <div class="tree-box">
	        <div class="tree-item" v-for="(item, i) in regionList" :key="i">
	          <div class="tree-item__node" @click="handleRegions(i)">
	            <img
	              class="tree-item__icon"
	              :class="{ 'tree-item__icon-up': item.show }"
	              src="@/assets/images/arrow-down.png"
	              alt=""
	            />
	            <span class="tree-item__name">{{ item.regions }}</span>
	          </div>
	          <div v-if="item.show" class="tree-item__child">
	            <div
	              class="tree-item__child-item"
	              v-for="(resource, x) in item.videoResources"
	              :key="x"
	              @click="handleCamera(resource.cameraIndexCode,resource)"
	            >
	              {{ resource.cameraName || resource.cameraIndexCode }}
	            </div>
	          </div>
	        </div>
	      </div>
	    </div>
	  </div>
	  <div v-if="videoLog == 1" class="video-wrapper">
	    <div class="video-list">
			<div class="empty-box" v-if="videoList.length==0&&cond">
						加载中...
			</div>
	      <div
	        class="video-item"
	        v-for="(item, index) in videoList"
	        :key="index"
	        @click="handleItemVideo(item.hlsUrl, 100, item.cameraIndexCode,item)"
	      >
	        <div class="video-item__inner">
	          <div
	            v-if="item.isCollect == 1"
	            class="video-item__follow"
	            @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
	            >取消关注
	          </div>
	          <div
	            v-if="item.isCollect == 0"
	            class="video-item__unfollow"
	            @click.stop="handleCollect(item.cameraIndexCode, item.isCollect, index)"
	            >关注
	          </div>
	          <video
	            class="video-item__video"
	            :id="'hotelmonitorVideo' + index"
	            preload="auto"
	            muted
	            autoplay
	            :controls="false"
	          >
	            <source type="application/x-mpegURL" />
	          </video>
	          <p class="video-item__title--primary">
	            {{ item.cameraName || item.cameraIndexCode }}
	          </p>
	        </div>
	      </div>

	    </div>
	    <div class="pagination">
	      <el-pagination
	        v-model:current-page="params.pageNum"
	        :page-size="params.pageSize"
	        :total="total"
	        background
	        layout="prev, pager, next"
	        @current-change="currentChange"
	      />
	    </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>
	        <source type="application/x-mpegURL" />
	      </video>
	      <div class="action-box">
			  <div class="action-item">
			    <span class="item-sc" @click="handleCollect(thisVideo.cameraIndexCode, thisVideo.isCollect, index)" v-if="thisVideo.isCollect==0">关注</span>
			    <span class="item-sc" @click="handleCollect(thisVideo.cameraIndexCode, thisVideo.isCollect, index)" v-else="thisVideo.isCollect==1">取消关注</span>
			  </div>
	        <div class="action-item">
	          <img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
	          <span>聚焦</span>
	          <img src="@/assets/images/minus.png" title="焦距变小" @click="handleAction(Z00M_OUT)" />
	        </div>
	        <div class="action-item">
	          <img src="@/assets/images/up.png" title="上转" @click="handleAction(UP)" />
	          <img src="@/assets/images/down.png" title="下转" @click="handleAction(DOWN)" />
	          <img
	            class="pause"
	            src="@/assets/images/pause.png"
	            title="停止操作"
	            @click="handleAction(STOP)"
	          />
	          <img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
	          <img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
	        </div>
	      </div>
	    </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, item.cameraIndexCode,item)"
	        >
	          <div>
	            <p class="item-title--primary">
	              {{ item.cameraName || item.cameraIndexCode }}
	            </p>
	            <video
	              class="item-img"
	              :id="'hotelmonitorVideo' + index"
	              muted
	              autoplay
	              :controls="false"
	              style="object-fit: cover"
	            >
	              <source src="" type="application/x-mpegURL" />
	            </video>
	          </div>
	        </li>
	      </ul>
	    </div>
	  </div>

   <!-- <ul class="videos">
      <li class="video-item" v-for="item in 8" :key="item">
        <img src="@/assets/images/sxzd.png" alt="" />
        <p>
          <span>核心路段：这是一条信息说明</span>
        </p>
      </li>
    </ul> -->
  <!--  <div class="pagination-box">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </div> -->
  </div>
  <VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isDiy="isDiy"  :isCollect="isCollect" :src="videoSrc" />
</template>

<script setup>
	import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
	import {
	  getVideoTypeApi,
	  getVideoRegionsApi,
	  postVideoRemainApi,
	  postVideoControlApi,
	  postVideoCollectApi
	} from '@/api/monitor'
	import pubSub from 'pubsub-js'
	import Hls from 'hls.js'
	import emptyIco from '@/assets/images/n-icon.png'
	import { debounce } from 'lodash'
  import mpegtsjs from "mpegts.js";
	// const Z00M_IN = 'ZOOM_IN' // 焦距变大
	// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
	// const UP = 'UP' // 上转
	// const DOWN = 'DOWN' // 下转
	// const LEFT = 'LEFT' // 左转
	// const RIGHT = 'RIGHT' // 右转
	// const STOP = 'STOP' // 停止操作
  const Z00M_IN = 'zoomin' // 焦距变大
  const Z00M_OUT = 'zoomout' // 焦距变小
  const UP = 'up' // 上转
  const DOWN = 'down' // 下转
  const LEFT = 'left' // 左转
  const RIGHT = 'right' // 右转
  const STOP = 'stop' // 停止操作
	let cond = ref(false)
	let ACTION = '0'
	let hlsRefs = []
	let hlsRef = null
	let timer = null
	let videoLog = ref(1)
	let videoList = ref([])
	let cameraIndexCode = ref('')
	let videoRef = ref()
	let monitorChange = null
	let total = ref(0)
	let loading = ref(false)
	let command = ref('')
	let cameraName = ref('')
	let regionList = ref()
	let params = reactive({
	    businessScenicArea: "",
	    cameraName: "",
		pageNum: 1,
		pageSize: 6,
	})
	let show = ref(false)
	const onMonitorChange = () => {
	  monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
	    params.businessScenicArea = data.name
	    params.pageNum = 1
	    videoList.value = []
	    total.value = 0
		cond.value = false
	    getRegionsList()
	  })
	}
	// 关注
	const handleCollect = async (id, status, index) => {
	  await postVideoCollectApi({
	    cameraIndexCode:id,
	    isCollect: status == 0 ? 1 : 0
	  })
	  if (status == 0) {
      if(thisVideo.value){
        thisVideo.value.isCollect=1
      }
	    videoList.value[index].isCollect = 1
	  } else {
      if(thisVideo.value){
        thisVideo.value.isCollect=0
      }
	    videoList.value[index].isCollect = 0
	  }
	  pubSub.publish('videoCollect', id)
	}
	// 采集
	const handleAction = async (e) => {
	  if (e == STOP) {
	    ACTION = '1'
      command.value = e
	  } else {
	    ACTION = '0'
	    command.value = e
	  }
	  await postVideoControlApi({
	    action: ACTION,
	    command: command.value,
	    cameraIndexCode: cameraIndexCode.value
	  })
	  if (e == STOP) {
	    command.value = ''
	  }
	  ElMessage({
	    message: '操作成功',
	    type: 'success'
	  })
	}
	// 返回列表
	const handleBack = () => {
	  videoLog.value = 1
	  hlsRef.destroy()
	  initVideo()
	}
	let isCollect = ref(0)
	let isDiy = ref(0)
	let videoSrc = ref('')
	const handleCamera = async (itemCode,resource) => {
	  show.value = true
	  let res = await getPreviewUrlApi({
	    type: 'hls',
	    cameraIndexCode:itemCode
	  })
	  cameraIndexCode.value = itemCode;
	  isCollect.value = resource.isCollect
	  isDiy.value = resource.isDiy
	  videoSrc.value = res.data.url
	}
	//清除 hls
	const clearHlsRefs = () => {
	  if (hlsRefs.length > 0) {
	    hlsRefs.map((item) => {
	      item.destroy()
	    })
	    hlsRefs = []
	  }
	}
	// 分页
	const currentChange = (e) => {
	  clearHlsRefs()
	  videoList.value = []
	  getRegionsList()
	}
  const createPlayer = (cameraIndexCode,videoElement) => {
    getPreviewUrlApi({
      type: 'hls',
      cameraIndexCode: cameraIndexCode
    }).then(res=>{
      const url = res.data.url;
      if(url.startsWith('ws')){
        const player = mpegtsjs.createPlayer({
          url: url,
          type: 'flv',
          isLive: true,
          hasAudio: false
        })
        player.attachMediaElement(videoElement)
        player.load()
        player.play()
        // 错误处理和重连机制
        player.on(mpegtsjs.Events.ERROR, (err) => {
          player.unload();
          player.destroy();
          console.error('播放器错误:', err)
          // 3 秒后尝试重新加载
          setTimeout(() => {
            console.error('重新加载【'+cameraIndexCode+'】' )
            createPlayer(cameraIndexCode,videoElement);
          }, 3000)
        })

        hlsRefs.push(player)
      }
      else{
        const player = new Hls({
          maxBufferLength: 10, // 最大缓冲长度（秒）
          maxMaxBufferLength: 15, // 缓冲区长度的上限
          maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
        })
        player.loadSource(url)
        player.attachMedia(videoElement)
        player.on(Hls.Events.MANIFEST_PARSED, () => {
          videoElement.play()
        })
        player.on(Hls.Events.ERROR, (event, data) => {
          // 根据错误类型进行处理
          if (data.fatal) {
            switch (data.type) {
              case Hls.ErrorTypes.NETWORK_ERROR:
                console.log('网络错误，尝试重新加载');
                player.startLoad();
                break;
              case Hls.ErrorTypes.MEDIA_ERROR:
                console.log('媒体错误，尝试修复');
                player.recoverMediaError();
                break;
              default:
                console.log('无法恢复的错误，销毁播放器');
                // hls.destroy();
                break;
            }
          }
        })
        hlsRefs.push(player)
      }
    })
  }
	//获取酒店视频列表
	const getRegionsList = async()=>{
		clearHlsRefs()
		videoLog.value = 1
		try {
		    if (loading.value) return
			let res = await getRegionsListApi({...params})
		    if (res.data.length > 0) {
			   videoList.value = res.data
			   cond.value = true
			   total.value = res.total
			   nextTick(() => {
				   if(!videoList.value.length) return false
			     videoList.value.forEach(async (x, index) => {
             const video = document.getElementById(`hotelmonitorVideo${index}`)
             createPlayer(x.cameraIndexCode,video);
			     })
			   })
		    } else {
				videoList.value = []
				cond.value = true
			  if (timer) clearInterval(timer)
			}
			loading.value = false
	    }catch (error) {
			loading.value = false
		}

	}
	let thisVideo = ref(null)
	const handleItemVideo = async (url, type, code, item) => {
    let res = await getPreviewUrlApi({
      cameraIndexCode: code,
      type: 'hls'
    })
    url = res.data.url
    thisVideo.value = item
    videoLog.value = 2
    cameraIndexCode.value = code
    setTimeout(() => {
      if (url.startsWith('ws')) {
        const player = mpegtsjs.createPlayer({
          url: url,
          type: 'flv',
          isLive: true,
          hasAudio: false
        })
        player.attachMediaElement(videoRef.value)
        player.load()
        player.play()

        // 错误处理和重连机制
        player.on('error', (err) => {
          // 3 秒后尝试重新加载
          setTimeout(() => {
            player.load()
            player.play()
          }, 3000)
        })
      } else {
        hlsRef = new Hls({
          maxBufferLength: 10, // 最大缓冲长度（秒）
          maxMaxBufferLength: 15, // 缓冲区长度的上限
          maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
        })
        hlsRef.loadSource(url)
        hlsRef.attachMedia(videoRef.value)
        hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
          videoRef.value.play()
        })
      }

      if (type == 100) initVideo()
    }, 1000)
  }
	const initVideo = () => {
	  clearHlsRefs()
	  nextTick(() => {
	    videoList.value.forEach(async (item, index) => {
	      const video = document.getElementById(`hotelmonitorVideo${index}`)
        createPlayer(item.cameraIndexCode,video);
	    })
	  })
	}
	watch(
	  () => videoList.value,
	  (val) => {
	    if (val.length) {
	      postVideoRemain()
	    }
	  },
	  { immediate: true }
	)
	// 更新视频
	const postVideoRemain = async () => {
	  // timer = setInterval(() => {
	  //   postVideoRemainApi({
	  //     cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
	  //   })
	  // }, 1500)
	}
	const getVideoRegions = async () => {
	  let res = await getVideoRegionsApi({
	    cameraName: cameraName.value,
	    businessScenicArea: params.businessScenicArea
	  })
	  regionList.value = res.data[0].resourcesList;
	  // regionList.value.forEach((item,index)=>{
	  // 	// item.show = true
	  // 	item.videoResources=item.resourcesList[0].videoResources
	  // })
	  regionList.value[0].show = false

	}
	const handleRegions = (e) => {
	  regionList.value[e].show = !regionList.value[e].show
	}
	const onInput = debounce((e) => {
	  getVideoRegions()
	}, 500)
	let hotelChange = null;
	onMounted(()=>{
		hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
			cameraName.value = ''
			params.businessScenicArea = data.name
			getVideoRegions()

		})
		onMonitorChange()

	})
	onUnmounted(() => {
	  clearHlsRefs()
	  if (hotelChange) pubSub.unsubscribe(hotelChange)
	  if (timer) clearInterval(timer)
	  pubSub.unsubscribe(monitorChange)
	})
</script>
<style></style>
<style scoped lang="scss">
	.item-sc{
	  padding:vw(10);
	}
	.empty-box{
		display:flex;
		align-items: center;
		font-size:vw(40);
		height:vh(750);
		justify-content: center;
		text-align:center;
		width:100%;
		color:#fff;
	}
	.action {
	  &-box {
	    margin-top: vh(16);
	    gap: vw(20);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	  }
	  &-item {
	    padding: vw(16);
	    display: flex;
	    align-items: center;
	    background: #0a4190;
	    border-radius: vw(8);
	    > img {
	      cursor: pointer;
	      width: vw(34);
	      height: auto;
	    }
	    > span {
	      margin: 0 vw(16);
	      font-weight: 400;
	      font-size: vw(16);
	      color: #ffffff;
	    }
	    .pause {
	      margin: 0 vw(10);
	    }
	  }
	}
  .video-box {

	display: flex;
	flex: 1;
    flex: 1;
    height: vh(950);
    margin-top: vh(120);
    margin-left: vw(10);
    padding: vh(34) vw(26);
    box-sizing: border-box;
    background-image: url('@/assets/images/one-video-bg.png');
    background-size: 100% 100%;
    .videos {
      display: flex;
      flex-wrap: wrap;
      gap: vw(6);
      .video-item {
        position: relative;
        width: vw(210);
        height: vh(380);
        padding: vh(12) vw(12);
        box-sizing: border-box;
        background-image: url('@/assets/images/item-primary.png');
        background-size: 100% 100%;
        > img {
          width: 100%;
          height: 100%;
        }
        > p {
          position: absolute;
          width: calc(100% - vw(24));
          height: vh(40);
          bottom: vh(12);
          background: rgba(4, 30, 69, 0.72);
          > span {
            padding-left: vw(20);
            font-weight: 400;
            font-size: vw(14);
            color: #ffffff;
            line-height: vh(40);
          }
        }
      }
    }
    .pagination-box {
      margin-top: vh(30);
      margin-right: vw(50);
      display: flex;
      justify-content: flex-end;
    }
  }
  .video {
    &-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      margin-top: vh(40);
      margin-left: vw(10);
      // padding: vh(30) vw(20);
      // box-sizing: border-box;
      // background-image: url('/src/assets/images/log-v-bg.png');
      // background-size: 100% 100%;
      .pagination {
        padding: vh(10) vw(30);
        position: absolute;
        right: vw(30);
        bottom: vh(20);
      }
    }
    &-list {
      gap: vw(8);
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }
    &-item {
      position: relative;
      // width: vw(720);
	  width:33%;
      height: vh(380);
      padding: vh(10) vw(10);
      background-image: url('/src/assets/images/item-primary.png');
      background-size: 100% 100%;
      &:hover {
        .video-item__follow {
          display: block !important;
        }
      }
    }
    &-item__follow {
      cursor: pointer;
      display: none;
      position: absolute;
      right: vw(8);
      top: vw(8);
      z-index: 9999;
      padding: 0 vw(20);
      height: vh(24);
      text-align: center;
      line-height: vh(24);
      font-weight: 400;
      font-size: vw(16);
      color: #ffffff;
      background-image: url('@/assets/images/unfollow.png');
      background-size: 100% 100%;
    }
    &-item__unfollow {
      @extend .video-item__follow;
      background-image: url('@/assets/images/unfollow.png');
    }

    &-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(366);
      object-fit: fill;
    }
    &-detail {
      margin-left: vw(10);
      display: flex;
      justify-content: space-between;
    }
    &-detail__wrapper {
      position: relative;
      padding: vh(40) vw(50);
      width: vw(2060);
      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(780);
      object-fit: contain;
      background-color: #000;
    }
    &-right {
      margin-left: vw(8);
      width: vw(440);
      height: vh(890);
      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(870);
        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);
          }
        }
      }
    }
}
 .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);
        height: vh(36);
        border: 1px solid #0096ff;
        margin: vh(10) auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

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

      .tree-box {
        position: relative;
        height: vh(750);
        padding: 0 vw(20);
        overflow-y: auto;
        overflow-x: hidden;
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
          width: vw(4); /* 滚动条的宽度 */
        }
        /* 滚动条轨道 */
        &::-webkit-scrollbar-track {
          background: 'transparent'; /* 轨道的背景色 */
        }
        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
          border-radius: 5px; /* 滑块的圆角 */
        }
        .tree-item {
          cursor: pointer;
          position: relative;
          padding-top: vh(20);
          // border-left: vw(2) solid #37d8fc;
          &:nth-child(1) {
            padding-top: 0;
          }
          &__node {
            position: relative;
            display: flex;
            align-items: flex-start;
          }
          &__icon {
            margin-left: vw(-8);
            width: vw(16);
            height: auto;
          }
          &__icon-up {
            @extend .tree-item__icon;
            transform: rotate(180deg);
          }
          &__name {
            padding: 0 vw(20);
            display: block;
            font-weight: 400;
            font-size: vw(15);
            color: #ffffff;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
          &__child {
            position: relative;
            margin-top: vh(20);
            margin-left: vw(20);
            // border-left: vw(2) solid #37d8fc;
          }
          &-top__icon {
            position: absolute;
            left: vw(-8);
            top: vh(0);
            width: vw(16);
            height: vw(16);
          }
          &-bottom__icon {
            position: absolute;
            left: vw(-8);
            bottom: vh(0);
            width: vw(16);
            height: vw(16);
          }
          &__child-item {
            padding: vh(0) vw(20) vh(20) vw(20);
            cursor: pointer;
            color: rgb(192,216,254);
            font-weight: 400;
            font-size: vw(15);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            align-items: flex-start;
            &:nth-last-of-type(1) {
              padding: vh(0) vw(20);
            }
          }
        }
      }
    }
}
 //背景色设置为透明
  :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;
  }
  :deep(.el-input__inner) {
    height: vh(36);
    font-size: vw(16);
    color: #ffffff;
  }
</style>
