<style lang="scss">
	.UIKitPlayer-live:hover {
		.video-action {
			display: block;
		}
	}

	.UIKitPlayer-live {
		height: 100%;

		.video-action {
			display: none;
			// color: var(--el-color-info-light-9);
			color: #ccc;
		}

		.action {
			background-color: rgba(0, 0, 0, .2);
		}
	}
</style>

<template>
	<div class="UIKitPlayer-live flex flex-direction" v-loading="loading">
		<div class="flex-sub grid col-1" style="position: relative;" ref="videoRef">
			<div style="position: absolute;inset: 0;" :id="videoId"></div>
			<div style="position: absolute;inset: 0;" v-show="!isPlaying">
				<img src="@/assets/images/novideo.png" fit="cover"
					style="position: absolute;inset: 0;height: 100%;width: 100%;" />
			</div>
			<div class="video-action" style="position: absolute;inset: 0;" v-show="isPlaying&&videoType=='live'">
				<div class="padding-sm  action text-bold flex justify-between"
					style="position: absolute;top:0;left:0;right:0">
					<div>
						<span>{{curChannel.name}}</span>
						<!-- <span>--{{url}}</span> -->
					</div>
					<div class="pointer" @click.stop="handleCloseVideo">
						<el-icon>
							<Close />
						</el-icon>
					</div>
				</div>

				<div class="flex justify-between align-center padding-sm action text-bold"
					style="position: absolute;bottom:0;left:0;right:0">
					<div>
						<el-tooltip content="暂停/播放" placement="top">
							<span class="padding-lr-xs pointer">
								<svg-icon :icon-class="isPlaying?'pause':'bofang'" @click.stop="togglePlay" />
							</span>
						</el-tooltip>
						<el-tooltip content="截图" placement="top">
							<span class="padding-lr-xs pointer">
								<svg-icon icon-class="camerafull" @click.stop="handleCapturePicture" />
							</span>
						</el-tooltip>
						<el-tooltip content="声音" placement="top">
							<span class="padding-lr-xs pointer">
								<svg-icon :icon-class="isAudioOpen?'shengyin_kai':'shengyin_guan'"
									@click.stop="toggleAudio" />
							</span>
						</el-tooltip>
						<el-tooltip content="录像" placement="top">
							<span class="padding-lr-xs pointer" v-show="false">
								<svg-icon :icon-class="isTranscribing?'radio':'luxiang'"
									:style="'color:'+(isTranscribing?'red':'')" @click.stop="toggleTranscribe" />
							</span>
						</el-tooltip>
						<el-popover trigger="hover">
							<el-radio-group v-model="channelValue">
								<el-radio :label="item.value" v-for="item in channelList"
									:key="item.value">{{item.name}}</el-radio>
							</el-radio-group>
							<template #reference>
								<span class="padding-lr-xs pointer">
									<svg-icon icon-class="swagger" />
								</span>
							</template>
						</el-popover>
					</div>
					<div>
						<el-tooltip content="关闭" placement="top">
							<span class="padding-lr-xs pointer">
								<svg-icon icon-class="guanji" style="color: red;" @click.stop="handleCloseVideo" />
							</span>
						</el-tooltip>
						<el-tooltip content="全屏" placement="top">
							<span class="padding-lr-xs pointer">
								<svg-icon icon-class="fullscreen" @click.stop="handleFullScreen" />
							</span>
						</el-tooltip>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import EZUIKit from 'ezuikit-js';

	const {
		proxy
	} = getCurrentInstance();
	const props = defineProps({
		accessToken: {
			type: String,
			default: "",
		},
		url: {
			type: String,
			default: "",
		},
		channelList: {
			type: Array,
			default: [],
		},
		curChannel: {
			type: Object,
			default: {},
		},

	})

	const {
		accessToken,
		url,
		channelList,
		curChannel
	} = toRefs(props);

	const videoId = ref(`UIKitPlayer-live-${new Date().getTime()}`)
	const isPlaying = ref(false)
	const loading = ref(false)
	const isAudioOpen = ref(true)
	const isTranscribing = ref(false)
	let videoPlayer = null

	const channelValue = computed({
		get() {
			return props.curChannel.value
		},
		set(val) {
			proxy.$emit('update:curChannel', channelList.value.find(item => item.value == val))
		}
	})


	const videoType = computed({
		get() {
			return url.value.substring(url.value.lastIndexOf(".") + 1);
		},
		// set(val) {
		// 	proxy.$emit('update:curChannel', channelList.value.find(item => item.value == val))
		// }
	})




	watch(url, (newValue, oldValue) => {
		if (accessToken.value.trim().length != 0 && newValue.trim().length != 0) {
			let newSuffix = newValue.substring(newValue.lastIndexOf(".") + 1);
			let oldSuffix = oldValue.substring(oldValue.lastIndexOf(".") + 1);
			if (newSuffix == oldSuffix) {
				handlePlay()
			} else {
				handleCloseVideo()
				iniVideoPlayer()
			}
		} else {
			handleCloseVideo()
		}
	})

	onMounted(() => {
		// console.log(props.accessToken.value)
		iniVideoPlayer()
	})

	const iniVideoPlayer = () => {
		console.log(videoType.value == 'rec' ? 'pcRec' : null)
		if (videoPlayer == null) {
			if (accessToken.value.trim().length == 0) {
				return
			}
			if (url.value.trim().length == 0) {
				return
			}

			// 直播
			if (videoType.value == 'live') {
				videoPlayer = new EZUIKit.EZUIKitPlayer({
					id: videoId.value, // 视频容器ID
					accessToken: accessToken.value,
					url: url.value,
					plugin: ["talk"],
					autoplay: true,
					audio: isAudioOpen.value,
					width: proxy.$refs.videoRef.clientWidth,
					height: proxy.$refs.videoRef.clientHeight,
					handleError: (error) => {
						handleCloseVideo();
						// console.log(error)
						proxy.$modal.msgError(error.msg);
					},
					handleSuccess: function() {
						isPlaying.value = true;
					},
				})
			}
			// 回放
			else {
				videoPlayer = new EZUIKit.EZUIKitPlayer({
					id: videoId.value, // 视频容器ID
					accessToken: accessToken.value,
					url: url.value,
					autoplay: true,
					audio: isAudioOpen.value,
					width: proxy.$refs.videoRef.clientWidth,
					height: proxy.$refs.videoRef.clientHeight - 20,
					template: 'pcRec', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
					handleError: (error) => {
						handleCloseVideo();
						// console.log(error)
						proxy.$modal.msgError(error.msg);
					},
					handleSuccess: function() {
						isPlaying.value = true;
					},
				})

			}
		}
	}



	// 播放
	const handlePlay = () => {
		loading.value = true
		if (videoPlayer == null) {
			iniVideoPlayer()
			loading.value = false
			return
		} else {

			videoPlayer.stop().then(() => {
				videoPlayer.play({
					url: url.value,
					width: proxy.$refs.videoRef.clientWidth,
					height: proxy.$refs.videoRef.clientHeight,
				}).then(() => {
					loading.value = false

				})
			});
		}
	}

	// 暂停、播放
	const togglePlay = () => {
		if (videoPlayer != null) {
			if (isPlaying.value) {
				videoPlayer.stop()
				isPlaying.value = false
			} else {
				videoPlayer.play()
				isPlaying.value = true
			}
		}
	}

	// 关开声音
	const toggleAudio = () => {
		if (videoPlayer != null) {
			if (isAudioOpen.value) {
				videoPlayer.closeSound();
				isAudioOpen.value = false;
			} else {
				videoPlayer.openSound();
				isAudioOpen.value = true;
			}
		}
	}

	// 关闭
	const handleCloseVideo = () => {
		if (videoPlayer != null) {
			videoPlayer.stop();
		}
		videoPlayer = null;
		isPlaying.value = false
		// proxy.$refs.videoRef.innerHtml = ""
	}

	// 截图
	const handleCapturePicture = function() {
		if (videoPlayer != null) {
			let capPictProm = videoPlayer.capturePicture(new Date().getTime());
			capPictProm.then((data) => {
				// console.log("promise 获取 数据", data)
			});
		}
	};

	// 录像
	const toggleTranscribe = function() {
		if (videoPlayer != null) {
			if (isTranscribing.value) {
				let tapeProm = videoPlayer.stopSave();
				tapeProm.then((data) => {
					proxy.$modal.msgSuccess("录制结束");
					isTranscribing.value = false;
				});
			} else {
				let tapeProm = videoPlayer.startSave(new Date().getTime() + ".mp4");
				tapeProm.then((data) => {
					proxy.$modal.msgSuccess("开始录制");
					isTranscribing.value = true;
				});
			}
		}
	};

	// 全屏
	const handleFullScreen = () => {
		if (videoPlayer != null) {
			videoPlayer.fullScreen();
		}
	};
</script>