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

		.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-lr-sm padding-tb-xs text-white text-bold margin-xs" style="background-color: var(--el-menu-bg-color);">
				<svg-icon icon-class="ship_1" class="margin-right-xs" />易站科技
			</div>
			<el-scrollbar style="height: calc(100% - 42px);">
				<div v-if="cameraList.length>0">
					<template v-for="(item, index) in cameraList" :key="item.channelName">
						<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.channelName==item.channelName,'text-el-primary':curCamera.channelName==item.channelName}">
							<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" v-if="channelList.length>1">
								<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>
								<template #reference>
									<!-- <el-icon class="channel-switch">
										<Switch />
									</el-icon> -->
								</template>
							</el-popover>

						</div>
					</template>
				</div>
				<Empty v-else />
			</el-scrollbar>
		</div>
		<div class="flex-sub video-container">
			<!-- <iframe
				:src="`https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/${curCamera.deviceSerial}/${curCamera.channelNo}.live&autoplay=1&accessToken=${accessToken}`"
				width="100%" height="100%" frameborder="0" allowfullscreen
				style="width: 100%;height: 100%;border: none;">
			</iframe> -->
			<EZUIKitPlayer :accessToken="accessToken" v-model: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 ErrorCode from "@/utils/errorCode"

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


	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()
	const curChannel = ref({});
	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(curChannel, newValue => {
		channelValue.value = newValue.value
	})

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

	watch(url, (newValue, oldValue) => {
		if (newValue == "") {
			curCamera.value = {}
		}
	})

	onMounted(() => {
		channelList.value = [{
			name: "录像回放",
			value: "EZUIKitRec",
		}, ]

		curChannel.value = channelList.value[0];
		getList();
	});


	const handleCameraSelect = async function(camera) {
		if (camera.deviceSerial == undefined) {
			return
		}
		if (camera.status != 1 || cameraStatus.value != 1) {
			proxy.$modal.msgError(ErrorCode["cameraOffline"]);
			return
		}
		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'}`
		url.value =
			`ezopen://open.ys7.com/${curCamera.value.deviceSerial}/${curCamera.value.channelNo}.hd.rec`


		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 getList() {
		loading.value = true;
		cameraList.value = [];

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

		if (cameraConfig.value.deviceSerial == null || cameraConfig.value.deviceSerial.trim() == "null") {
			proxy.$modal.msgError(ErrorCode["noCamera"]);
			loading.value = false;
			return
		}

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

		await getCameraList();


		// await getCompressCameraList();

		loading.value = false;
	}


	async function getCameraList() {
		let deviceSerialList = cameraConfig.value.deviceSerial.split(",");

		deviceSerialList.map(async item => {
			await ys7GetNVR({
				deviceSerial: item,
				accessToken: accessToken.value,
			}).then((response) => {
				cameraStatus.value = response.data.status;
				if (cameraStatus.value != 1) {
					proxy.$modal.msgError(ErrorCode["cameraOffline"]);
				}
			});

			await ys7GetCameraList({
				deviceSerial: item,
				accessToken: accessToken.value,
			}).then((response) => {
				cameraList.value.push(...response.data);
			});
		})

	}


	async function getCompressCameraList() {


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

		await compressGetCameraList({
			pageNum: 1,
			pageSize: 9999,
			taskId: 274
		}, {
			Authorization: `Bearer ${accessTokenCompress.value}`,
			isToken: false,
		}).then((response) => {
			//// // // console.log(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>