<template>
	<div class="flex" style="height: calc(100vh - 84px)">
		<div style="height: 100%;">
			<scrollContainer style="width: 180px; height:calc(100% - 30px); overflow-x: hidden">
				<el-menu style="min-height: 100%;" @select="handleSelect">
					<el-menu-item :index="''+item.camera_id" v-for="(item, index) in cameraList" :key="index">
						<template #title>
							<span class="iconfont icon-shexiangtou text-blue margin-right-xs"></span>
							<span>{{item.camera_name}}</span>
						</template>
					</el-menu-item>
				</el-menu>
			</scrollContainer>
			<div style="height: 30px;line-height: 30px;font-size: 14px;text-align: center;">
				<a :href="baseUrl+'alarm_folder/html_images/webrtc.rar'">下载播放插件</a>
			</div>
		</div>
		<div class="flex-sub padding-xs" style="height: 100%;">
			<div id="vidBox">
				<div class="noVid" :style="'background-image: url('+baseUrl+'alarm_folder/html_images/novideo.png);'" v-if="!playSucc"></div>
				<div class="vidName">
					<span>{{vidName}}</span>
					<img :src="baseUrl+'alarm_folder/html_images/cha.png'" style="width: 12px;cursor: pointer;" alt="" @click="closeVideo">
				</div>
				<video id="video" autoplay muted controls/>
			</div>
			<!-- <iframe src="http://192.168.4.178:32000/newRtsp/test.html" 
				style="width: 100%;height: 100%;" frameborder="0" ref="ifSrc"></iframe> -->
		</div>
	</div>
</template>

<script setup>
	import { listCamera, getCamera } from "@/api/camera";
	import { onMounted,onBeforeUnmount } from 'vue';
	// const baseUrl = import.meta.env.VITE_APP_BASE_API;
	const baseUrl = location.protocol+"//"+window.location.host+"/";
	const { proxy } = getCurrentInstance();
	const loading = ref(false);
	const playSucc = ref(false);
	const vidName = ref("驾驶台");
	
	const cameraList = ref([]);
	let webRtcServer = null;
	const handleSelect = (key) => {
		getCamera(key).then(response => {
			webRtcServer.connect(response.data[0].camera_rtsp);
			vidName.value = response.data[0].camera_name;
			playSucc.value = true;
		})
	};
	const closeVideo = function(){
		playSucc.value = false;
		webRtcServer.connect(null);
	}
	function getCamList() {
		listCamera({}).then((response) => {
			cameraList.value = response.data;
		});
	}
	getCamList();
	onMounted(() => {
		webRtcServer = new WebRtcStreamer("video","http://127.0.0.1:8000");
	});
	onBeforeUnmount(() => {
		webRtcServer.disconnect(); 
	});
</script>

<style>
	.el-menu-item{
		height: calc(var(--el-menu-icon-width) + 4px);
		line-height: calc(var(--el-menu-icon-width) + 4px);
	}
	#vidBox{
		position: relative;
		width: 100%;
		height: 100%;
	}
	#vidBox .noVid{
		position: absolute;
		width: 100%;
		z-index: 445;
		width:100%;
		height:100%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	#vidBox video{
		width:100%;
		height:100%;
		background-color: #000;
	}
	#vidBox .vidName{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 444;
		font-size: 14px;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		background-color: rgba(0,0,0,0.4);
	}
</style>