<style lang="scss">
	.FlvPlayer {
		width: 100%;
		height: 100%;
	}
</style>

<template>
	<div class="FlvPlayer flex flex-direction" v-loading="loading">
		<div class="flex-sub grid col-1" style="position: relative;">
			<!-- <div style="position: absolute;inset: 0;" :id="videoId" ref="videoRef"></div> -->
			<video name="videoRef" class="videoRef" style="width: 100%;" ref="videoRef" controls autoplay>
				Your browser is too old which doesn't support HTML5 video.
			</video>
			<!-- 	<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">
				<div class="padding-sm  action text-bold flex justify-between"
					style="position: absolute;top:0;left:0;right:0">
					<div>
						FlvPlayer-{{curChannel.name}}
					</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 flvjs from 'flv.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-${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))
		}
	})

	watch(url, (newValue) => {
		console.log(newValue)
		if (newValue.trim().length != 0) {
			handlePlay()
		} else {
			handleCloseVideo()
		}
	})

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

	const iniVideoPlayer = () => {
		handleCloseVideo()

		if (videoPlayer == null) {
			if (url.value.trim().length == 0) {
				return
			}


			console.log('isSupported: ' + flvjs.isSupported());
			videoPlayer = flvjs.createPlayer({
				type: 'flv', // 媒体类型，默认是 flv,
				isLive: true, // 是否是直播流
				hasAudio: true, // 是否有音频
				hanVideo: true, // 是否有视频
				url: url.value, // 流地址
			}, {
				// 其他的配置项可以根据项目实际情况参考 api 去配置
				autoCleanupMinBackwardDuration: true, // 清除缓存 对 SourceBuffer 进行自动清理
			})
			console.log(proxy.$refs.videoRef)
			videoPlayer.attachMediaElement(proxy.$refs.videoRef)
			videoPlayer.load()
			videoPlayer.play()
		}
	}

	// 播放
	const handlePlay = () => {
		loading.value = true
		if (videoPlayer == null) {
			iniVideoPlayer()
			loading.value = false
			return
		} else {
			iniVideoPlayer();
			loading.value = false
			// 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.pause()
				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.pause();
			videoPlayer.unload();
			videoPlayer.detachMediaElement();
			videoPlayer.destroy();
			videoPlayer = null;
			isPlaying.value = false
			// console.log(proxy.$refs.videoRef)
			// 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>