<template>
	<div id="player" style="width: 100%;height: 300px;"></div>
</template>
<script>
	export default {
		props: {
			src: {
				type: String,
				default () {
					return ''
				}
			}
		},
		data() {
			return {
				vodPlayerJs: 'https://player.polyv.net/resp/vod-player/latest/player.js',
				vid: '',
			};
		},

		mounted() {
			this.loadPlayerScript(this.loadPlayer);
		},
		watch: {
			// 监听 src 变化，当父组件 filepaths 更新时触发
			src(newVal, oldVal) {
				if (newVal && newVal !== oldVal) {
					const parsedUrl = new URL(newVal);
					let vid = parsedUrl.searchParams.get('vid');
					// 当 src 变化时，执行重新加载逻辑
					// this.reloadVideo();
					this.player.changeVid({
						wrap: '#player',
						width: '100%',
						height: '100%',
						vid: vid,
						// ban_seek:'on',
						ban_history_time: "on", // 开启续播
						ban_seek_by_limit_time: 'on',
						showHd: false,
						showAuto: false,
						showLine: false,
						speed: false,
						// hideRepeat:true
					}) // 切换下一个视频
				}
			}
		},

		methods: {
			loadPlayerScript(callback) {
				if (!window.polyvPlayer) {
					const myScript = document.createElement('script');
					myScript.setAttribute('src', this.vodPlayerJs);
					myScript.onload = callback;
					document.body.appendChild(myScript);
				} else {
					callback();
				}
			},

			loadPlayer() {
				const parsedUrl = new URL(this.src);
				this.vid = parsedUrl.searchParams.get('vid');
				const polyvPlayer = window.polyvPlayer;
				this.player = polyvPlayer({
					wrap: '#player',
					width: '100%',
					height: '100%',
					vid: this.vid,
					ban_history_time: "on", // 开启续播
					ban_seek_by_limit_time: 'on',
					showHd: false,
					showAuto: false,
					showLine: false,
					speed: false,
					// hideRepeat:true
				})
				this.player.on('s2j_onPlayOver', (...params) => {
					this.$emit('over')
				})
			}
		},
		destroyed() {
			if (this.player) {
				this.player.destroy();
			}
		}
	};
</script>