<template>
	<div ref="artRef" @touchmove.prevent style="width: 100%; height: 100%"></div>
</template>

<script>
import Artplayer from 'artplayer';
import ArtplayerPluginDanmuku from 'artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.legacy.js';
import { hls } from '@/static/html/hls.min.js';
import Hls from 'hls.js/dist/hls.min';
import { app } from '@/utils/api';

export default {
	data() {
		return {
			art: null,
			playing: false,
			url: '',
			bycdnPlayer: null
		};
	},
	props: {
		vodid: {
			type: Number
		}
	},

	methods: {
		init(data, url) {
			data.vod_thumbnails = 'http:' + data.vod_thumbnails;

			const match = data.vod_thumbnails.match(/-(\d+).[jpg|jpeg|png|webp|gif|bmp]+$/i);
			const thumbnailsNum = match ? parseInt(match[1]) : 100;

			this.art = new Artplayer({
				id: String(this.vodid),
				url: url,
				container: this.$refs.artRef,
				thumbnails: {
					url: data.vod_thumbnails,
					number: thumbnailsNum,
					column: thumbnailsNum,
					width: 250,
					height: 165
				},
				type: 'm3u8',
				fullscreen: true,
				pip: false, // 是否在底部控制栏里显示 画中画 的开关按钮
				flip: false, // 是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里
				playbackRate: true, // 是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里
				aspectRatio: false, // 是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里
				screenshot: true, // 是否在底部控制栏里显示 视频截图 功能
				setting: true, // 是否在底部控制栏里显示 设置面板 的开关按钮
				autoplay: false, // 是否自动播放
				theme: '#DA2538',
				hotkey: false, // 是否使用快捷键
				customType: {
					m3u8: function playM3u8(video, url, art) {
						if (Hls.isSupported()) {
							if (art.hls) art.hls.destroy();
							const hls = new Hls();
							hls.loadSource(url);
							hls.attachMedia(video);
							art.hls = hls;
							art.on('destroy', () => hls.destroy());
						} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
							video.src = url;
						} else {
							art.notice.show = 'Unsupported playback format: m3u8';
						}
					}
				},
				plugins: [
					this.artplayerPluginXVod(this.art),
					artplayerPluginDanmuku({
						danmuku: data.danmu
					})
				]
			});

			this.art.on('artplayerPluginDanmuku:emit', (danmu) => {
				danmu.timestamp = Math.round(new Date());
				app.addDanmu(this.vodid, danmu.color, danmu.time, danmu.mode, danmu.text, danmu.timestamp).then((res) => {});
			});

			this.art.on('control', (state) => {
				if (state) {
					this.art.layers.back_btn.style.display = 'block';
				} else {
					this.art.layers.back_btn.style.display = 'none';
				}
			});
			this.art.on('pause', () => {
				this.playing = false;
				this.$emit('update:playing', false);
			});
			this.art.on('play', () => {
				this.playing = true;
				console.log('播放');
				this.$emit('update:playing', true);
			});
			this.art.on('restart', (url) => {
				console.info('restart', url);
			});
			this.$nextTick(() => {
				this.$emit('get-instance', this.art);
			});
		},
		isFinite() {
			// this.art.url=this.url
		},
		artplayerPluginXVod(art) {
			return (art) => {
				art.layers.add({
					name: 'back_btn',
					html: `<i class="art-icon"><img style="width:30px;" src="/static/icon/back.png"/></i>`,
					click: function () {
						const pages = getCurrentPages();
						const pagesLength = pages.length;
						if (pagesLength === 1) {
							uni.switchTab({
								url: '/pages/home/index'
							});
						} else {
							for (let delta = 1; delta < pagesLength; delta++) {
								console.log(pages[pagesLength - delta - 1].route);
								if (pages[pagesLength - delta - 1].route == 'pages/video/video') {
									continue;
								}
								uni.navigateBack({
									delta: delta
								});
								break;
							}
						}
					},
					style: {
						display: 'block',
						position: 'absolute',
						top: '10px',
						left: '10px'
					}
				});

				function show() {
					art.layers.back_btn.style.display = 'block';
				}

				function hide() {
					art.layers.back_btn.style.display = 'none';
				}
				art.on('play', hide);
				art.on('pause', show);

				return {
					name: 'adsPlugin',
					show,
					hide
				};
			};
		},
		uploadVideo(data) {
			this.init(data, data.urlarr[0].p2pM3u8Url);
			console.log(data.rawplayer);
			if (data.rawplayer == 1) {
				var elements = document.getElementsByClassName('art-video');
				this.bycdnPlayer = new ABCDN.PLAYER.CHlsRawPlayer({
					videoDom: this.$refs.artRef, //this.$refs.artRef,
					p2pStunServerHostUrl: 'stun:stun1.ali12356.com:23478',
					p2pCdnServerHostUrl: '//nb' + Math.abs(((this.vodid >>> 16) ^ (this.vodid >>> 8) ^ this.vodid) % 6) + '.ali12356.com',
					isSavingMode: false,
					tcdnStepChunks: 2,
					p2pMode: data.p2p == 1 ? 'no' : 'off',
					forceOff: data.p2p == 1 ? false : true,
					p2pRedLineTime: 30,
					preloadBufferTime: 30,
					ABCDN: {
						maxLruCacheSize: 3000,
						usePost: true
					},
					p2pMaxTimeout: 300,
					sw: {
						swFilePath: '/'
					},
					isAutoPlay: false,
					boostRange: 45,
					boostRate: 2,
					videoStreams: data.urlarr[0],
					doLoadURL: (player, stUrl) => {
						this.art.url = stUrl;
						//this.init(data, stUrl);
					}
				});
			} else {
				console.log(this.art.url);
				//this.init(data, data.urlarr[0].p2pM3u8Url);
				this.art.url = data.urlarr[0].p2pM3u8Url;
			}
		}
	},

	beforeDestroy() {
		if (this.bycdnPlayer) {
			this.bycdnPlayer.Destroy();
		}
		if (this.instance && this.instance.destroy) {
			this.instance.destroy(false);
		}
	}
};
</script>
<style lang="scss">
.art-danmuku-emitter .art-danmuku-send {
	background-color: #ff4d03 !important;
	color: #fff;
}

.art-danmuku-emitter .art-danmuku-send:hover {
	background-color: #ff4d03 !important;
}
/deep/ .art-bottom {
	padding: 0 20px;
}
</style>
