<template>
	<view v-if="videoShow" class="pos-f pos-full x-c" style="background: #000; z-index: 99999;" @dblclick="videoExit">
		<video @play="videoPlay" @pause="videoPause" @ended="videoEnded" @click="videoTap"
			@fullscreenchange="videoChange" autoplay enable-play-gesture id="use-video" :src="src"
			:vslide-gesture-in-fullscreen="false" :direction="0" :show-play-btn="false" :show-fullscreen-btn="false"
			style="width: 100%;height: 100%;"></video>

		<!-- 暂停播放图标 -->
		<cover-image v-if="videoShow && !videoPlaying" src="/static//common/bofang.svg"
			class="border-radius-c pos-a pos-tl-c x-c" style="width: 100rpx; height: 100rpx;" @click="videoTap">
		</cover-image>

		<!-- 关闭按钮 -->
		<cover-image v-if="videoShow" src="/static/common/close.png"
			class="border-radius-c pos-a pos-bottom pos-right x-c use-close" @click="videoExit"></cover-image>
	</view>
</template>

<script>
	export default {
		name: "use-video",
		props: {
			src: {
				type: String
			},
			value: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				videoShow: false,
				videoContext: null,
				videoPlaying: false,
				videoDblClick: false,
				touchTime: new Date().getTime()
			};
		},
		watch: {
			value(val) {
				console.log('watch', val);
				this.videoShow = val;
				if(val) {
					setTimeout(() => {
						this.videoPlay()
					}, 100)
				}
			}
		},
		methods: {
			/**
			 * @description 超时
			 */
			timerout(callback, timer = 1000) {
				let _timer = setTimeout(() => {
					if (typeof callback === 'function') {
						callback();
					}
					clearTimeout(_timer);
				}, timer);
			},
			videoPlay(event) {
				console.log('video-play', event);
				this.videoPlaying = true;
			},
			videoPause(event) {
				console.log('video-pause', event);
				this.videoPlaying = false;
			},
			videoEnded(event) {
				console.log('video-ended', event);
			},
			videoTap(event) {
				console.log('video-tap', event);
				this.videoDblClick = false;

				this.timerout(() => {
					if (new Date().getTime() - this.touchTime < 260) {
						this.videoDblClick = true;
						console.log('dblclick', this.videoContext);

						this.videoExit();
					} else if (!this.videoDblClick) {
						console.log('click', this.videoContext);

						if (this.videoPlaying) {
							this.videoContext.pause();
						} else {
							this.videoContext.play();
						}
					}
				}, 260);

				this.touchTime = new Date().getTime();
			},
			videoExit() {
				this.videoContext.stop();
				this.videoContext.pause();
				this.videoShow = false;
				this.$emit('exit');
			},
			videoChange(event) {
				console.log('video-change', event);
			}
		},
		created() {
			this.videoShow = this.value;
		},
		mounted() {
			this.videoContext = uni.createVideoContext('use-video', this);
		}
	}
</script>

<style>
	.pos-a {
		position: absolute;
	}

	.pos-f {
		position: fixed;
		z-index: 1;
	}
	.pos-right {right: 0}

	.pos-tl-c {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.pos-bottom {
		bottom: 0
	}

	.pos-full {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.border-radius-c {
		border-radius: 50%;
	}

	.use-close {
		right: 30rpx;
		bottom: 88rpx;
		width: 68rpx;
		height: 68rpx;
		background: rgba(0, 0, 0, .58);
	}
</style>
