<template>
	<view class="examVideo">
		<!-- video 组件使用示例 -->
		<video ref="video" id="videoWrap" class="video-wrap"
			object-fit="contain"
			:src="src"
			autoplay
			http-cache
			show-mute-btn :muted="isMuted" :enable-progress-gesture="false"
			x5-video-player-type="h5" @play="onStartPlay" @ended="handleEnded" @error="videoErrorCallback"
			@fullscreenchange="fullscreenchange" @timeupdate="timeUpdate"></video>
		<!-- 控制按钮 - 播放 -->
		<view v-if="!isPlaying" @tap="handlePlay"></view>
		<!-- 控制按钮 - 暂停 -->
		<view v-else @tap="handlePause"></view>

		<!-- 音量开关 - 取消静音 -->
		<view v-if="isMuted" @tap="setIsMuted(false)"></view>
		<!-- 音量开关 - 静音 -->
		<view v-else @tap="setIsMuted(true)"></view>

		<!-- 点击遮罩 -->
		<view class="mask" @click.stop="requestFullScreen"></view>

	</view>
</template>

<script>
	import {ReportExamPaperResult,userMobileOperation,downloadVideo} from '../../../api/apiList.js'
	export default {
		data() {
			return {
				// 正在播放
				isPlaying: false,
				// 静音
				isMuted: false,
				// 控制条
				video_real_time: 0,
				nitial_time: '',
				id:'',
				userInfo: {},
				src: ''

			};
		},
		onLoad(option) {
			const {
				id,
				video
			} = option
			this.id = id
			this.getUserInfo()
			downloadVideo(video).then(res=>{
				uni.hideToast()
				this.src = res
			}).catch(err=>{
				uni.hideToast()
				uni.showToast({
					title: '视频加载失败',
					icon:'error',
					duration: 3*1000,
					complete() {
						uni.navigateBack()
					}
				})
			})
			uni.hideLoading()
			uni.showToast({
				title: '视频加载中',
				icon:'loading',
				duration: 10*1000
			})
			

		},
		mounted() {
			// 更多请查找官方文档 https://uniapp.dcloud.io/api/media/video-context
			// 创建并返回 video 上下文 videoContext 对象。
			// 在自定义组件下，第二个参数传入组件实例 this，以操作组件内 <video> 组件。
			this.videoContext = uni.createVideoContext("videoWrap", this);

		},

		// 方法
		methods: {
			// 播放视频
			handlePlay() {
				this.isPlaying = true;
				// 调用 play() 必须使用 uni.createVideoContext 创建 video
				this.videoContext.play();
			},
			getUserInfo() {
				userMobileOperation('getUserInfo').then(res => {
					const data = res.data.data
					this.userInfo = {
						...data
					}
				})
			},

			// 暂停视频
			handlePause() {
				this.isPlaying = false;
				// 调用 pause() 必须使用 uni.createVideoContext 创建 video
				this.videoContext.pause();
			},

			// 设置静音
			setIsMuted(val) {
				this.isMuted = val;
				// 注意: 必须在组件写上 muted 属性
				this.videoContext.muted = val;
			},

			// 开始播放
			onStartPlay() {
				console.log('开始播放');

			},

			// 播放结束
			handleEnded() {
				this.isPlaying = false;
				ReportExamPaperResult({
					"aux": {
						"paperId": this.id,
						"driverTel": this.userInfo.userExt.mobile,
						"driverName": this.userInfo.name,
						"watched": true
					},
				}).then(res=>{

					uni.redirectTo({
						url: `/subpkg/exam/examSubmit/examSubmit?id=${this.id}`
					})
				})
			},

			// 播放错误
			videoErrorCallback(e) {
				uni.showToast({
					title: `视频播放错误信息:${e.target.errMsg}`,
					duration: 2000,
					icon: "none",
				});
			},

			// 全屏
			requestFullScreen() {
				this.videoContext.requestFullScreen();
			},

			// 全屏监听
			fullscreenchange(e) {
				if (e.detail.fullScreen) {
					// 全屏
					this.videoContext.play();
				} else {
					// 退出全屏
					// this.videoContext.pause();
				}
			},
			timeUpdate: function(e) {
				var isReady = 1; // 是否开启可以视频快进 1 禁止开启
				//跳转到指定播放位置 initial-time 时间为秒
				let that = this;
				//播放的总时长
				var duration = e.detail.duration;
				//实时播放进度 秒数
				var currentTime = parseInt(e.detail.currentTime);
				//当前视频进度
				// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
				if (that.video_real_time == 0) {
					var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time);
				} else {
					var jump_time = parseInt(that.video_real_time);
				}
				if (isReady == 1) {
					console.log(currentTime, '$$$', jump_time, '$$$')
					if (currentTime > jump_time && currentTime - jump_time > 3) {
						let videoContext = wx.createVideoContext('videoWrap');
						videoContext.seek(that.video_real_time);
						wx.showToast({
							title: '未完整看完该视频，不能快进',
							icon: 'none',
							duration: 2000
						});
					}
				}
				that.video_real_time = currentTime; //实时播放进度
			}
		}
	};
</script>

<style lang="scss">

	.examVideo{
		width: 100%;
		height: 100vh;
		video{
			width: 100%;
			height: 100%;
		}
	}

</style>
