<template>
	<view class="container">
		<z-nav-bar :title="title" bgColor="#5188e5" fontColor="#fff"></z-nav-bar>
		<view class="contentBox">
			<video
				class="video_file"
				:id="`video_${objId}`"
				:ref="`video_${objId}`"
				:src="src"
				:poster="poster"
				loop
				object-fit="contain"
				:show-play-btn="false"
				:show-center-play-btn="false"
				:controls="false"
				:enable-progress-gesture="false"
				:autoplay="videoPlayId == objId"
				:style="'height: '+screenHeight + 'px'"
				@timeupdate="onScheduleChange"
				@waiting="onWaiting"
			></video>
			<!-- 播放按钮 -->
			<view class="play_btn" @click="onPlay">
				<image class="icon_play" v-if="playState == 1000" src="http://qn.kemean.cn/upload/202103/08/1615183536616rn7yfe5g.png" mode="aspectFit"></image>
			</view>
			<view class="play_schedule" :style="{bottom: progressBottom + 'rpx'}">
				<view class="schedule_bg"></view>
				<view class="schedule" :style="{ width: schedule + 'rpx' }"></view>
				<view class="progress_drag_dot" v-if="progressDrag"></view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			schedule: 0,
			// 1000 待播放
			// 2000 播放中
			// 3000 播放缓冲中
			playState: 1000,
			// 是否拖动进度
			progressDrag: false,
			// 视频总长度
			duration: 0,
			videoCtx: null,
			objId:''
		};
	},
	onLoad(e) {
		console.log('1111',e)
		this.src = e.src
		this.title = e.title
	},
	computed: {
		...mapState(['videoPlayId'])
	},
	watch: {
		videoPlayId(val) {
			if (val == this.objId) {
				setTimeout(() => {
					this.videoCtx.play();
					this.playState = 2000;
				}, 200);
			} else {
				setTimeout(() => {
					this.videoCtx.pause();
					this.videoCtx.seek(0);
					this.playState = 1000;
					this.schedule = 0;
				},100);
			}
		}
	},
	mounted() {
		console.log('src', this.src)
		this.videoCtx = uni.createVideoContext(`video_${this.objId}`, this);
		if(this.videoPlayId == this.objId){
			setTimeout(() => {
				this.videoCtx.play();
				this.playState = 2000;
			}, 200);
		}
		let throttling = true;
		uni.$on("videoProgress", res => {
			if(throttling){
				throttling = false;
				setTimeout(() => {
					throttling = true;
					if (res.progress == 1) {
						this.progressDrag = true;
					} else {
						this.progressDrag = false;
					}
					if (this.videoPlayId == this.objId && res.progressValue) {
						this.schedule = res.progressValue * 750;
						this.videoCtx.seek(this.duration * res.progressValue);
					}
				}, 100);
			}
		});
	},
	methods: {
		onScheduleChange(e) {
			this.duration = e.detail.duration;
			if (!this.progressDrag) {
				this.schedule = (parseFloat(e.detail.currentTime) / e.detail.duration) * 750;
			}
		},
		onPlay() {
			if (this.playState == 2000) {
				this.videoCtx.pause();
				this.playState = 1000;
			} else if (this.playState == 1000) {
				this.videoCtx.play();
				this.playState = 2000;
			} else if (this.playState == 3000) {
				this.videoCtx.play();
				this.playState = 2000;
			}
		},
		// 视频进入缓冲中
		onWaiting() {
			this.playState = 3000;
		},
		onError(e){
			console.log("视频播放出错", e);
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/static/mixin.scss';
.video_box {
	position: relative;
	width: 750rpx;
}
.bottom_mask {
	position: absolute;
	left: 0rpx;
	bottom: 0rpx;
	right: 0rpx;
	height: 300rpx;
	width: 750rpx;
	background-image: linear-gradient(to bottom, rgba(0,0,0,0) , rgba(0,0,0,0.7)); 
}
.video_file {
	width: 750rpx;
}
.play_schedule {
	position: absolute;
	bottom: 6rpx;
	left: 0;
	height: 16rpx;
	width: 750rpx;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.schedule_bg {
	position: absolute;
	top: 7rpx;
	left: 0;
	right: 0;
	height: 2rpx;
	background-color: rgba(255, 255, 255, 0.3);
}
.schedule {
	background-color: #fff;
	height: 2rpx;
	position: relative;
}
.progress_drag_dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background-color: #fff;
}
.play_btn {
	position: absolute;
	top: 50%;
	left: 45%;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
}
.icon_play {
	width: 90rpx;
	height: 90rpx;
}
</style>
