<template>
  <div class="video-box">
	  <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="type-item" v-for="(item,index) in videoList">
				<div class="type-title">{{item.label}}</div>
				<draggable
				:data-item-index="index"
				class="item-element"
				:item-key="item.key"
				:list="item.videos"
				ghost-class="ghost"
				:force-fallback="true" chosen-class="chosenClass" animation="300"
					@start="onStart" @end="onEnd">
					<template #item="{ element }">
						<div class="video-item" :style="{
							width:(100/grad)+'%'
						}">

							<div class="video-item__inner" @click.stop="handleCamera(element.cameraIndexCode,element,index)">
								<div
									v-if="element.isDiy == 1"
									class="video-item__follow"
									@click.stop="handleCollect(element.cameraIndexCode, element.isDiy, index,element)"
									>取消收藏
								</div>
								<div
									v-if="element.isDiy == 0"
									class="video-item__unfollow"
									@click.stop="handleCollect(element.cameraIndexCode, element.isDiy, index,element)"
									>收藏
								</div>
								<video
									class="video-item__video"
									:id="'collectmonitorVideo' + element.cameraIndexCode"
									preload="auto"
									muted
									autoplay
									:controls="false"
								/>
								<p class="video-item__title--primary">
									{{ element.cameraName || element.cameraIndexCode }}
								</p>
							</div>
						</div>
					</template>

				</draggable>
			</div>

	    </div>
	  </div>
  </div>
  <VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" @isDiyChange="isDiyChange" :isDiy="isDiy"  :isCollect="isCollect" :src="videoSrc" />
</template>

<script setup>
	import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
	import {
	  getVideoTypeApi,
	  getVideoRegionsApi,
	  postVideoRemainApi,
	  postVideoControlApi,
	  postVideoCollectApi
	} from '@/api/monitor'
	import draggable from 'vuedraggable';
	import pubSub from 'pubsub-js'
	import Hls from 'hls.js'
	import emptyIco from '@/assets/images/n-icon.png'
	import { debounce } from 'lodash'
  import WebRTCWhep from 'whepts'
	// 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 webrtcRefs = []
	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 grad = ref(3)
	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 isDiyChange = (val)=>{
		console.log(val,11222)
		isDiy.value = val
		if(!val){
			show.value = false
			videoList.value[diyIndex.value].videos = videoList.value[diyIndex.value].videos.filter(item => item.cameraIndexCode !== cameraIndexCode.value);
		}
		// videoList.value[diyIndex.value].videos.forEach(async (it, i) => {

		// 	if(it.cameraIndexCode == cameraIndexCode.value){
		// 		it.isDiy = val
		// 	}
		// })
	}
	const onStart = (res)=>{

	}
	const onEnd = (evt)=>{
		 const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
		getVideCollectCateSort({
			key:videoList.value[itemIndex].key,
			cameraIndexCodes:videoList.value[itemIndex].videos.map((item) => item.cameraIndexCode)
		}).then((ress)=>{

			// getVideCollectCateList()
		})
		// postVideoRemain()
		initVideo()
	}
	// 获取关注列表
	const  getVideCollectCateList = async () => {
		clearHlsRefs()
		params.businessVideoDisplayPosition = ''
	  let res = await getVideCollectCate(params)
	  videoList.value = res.data
	  if(videoList.value.length<=3){
		  grad.value = 3
	  }else if(videoList.value.length<=6){
		  grad.value = 2
	  }else{
		  grad.value = 1
	  }
	  postVideoRemain()
	  // total.value = res.total

	  initVideo()
	}
	// 收藏
	const handleCollect = async (id, status, index,element) => {
	  await getColletDiyApi({
	    cameraIndexCode:id,
	    isDiy: status == 0 ? 1 : 0
	  })
	  if (status == 0) {

	    element.isDiy = 1

	  } else {

		videoList.value[index].videos = videoList.value[index].videos.filter(item => item.cameraIndexCode !== id);
		console.log('取消收藏',)
	    element.isDiy = 0
		show.value = false
	  }
	  // 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('')
	let diyIndex = ref(null)
	const handleCamera = async (itemCode,resource,index) => {
		diyIndex.value = index
	  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) => {
        try{
          item.destroy()
        }catch (e) {

        }
      })
      hlsRefs = []
    }
    if(webrtcRefs.length>0){
      webrtcRefs.map((item) => {
        try{
          item.close()
        }catch (e) {

        }
      })
      webrtcRefs = [];
    }
	}
	// 分页
	const currentChange = (e) => {
	  clearHlsRefs()
	  videoList.value = []
	  getRegionsList()
	}

	let thisVideo = ref(null)
	const handleItemVideo = (url, type, code,item) => {
	  thisVideo.value = item
	  videoLog.value = 2
	  cameraIndexCode.value = code
	  setTimeout(() => {
	    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 createPlayer = (cameraIndexCode,videoElement) => {
    getPreviewUrlApi({
      type: 'hls',
      cameraIndexCode: cameraIndexCode
    }).then(res=>{
      const url = res.data.url;
      if(url.startsWith('http://192.168.77.200:8050/')){
        const player = new WebRTCWhep({
          url: url, // WHEP 服务器地址
          container: videoElement, // 视频播放容器
          onError: (error) => {
            console.error('播放错误:', error)
          }
        })
        webrtcRefs.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 initVideo = () => {
	  clearHlsRefs()
	  nextTick(() => {
	    videoList.value.forEach(async (it, i) => {

			it.videos.forEach((item,index)=>{
				 setTimeout(() => {
					const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
           createPlayer(item.cameraIndexCode,video);
				 }, 1000)

			})

	    })
	  })
	}
	watch(
	  () => videoList.value,
	  (val) => {
	    if (val.length) {
	      postVideoRemain()
	    }
	  },
	  { immediate: true }
	)
	// 更新视频
	const postVideoRemain = async () => {
	  // timer = setInterval(() => {
		// clearInterval(timer)
		//   videoList.value.forEach((items,index)=>{
		// 	  setTimeout(()=>{
		// 		  postVideoRemainApi({
		// 		    cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
		// 		  })
		// 	  },1500)
		//
		//   })
	  //
	  // }, 1500)
	}
	const getVideoRegions = async () => {
	  let res = await getVideoRegionsApi({
	    cameraName: cameraName.value,
	    businessScenicArea: params.businessScenicArea
	  })
	  console.log(res,11111111111111)
	  regionList.value = res.data
	  regionList.value.forEach((item,index)=>{
	  	// item.show = true
	  	item.videoResources=item.resourcesList[0].videoResources
	  })
	  regionList.value[0].show = true

	}
	const handleRegions = (e) => {
	  regionList.value[e].show = !regionList.value[e].show
	}
	const onInput = debounce((e) => {
	  getVideoRegions()
	}, 500)
	let hotelChange = null;
	onMounted(()=>{
		getVideCollectCateList()
		console.log(draggable,'draggable')
	})
	onUnmounted(() => {
		if (timer) clearInterval(timer)
	  clearHlsRefs()

	})
</script>
<style></style>
<style scoped lang="scss">
	.type-item{
		// width:32.5%;
		flex: 1;
		border:vw(2) solid #0096FF;
		padding:vh(40) vw(20);
		position:relative;
		height:vh(900);
		padding-bottom:vh(20);
		.item-element{
			display: flex;
			align-items: flex-start;
			height:100%;
			flex-wrap: wrap;
			 // gap: vw(10);
			// width:vw(800);
			&::-webkit-scrollbar {
			  width: vw(4); /* 滚动条的宽度 */
			}
			/* 滚动条轨道 */
			&::-webkit-scrollbar-track {
			  background: 'transparent'; /* 轨道的背景色 */
			}
			/* 滚动条滑块 */
			&::-webkit-scrollbar-thumb {
			  background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
			  border-radius: 5px; /* 滑块的圆角 */
			}
			overflow: auto;
		}

		.type-title{
			position:absolute;
			left:vw(-5);
			top:0;
			color:#fff;
			background: url(@/assets/images/nav-l-t-bg.png) no-repeat;
			background-size: 100%;
			width:100%;
			height:vh(30);
			padding:0 vw(30);
			font-size:vw(24);
			line-height:vh(30);
			// line-height: vh(40);
		}
	}
	 .type-item:first-child {
	    margin-right: vw(20);
	  }
	  .type-item:last-child {
	    margin-left:  vw(20);
	  }
	.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;
    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(300);
        padding: vh(12) vw(12);
        box-sizing: border-box;
        background-image: url('@/assets/images/item-primary.png');
        background-size: 100% 100%;
		margin-bottom:vh(10);
        > 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(3);

      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
	  // height:vh(890);
	  // width:vw(800);
	  // &::-webkit-scrollbar {
	  //   width: vw(4); /* 滚动条的宽度 */
	  // }
	  // /* 滚动条轨道 */
	  // &::-webkit-scrollbar-track {
	  //   background: 'transparent'; /* 轨道的背景色 */
	  // }
	  // /* 滚动条滑块 */
	  // &::-webkit-scrollbar-thumb {
	  //   background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
	  //   border-radius: 5px; /* 滑块的圆角 */
	  // }
	  // overflow: auto;

    }
    &-item {
      position: relative;
      // width: vw(720);
	  // width:48%;
	  // margin-right: 1%;
      height: vh(275);
      padding: vh(10) vw(10);
	  box-sizing: border-box;
	  margin-bottom:vh(6);
      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(260);
	  // height:100%;
      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>
