<template>
	<div class="padding-lr-xs" style="height: calc(100vh - 84px)" v-loading="loading">
		<el-row :gutter="20">
			<!--部门数据-->
			<el-col :span="3" :xs="24">
				<div class="head-container">
					<el-input placeholder="请输入关键词" @input="inpSear" v-model="inpVal"
						clearable prefix-icon="Search" style="margin-top: 10px" />
				</div>
				<div class="head-container" style="height: calc(100vh - 126px);overflow-y: auto;">
					<div v-for="(item, index) in dataObj" :key="index" @click="handleSelect(item.deviceSerial+''+item.channelNo)"
						class="padding-tb-xs padding-lr-sm text-sm pointer">
						<svg-icon :icon-class="item.status==1?'shexiangtou':'shexiangtounot'" 
							class="margin-right-xs text-bold text-lg" style="color: var(--el-color-primary);" />
						<span :class="(nowObj.deviceSerial+''+nowObj.channelNo) == (item.deviceSerial+''+item.channelNo)?'text-blue':''">{{item.channelName}}</span>
					</div>
				</div>
			</el-col>
			<!--用户数据-->
			<el-col :span="21" :xs="24">
				<div style="height: calc(100vh - 84px);width: 100%;">
					<div style="height: calc(100% - 40px);width: 100%;" class="flex flex-wrap" ref="videoRef">
						<div class="videobox">
							<div class="noBg" v-show="!playSucc"></div>
							<div id="playWind"></div>
						</div>
					</div>
					<div class="Tool">
						<div class="videoTool">
							<el-tooltip class="item" effect="dark" content="暂停/播放" placement="top">
								<svg-icon :icon-class="pauseSucc?'pause':'bofang'" 
									v-show="playSucc" @click="changPause"/>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="截图" placement="top">
								<svg-icon icon-class="camerafull" @click="capPic"/>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="声音" placement="top">
								<svg-icon :icon-class="audioSucc?'shengyin_kai':'shengyin_guan'" @click="changAudio"/>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="录像" placement="top">
								<svg-icon :icon-class="videoTape?'radio':'luxiang'" :style="'color:'+(videoTape?'red':'')" @click="changTape"/>
							</el-tooltip>
						</div>
						<div>
							<el-tooltip class="item" effect="dark" content="关闭" placement="top">
								<svg-icon icon-class="guanji" style="color: red;" @click="closeVideo"/>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="全屏" placement="top">
								<svg-icon icon-class="fullscreen" style="font-size: 0.9em;" @click="fullVideo"/>
							</el-tooltip>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	// import { getOpenLi } from "@/api/caps/allReq";
	import EZUIKit from "ezuikit-js";
	import Cookies from "js-cookie";
	const store = useStore();
	const { proxy } = getCurrentInstance();
	const loading = ref(false);
	const playSucc = ref(false);
	const pauseSucc = ref(true);
	const videoTape = ref(false);
	const audioSucc = ref(false);
	var playerS = null, searObj = [],allObj = [];
	const videoRef = ref(null)
	const dataObj = ref([]);
	const nowObj = ref({});
	const inpVal = ref("");
	const data = reactive({
		queryParams: {
			deviceSerial: "",
			// accessToken:Cookies.get("Open-Token")?\
			accessToken: "at.67unn09i1dzikb4n8mz3p5yqc85x39wl-2do2ho4j8f-1gruoms-zxts3ds0u"
		}
	});
	const { queryParams } = toRefs(data);
	const inpSear = function(key){
		if(key == ""){
			dataObj.value = searObj;
		}else{
			let _arr = [];
			searObj.forEach(item=>{
				if(JSON.stringify(item).indexOf(key) != -1){
					_arr.push(item);
				}
			})
			dataObj.value = _arr;
		}
	};
	const handleSelect = function(key){
		dataObj.value.forEach(item=>{
			if((item.deviceSerial+''+item.channelNo) == key){
				if(item.status == 0){
					proxy.$modal.msgError("摄像头离线！！！");
				}else{
					nowObj.value = item;
					playVideo();	
				}
			}
		})
	};
	const getLi = function(){
		dataObj.value = [];
		searObj = [];
		allObj = [];
		if(queryParams.value.deviceSerial != ""&&queryParams.value.deviceSerial != null){
			loading.value = true;
			getOpenLi(queryParams.value).then((response) => {
				if(response.code==200){
					allObj = response.data;
				}
				checkList();
				loading.value = false;
			})
		}
	};
	const checkList = function(){
		let arr = [];
		allObj.forEach((item) =>{
			if(item.channelName.indexOf("@")==-1){
				arr.push(item);
			}
		});
		searObj = arr;
		dataObj.value = arr;
	}
	const playVideo = function(){
		if(playerS == null){
			playerS = new EZUIKit.EZUIKitPlayer({
				id: "playWind",
				accessToken: queryParams.value.accessToken,
				url: 'ezopen://open.ys7.com/'+(nowObj.value.deviceSerial)+'/'+(nowObj.value.channelNo)+'.live',
				plugin: ['talk'], 
				width: videoRef.value.clientWidth,
				height: videoRef.value.clientHeight,
				autoplay: true,
				audio: audioSucc.value,
				handleError: function(){
					closeVideo();
					proxy.$modal.msgError("视频播放失败！！！");
				},
				handleSuccess: function(){
					playSucc.value = true;
				}
			});
		}else{
			playerS.stop().then(()=>{
				// 切换为直播
				playerS.play({
					url: 'ezopen://open.ys7.com/'+(nowObj.value.deviceSerial)+'/'+(nowObj.value.channelNo)+'.live',
				})
			});
		}
	}
	//设置播放器宽高 setSurfaceSize(int width, int height)
	// 关闭
	const closeVideo = function(){
		if(playerS != null){
			playerS.stop();
			playerS = null;
			playSucc.value = false;
			pauseSucc.value = true;
			audioSucc.value = false;
			videoTape.value = false;
		}
		nowObj.value = {};
	};
	// 截图
	const capPic = function(){
		if(playerS != null){
			var capPictProm = playerS.capturePicture(new Date().getTime());
			capPictProm.then((data) => {
				// console.log("promise 获取 数据", data)
			})
		}
	};
	// 暂停、播放
	const changPause = function(){
		if(playerS != null){
			if(pauseSucc.value){
				playerS.stop();   
				pauseSucc.value = false;
			}else{
				playerS.play();
				pauseSucc.value = true;
			}
		}
	};
	// 录像
	const changTape = function(){
		if(playerS != null){
			if(videoTape.value){
				let tapeProm = playerS.stopSave();
				tapeProm.then((data) => {
					proxy.$modal.msgSuccess("录制结束！！！");
					videoTape.value = false;
				})
			}else{
				let tapeProm = playerS.startSave(new Date().getTime()+".mp4");
				tapeProm.then((data) => {
					proxy.$modal.msgSuccess("开始录制！！！");
					videoTape.value = true;
				})
			}
		}
	};
	// 关开声音
	const changAudio = function(){
		if(playerS != null){
			if(audioSucc.value){
				playerS.closeSound();
				audioSucc.value = false;
			}else{
				playerS.openSound();
				audioSucc.value = true;
			}
		}
	};
	// 全屏
	const fullVideo = function(){
		if(playerS != null){
			playerS.fullScreen();
		}
	};
	watch(()=>store.state.data.curShipDevice, (newValue) => {
		queryParams.value.deviceSerial = newValue;
		// getLi();
	});
	dataObj.value = [{
		"deviceSerial":"G72546736",
		"channelNo":1,
		"deviceName":"东桂17",
		"channelName":"驾驶室左",
		"status":1,
	},{
		"deviceSerial":"G72546736",
		"channelNo":2,
		"deviceName":"东桂17",
		"channelName":"驾驶室右",
		"status":1,
	},{
		"deviceSerial":"G72546736",
		"channelNo":3,
		"deviceName":"东桂17",
		"channelName":"驾驶台",
		"status":1,
	},{
		"deviceSerial":"G72546736",
		"channelNo":4,
		"deviceName":"东桂17",
		"channelName":"集控室",
		"status":1,
	},{
		"deviceSerial":"G72546736",
		"channelNo":5,
		"deviceName":"东桂17",
		"channelName":"货控室",
		"status":1,
	},{
		"deviceSerial":"G72546736",
		"channelNo":6,
		"deviceName":"东桂17",
		"channelName":"左舷",
		"status":1,
	},{
		"deviceSerial":"G72546736",
		"channelNo":7,
		"deviceName":"东桂17",
		"channelName":"右舷",
		"status":1,
	},{
		"deviceSerial":"G72546736",
		"channelNo":8,
		"deviceName":"东桂17",
		"channelName":"船尾",
		"status":1,
	},{
		"deviceSerial":"G72546736",
		"channelNo":9,
		"deviceName":"东桂17",
		"channelName":"机舱",
		"status":1,
	},{
		"deviceSerial":"G72546736",
		"channelNo":10,
		"deviceName":"东桂17",
		"channelName":"船首",
		"status":1,
	},{
		"deviceSerial":"G72546736",
		"channelNo":11,
		"deviceName":"东桂17",
		"channelName":"生活区左",
		"status":1,
	},{
		"deviceSerial":"G72546736",
		"channelNo":12,
		"deviceName":"东桂17",
		"channelName":"生活区右",
		"status":1,
	},{
		"deviceSerial":"G72546736",
		"channelNo":13,
		"deviceName":"东桂17",
		"channelName":"机舱主机",
		"status":1,
	}];
	onMounted(() => {
		queryParams.value.deviceSerial = store.state.data.curShipDevice;
		// getLi();
	})
</script>

<style lang="scss" scoped>
	.el-menu{
		border: none;
	}
	.el-menu-item{
		height: 30px;
		line-height: 30px;
		padding: 0 0 0 10px !important;
	}
	::-webkit-scrollbar{
		display: none;
	}
	.videobox{
		position: relative;
		border:1px solid #00adad;
		overflow: hidden;
		width: 100%;
		height: 100%;
		.noBg{
			position: absolute;
			height: 101%;
			width: 101%;
			z-index: 111;
			background: url(@/assets/images/novideo.png) no-repeat;
			background-size: 100% 100%;
		}
		.videoTitle,.videoTool{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 32px;
			color: #fff;
			padding: 0 10px;
			line-height: 32px;
			background-color: rgba(255, 255, 255, 0.2);
		}
		.videoTitle{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.videoTool{
			top: auto;
			bottom: 0;
		}
		.svg-icon{
			margin-right: 10px;
			cursor: pointer;
		}
	}
	.Tool{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 5px;
		padding:5px 15px;
		// background-color: #fff;
		box-shadow: 0 1px 4px rgba(0, 21, 41,0.8);
	}
	.Tool .svg-icon{
		cursor: pointer;
		// color: #000;
		font-size: 1.2rem;
		margin-right: 15px;
	}
	.Tool .iconfont.text-red{
		color: #e54d42;
	}
</style>
