<template>
	<!-- 视频 -->
	<div class="box-3-content">
		<navLeft></navLeft>
		
		<!-- 视频 -->
		<div class="video-box">
			<div class="flex video-one-1" v-if="videoLog == 1">
				<div @click="handleItemVideo" class="v-item " :class="index==0?'v-error-bg':''" v-for="(item,index) in 15">
					  <vue3VideoPlay  v-bind="options"/>
				</div>
					
			</div>
			
			<div class="video-live flex" v-if="videoLog==2">
				<div class="video-lt v-error-bg">
					<div class="desc">核心路段：这是一条信息说明</div>
					<vue3VideoPlay  v-bind="options"/>
				</div>
				<div class="video-rt">
					<div class="title">
						<span>最近联系</span>
					</div>
					<div class="rt-v-box">
						<div class="rt-video v-error-bg" v-for="item in 8">
							<div class="desc">核心路段：这是一条信息说明</div>
							<vue3VideoPlay  v-bind="options"/>
						</div>
						
					</div>
					
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { fitChartSize } from '@/utils/dataUtil'
	import navLeft from '@/components/navLeft/index.vue'
	let searchValue = ref('')
	const options = reactive({
	    src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
	    type: 'm3u8', //视频类型
		width:"100%",
		height:"100%",
		color: "#409eff", //主题色
		title: "", //视频名称
		muted: false, //静音
		webFullScreen: false,
		speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
		autoPlay: true, //自动播放
		loop: false, //循环播放
		mirror: false, //镜像画面
		ligthOff: false, //关灯模式
		volume: 0.3, //默认音量大小
		control: true, //是否显示控制
		controlBtns: [
		    // "audioTrack",
		    // "quality",
		    // "speedRate",
		    // "volume",
		    "setting",
		    "pip",
		    "pageFullScreen",
		    "fullScreen",
		], //显示所有按钮,
	});
	const videoLog = ref(1)
	const handleItemVideo = ()=>{
		console.log('单击视频')
		videoLog.value = 2
	}
	
</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-3-content{
		width:vw(2356);
		height:vh(965);

		margin-top: vh(120);
		display: flex;
		.video-box{
			flex:1;
			display:flex;
			.video-one-1{
				background-image: url('/src/assets/images/log-v-bg.png');
				background-size: 100% 100%;
				flex-wrap: wrap;
				padding-top:0;
				padding:vh(30) vw(20);
				margin-left:vw(20);
			}
			.video-live{
				justify-content: space-between;
				margin-left:vw(10) ;
				.video-lt{
					width:vw(1666);
					height:vh(950);
					background-image: url('/src/assets/images/one-video-bg.png');
					background-size: 100% 100%;
					padding:vh(40) vw(50);
					position:relative;
					.desc{
						position:absolute;
						// width:100%;
						left:vw(50);
						right:vw(50);
						top:40(vh);
						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);
					}
				}
				.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;
						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);
						}
					}
				}
			}
			.v-item{
				width:vw(400);
				height:vh(300);
				background-image: url('/src/assets/images/v-item-bg.png');
				background-size: 100% 100%;
				padding:vw(20);
				margin-right:vw(4);
				margin-bottom:vh(4);
			}
			.v-error-bg{
				background-image: url('/src/assets/images/v-item-bg-1.png');
				background-size: 100% 100%;
			}
		}
		
	}
</style>