import $ from "jquery";
export default {
	data() {
		return {
			player: null, //播放器
			videoTimer: null, //定时器
			curTime: null, //播放器当前播放进度
			curStatus: null, //播放器当前播放状态
			playerConfig: {
				id: "url-player-test",
				width: "100%", //容器的大小
				height: "100%", //容器的大小
				qualitySort: "asc",
				cover: "",
				autoplay: true,
				isLive: false,
				rePlay: false,
				playsinline: true,
				controlBarVisibility: "hover",
				useH5Prism: true,
				skinLayout: [],
			},

			skinLayoutIos: [{
					name: "bigPlayButton",
					align: "blabs",
					x: 30,
					y: 80,
				},
				{
					name: "H5Loading",
					align: "cc",
				},
				{
					name: "errorDisplay",
					align: "tlabs",
					x: 0,
					y: 0,
				},
				{
					name: "infoDisplay",
				},
				{
					name: "tooltip",
					align: "blabs",
					x: 0,
					y: 56,
				},
				{
					name: "thumbnail",
				},
				{
					name: "controlBar",
					align: "blabs",
					x: 0,
					y: 0,
					children: [{
							name: "progress",
							align: "blabs",
							x: 0,
							y: 44,
						},
						{
							name: "playButton",
							align: "tl",
							x: 15,
							y: 12,
						},
						{
							name: "timeDisplay",
							align: "tl",
							x: 10,
							y: 7,
						},
						{
							name: "fullScreenButton",
							align: "tr",
							x: 10,
							y: 12
						},
						{
							name: "prism-speed-selector",
							align: "tr",
							x: 15,
							y: 12,
						},
						{
							name: "volume",
							align: "tr",
							x: 5,
							y: 10,
						},
					],
				},
			],
			skinLayoutAndroid: [{
					name: "bigPlayButton",
					align: "blabs",
					x: 30,
					y: 80,
				},
				{
					name: "H5Loading",
					align: "cc",
				},
				{
					name: "errorDisplay",
					align: "tlabs",
					x: 0,
					y: 0,
				},
				{
					name: "infoDisplay",
				},
				{
					name: "tooltip",
					align: "blabs",
					x: 0,
					y: 56,
				},
				{
					name: "thumbnail",
				},
				{
					name: "controlBar",
					align: "blabs",
					x: 0,
					y: 0,
					children: [{
							name: "progress",
							align: "blabs",
							x: 0,
							y: 44,
						},
						{
							name: "playButton",
							align: "tl",
							x: 15,
							y: 12,
						},
						{
							name: "timeDisplay",
							align: "tl",
							x: 10,
							y: 7,
						},

						{
							name: "prism-speed-selector",
							align: "tr",
							x: 15,
							y: 12,
						},
						{
							name: "volume",
							align: "tr",
							x: 5,
							y: 10,
						},
					],
				},
			]
		};
	},

	watch: {
		//播放器当前播放进度
		curTime(val) {
			if (this.curTime !== null) {
				this.$refs.videoContent1.click();
			}
		},
	},

	created() {


		this.loadWebPlayerSDK(); //引入播放器sdk、css
	},
	// beforeDestroy() {


	// 	if (this.player) {
	// 		console.log('是否出发组件销毁', this.player)
	// 		this.player.dispose();

	// 	}
	// },
	methods: {
		showToast(msg) {
			uni.showToast({
				title: msg,
				duration: 2000
			});
		},
		//检验视频 获取加密权限
		checkValue() {

			if (!this.videoData.vid && !this.isfresh) {
				setTimeout(() => {
					this.checkValue();
				}, 1000);
			} else {
				this.initAliyunPlayer();
			}
		},

		//引入播放器sdk、css
		loadWebPlayerSDK() {
			return new Promise((resolve, reject) => {
				const s_tag = document.createElement("script"); // 引入播放器js
				s_tag.type = "text/javascript";
				s_tag.src =
					"https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js";
				s_tag.charset = "utf-8";
				s_tag.onload = () => {
					const s_tag1 = document.createElement("script"); // 引入播放器js
					s_tag1.type = "text/javascript";
					s_tag1.src =
						"https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js";
					s_tag1.charset = "utf-8";
					s_tag1.onload = () => {
						this.checkValue();
						resolve();
					};
					document.body.appendChild(s_tag1);
				};
				document.body.appendChild(s_tag);

				const l_tag = document.createElement("link"); // 引入播放器css
				l_tag.rel = "stylesheet";
				l_tag.href =
					"https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css";

				document.body.appendChild(l_tag);
			});
		},

		//初始化播放器
		initAliyunPlayer() {
			var components = [{
				name: "RateComponent", //倍速组件
				type: AliPlayerComponent.RateComponent,
			}]
			if (this.platform != 'ios') {
				var fullScreenButtonComponent = Aliplayer.Component({
					init: function(status, toAddress) {
						this.fullScreenStatus = status;
						this.$html = $(".fullScreenButton-container");
					},
					createEl: function(el) {
						this.$html.find(".ad").attr("src", this.adAddress);
						var $adWrapper = this.$html.find(".ad-wrapper");
						$adWrapper.attr("href", this.toAddress);
						$adWrapper.click(function() {});
						$(el).find(".prism-time-display").after(this.$html);
					},
				});

				components = [...components, {
					name: "adComponent", //自定义全屏组件
					type: fullScreenButtonComponent,
				}, ]
			}

			//设置播放基本配置
			var playerOptions = {
				...this.playerConfig,
				components: components,
				skinLayout: this.platform == 'ios' ? this.skinLayoutIos : this.skinLayoutAndroid
			};

			if (this.videoData.encryptType == 1) {
				playerOptions = {
					...playerOptions,
					vid: this.videoData.vid,
					playauth: this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
					encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
					playConfig: {
						EncryptType: "AliyunVoDEncryption",
					},
				};
			} else {
				playerOptions = {
					...playerOptions,
					source: this.videoData.source,

				};
			}
			var player = new Aliplayer(playerOptions, (player) => {
				player.on("ready", () => {
					this.player = player;
					var lastTime = this.firstTime
					if (this.platform == "ios") {

						this.player.one("canplay", () => {
							this.player.seek(this.firstTime);
						});
					} else {
						this.player.seek(this.firstTime);
					}

					this.player.one('timeupdate', () => {
						if (!this.player.tag.seeking) {
							// 更新最近一次的播放位置
							lastTime = parseInt(this.player.getCurrentTime())
							this.curTime = lastTime;
						}
					});
					this.player.on('timeupdate', () => {
						if (!this.player.tag.seeking) {
							// 更新最近一次的播放位置
							lastTime = parseInt(this.player.getCurrentTime())
							this.curTime = lastTime;
						}
					});
					this.player.on("ended", () => {
						lastTime = parseInt(this.player.getCurrentTime())
						this.curTime = lastTime;
						this.$refs.videoContent2.click();

					});
				});
			});
		},

		//调用 recordTime 方法 存本地播放时长
		emitData(event, ownerInstance) {
			ownerInstance.callMethod("recordTime", this.curTime);
		},

		//调用 setVideoFirtsetTime 设置初始播放
		emitSetData(event, ownerInstance) {
			ownerInstance.callMethod("setVideoFirtsetTime");
		},

		//调用 openShow 设置ios 不能播放私用加密 提示信息
		emitopenShow(event, ownerInstance) {
			ownerInstance.callMethod("openShow");
		},

		//调用 handleEnd 存储视频播放信息
		endEmitData(event, ownerInstance) {
			ownerInstance.callMethod("handleEnd");
		},

		//调用 screenChange + 设置全屏
		changeVideoScreen(event, ownerInstance) {
			var status = this.player.fullscreenService.getIsFullScreen();
			ownerInstance.callMethod("screenChange", {
				status: status,
				primary: status ? "portrait" : "landscape",
			});

			if (status) {
				setTimeout(() => {
					plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
					this.player.fullscreenService.cancelFullScreen();
				}, 100);
			} else {
				this.player.fullscreenService.requestFullScreen();
				setTimeout(() => {
					plus.screen.lockOrientation("landscape-primary");
				}, 100);
			}
		},

		//调用 changeVideoData 切换播放源
		changeVideoData(event, ownerInstance) {
			ownerInstance.callMethod("changeVideoData");
		},
		//成功销毁
		handleSuccessDispose(event, ownerInstance) {
			ownerInstance.callMethod("dispose");
		},
		//销毁播放器
		receiveisDispose(newValue, oldValue, ownerVm, vm) {
			if (newValue) {
				if (this.player) {
					console.log('是否触发方法组件销毁', this.player)
					this.player.dispose();
					this.$refs.videoContent5.click()
				}
			}
		},
		//切换播放源
		async receiveIsChange(newValue) {
			if (this.isChange) {
				this.checkValue();
			}
		},

		handleClick(event, ownerInstance) {}, //点击播放器

		receiveFirstTime(newValue, oldValue, ownerVm, vm) {}, //播放时间

		receiveisSetFirstTime(newValue, oldValue, ownerVm, vm) {}, //是否刚开始设置播放时间

		receiveplatform(newValue) {}, //获取设备型号

		receiveVideoList(newValue, oldValue, ownerVm, vm) {}, //获取视频列表

		receiveVideoData(newValue, oldValue, ownerVm, vm) {}, //获取视频信息

		receiveWinWidth(newValue, oldValue, ownerVm, vm) {}, //获取视频宽度

		receiveWinHeight(newValue, oldValue, ownerVm, vm) {}, //获取视频高度



	},
};