<style lang="scss" scoped>
	.mobile {
		.page-sidebar {
			position: fixed;
			top: calc(var(--van-nav-bar-height) + 66vw);
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			width: 100%;
		}

		.video-container {
			height: 66vw;
		}
	}

	.desktop {
		.page-sidebar {
			// border-right: 1px solid var(--border-color);
			width: var(--page-sidebar-width);
		}

		.list-item {
			.channel-switch {
				display: none;
			}
		}

		.list-item:hover {
			.channel-switch {
				display: inline-block;
			}
		}
	}
</style>

<template>
	<div class="flex"
		:style="$store.state.app.device == 'desktop'? 'height: calc(100vh - 84px);' : 'height: var(--mobile-hight-with-navbar);'"
		v-loading="loading">
		<div class="bg-el-color page-sidebar" v-show="handleShowPageSidebar()">
			<div class="padding-xs">
				<el-input placeholder="请输入关键词" v-model="inpVal" clearable prefix-icon="Search" />
			</div>
			<el-scrollbar style="height: calc(100% - 42px);">
				<div v-if="cameraList.length>0">
					<template v-for="(item, index) in cameraList" :key="item.channelNo">
						<div v-show="item&&item.channelName.indexOf(inpVal)!=-1&&item.channelName.indexOf('@')==-1"
							@click="handleCameraSelect(item)"
							class="list-item flex justify-between align-center padding-lr-xs padding-tb-xs pointer"
							:class="{active:curCamera.channelNo==item.channelNo,'text-el-primary':curCamera.channelNo==item.channelNo}">
							<div>
								<svg-icon :icon-class="item.status==1&&cameraStatus==1?'shexiangtou':'shexiangtounot'"
									class="margin-right-xs text-bold text-lg"
									:class="{'text-el-primary':item.status==1&&cameraStatus==1}" />
								<span>{{item.channelName}}</span>
							</div>
							<el-popover trigger="hover">
								<el-radio-group v-model="channelValue">
									<el-radio :label="citem.value" v-for="citem in channelList"
										:key="citem.value">{{citem.name}}</el-radio>
								</el-radio-group>
								<!-- <el-divider></el-divider>
								<el-link>录像回放</el-link> -->
								<template #reference>
									<el-icon class="channel-switch" v-if="channelList.length>1">
										<Switch />
									</el-icon>
								</template>
							</el-popover>

						</div>
					</template>
				</div>
				<Empty v-else />
			</el-scrollbar>
		</div>
		<div class="flex-sub video-container">
			<!-- <EZUIKitPlayerRec :accessToken="accessToken" :url="url" :channelList="channelList"
				v-model:curChannel="curChannel" /> -->
			<EZUIKitPlayer :accessToken="accessToken" :url="url" :channelList="channelList"
				v-model:curChannel="curChannel"
				v-if="curChannel.value=='EZUIKitHD'||curChannel.value=='EZUIKitRec'||curChannel.value=='EZUIKit'" />
			<FlvPlayer :url="urlCompress" :channelList="channelList" v-model:curChannel="curChannel" v-else />
		</div>
	</div>
</template>

<script setup>
	import EZUIKitPlayer from "@/components/EZUIKitPlayer";
	import FlvPlayer from "@/components/FlvPlayer";

	import {
		ys7Login,
		ys7GetNVR,
		ys7GetCameraList
	} from "@/api/ai/ys7";

	import {
		compressLogin,
		compressGetPlayStart,
		compressGetCameraList
	} from "@/api/ai/compress";



	import {
		listCameraConfig,
	} from "@/api/cameraConfig/cameraConfig";

	const errorMsg = `设备不在线，请检查设备网络或重启设备接入萤石云`

	const {
		proxy
	} = getCurrentInstance();
	const loading = ref(false);
	const curCamera = ref({});
	const inpVal = ref("");
	const url = ref("")
	const urlCompress = ref("")
	const accessToken = ref("");
	const accessTokenCompress = ref("");
	const cameraList = ref([]);
	const cameraStatus = ref(0);
	const channelList = ref([{
			name: "线路1",
			value: "EZUIKitHD",
		},
		{
			name: "线路2",
			value: "EZUIKit",
		},
		// {
		// 	name: "线路3",
		// 	value: "Flv",
		// },
		{
			name: "录像回放",
			value: "EZUIKitRec",
		},
	])
	const curChannel = ref(channelList.value[0]);
	const cameraConfig = ref({});
	const isShowPageSidebar = ref(true);

	const channelValue = computed({
		get() {
			return curChannel.value.value
		},
		set(val) {
			curChannel.value = channelList.value.find(item => item.value == val)
			//	console.log(curChannel.value)
			handleCameraSelect(curCamera.value)
		}
	})

	watch(
		() => proxy.$store.state.data.curAnalogSn,
		() => {
			url.value = ""
			getCameraList();
		}
	);

	onMounted(() => {
		// 防止界面刷新请求过快
		// setTimeout(() => {
		// console.log(proxy.$route)
		if (proxy.$route.name == 'Playback') {
			channelList.value = [{
				name: "录像回放",
				value: "EZUIKitRec",
			}, ]

			curChannel.value = channelList.value[0];
		}
		getCameraList();
		// }, 400)
	});


	const handleCameraSelect = async function(camera) {
		if (camera.deviceSerial == undefined) {
			return
		}
		if (camera.status != 1 || cameraStatus.value != 1) {
			proxy.$modal.msgError(errorMsg);
			return
		}
		//	console.log(camera)
		curCamera.value = camera;
		url.value =
			`ezopen://open.ys7.com/${curCamera.value.deviceSerial}/${curCamera.value.channelNo}${curChannel.value.value=='EZUIKitHD'?'.hd':''}.${curChannel.value.value=='EZUIKitRec'?'rec':'live'}`


		if (curChannel.value.value == "Flv") {
			await compressGetPlayStart({
				resourceId: curCamera.value.resourceId,
				encodeEnable: false,
			}, {
				Authorization: `Bearer ${accessTokenCompress.value}`,
				isToken: false,
			}).then(response => {
				urlCompress.value = response.result.playUrl
			})
		}
	};

	async function getCameraList() {
		let responseLogin;
		let responseCameraList;
		loading.value = true;
		cameraList.value = [];

		await listCameraConfig({
			sn: proxy.$store.state.data.curAnalogSn
		}).then(response => {
			cameraConfig.value = response.rows[0] || {};
		});

		await ys7Login({
			appKey: cameraConfig.value.appKey,
			appSecret: cameraConfig.value.appSecret,
		}).then((response) => {

			////	console.log(response);
			responseLogin = response;
			accessToken.value = responseLogin.data.accessToken;
		});

		await ys7GetNVR({
			deviceSerial: cameraConfig.value.deviceSerial,
			accessToken: accessToken.value,
		}).then((response) => {
			////	console.log(response);
			cameraStatus.value = response.data.status;
			if (cameraStatus.value != 1) {
				proxy.$modal.msgError(errorMsg);
			}
		});

		////	console.log(responseLogin.data.accessToken);

		await ys7GetCameraList({
			deviceSerial: cameraConfig.value.deviceSerial,
			accessToken: accessToken.value,
		}).then((response) => {
			// console.log(response);
			responseCameraList = response;
			cameraList.value = response.data;
		});


		// getCompressCameraList();

		loading.value = false;
	}

	async function getCompressCameraList() {
		let responseLogin;
		let responseCameraList;


		await compressLogin({
			username: cameraConfig.value.username,
			password: cameraConfig.value.password,
			rememberMe: false,
		}).then((response) => {
			responseLogin = response;
			accessTokenCompress.value = responseLogin.token;
		});

		await compressGetCameraList({
			pageNum: 1,
			pageSize: 9999,
			taskId: 274
		}, {
			Authorization: `Bearer ${accessTokenCompress.value}`,
			isToken: false,
		}).then((response) => {
			// console.log(response);
			responseCameraList = response;
			//	console.log(response.rows)
			cameraList.value.map(item => {
				//	console.log(item.channelName)
				let compressCamera = response.rows.find(citem => {
					//	console.log(citem.resourceName)
					//	console.log(citem.resourceName.indexOf(item.channelName) == 0)
					return citem.resourceName.indexOf(item.channelName) == 0
				})
				//	console.log(compressCamera)
				item.resourceId = compressCamera && compressCamera.resourceId
			});
		});


	}


	const handleShowPageSidebar = () => {
		if (proxy.$store.state.app.device == 'desktop') {
			return true
		} else {
			return isShowPageSidebar.value
		}
	}
</script>