<template>
	<view>
		<view class="nav-bar"></view>
		<view class="video-area">
			<video 
				id="video"
				@pause="videoPause"
				@play="videoPlay"
				:src="videoUrl"
				@timeupdate="videoTime"
				:show-progress="false"
				:enable-progress-gesture="false"
				:initial-time="initTime"
				autoplay
			></video>
		</view>
	</view>
</template>

<script>
import { publicPath } from '../../public';
	export default {
		data() {
			return {
				videoUrl: '',
				watchTime: '',
				watchTimeHr: '',
				videoDuration: '',
				noticeId: '',
				materialsId: '',
				initTime: '',
				rate: '',
				durationWhenInit: '',
				timeout1: null,
				timeout2: null,
				videoPlayStatus: 0
			}
		},
		methods: {
			videoTime (e) {
				// console.log(e);
				this.watchTime = e.detail.currentTime
				this.watchTimeHr = e.detail.currentTime / 3600
				this.videoDuration = e.detail.duration
				this.rate = Math.round((this.watchTime / this.videoDuration) * 100)
			},
			uploadWatchTime () {
				let that = this
				uni.request({
					url: publicPath + '/backstage/app/updateMaterialsRate',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
					},
					data: {
						noticeId: that.noticeId,
						materialsId: that.materialsId,
						userId: uni.getStorageSync('id'),
						compRate: that.rate,
						watchLong: that.watchTimeHr
					},
					success: (res) => {
						console.log(res);
					}
				})
			},
			videoPause () {
				console.log(this.rate);
				this.uploadWatchTime()
				
			},
			videoPlay () {
				
			}
		},
		onLoad(params) {
			console.log(params);
			this.videoUrl = params.url
			this.noticeId = params.noticeId
			this.materialsId = params.materialsId
			this.initTime = Math.round(params.watchLong * 60 * 60)
			this.durationWhenInit = Math.round(params.duration * 60)
			console.log(this.initTime);
		},
		onBackPress() {
			console.log(this.rate);
			this.videoPlayStatus = 1
			this.uploadWatchTime()
		},
		onShow() {
			console.log(this.durationWhenInit);
			let that = this
			let videoEle = uni.createVideoContext('video')
			this.timeout1 = setTimeout(() => {
				if (that.videoPlayStatus == 0) {
					videoEle.pause()
					uni.showModal({
						title: '继续视频',
						content: '点击确定以继续观看视频',
						showCancel: false,
						confirmText: '确定',
						success: (res) => {
							if (res.confirm) {
								videoEle.play()
							}
						}
					})
				} else {
					console.log(1);
				}
			}, (this.durationWhenInit / 3) * 1000)
			this.timeout2 = setTimeout(() => {
				if (that.videoPlayStatus == 0) {
					videoEle.pause()
					uni.showModal({
						title: '继续视频',
						content: '点击确定以继续观看视频',
						showCancel: false,
						confirmText: '确定',
						success: (res) => {
							if (res.confirm) {
								videoEle.play()
							}
						}
					})
				} else {
					console.log(2);
				}
			}, (this.durationWhenInit / 3) * 1000 * 2)
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar{
		width: 100%;
		height: var(--status-bar-height);
		padding-top: var(--status-bar-height);
	}
	.video-area{
		width: 95%;
		height: 400rpx;
		margin: 20rpx auto;
		video{
			width: 100%;
			height: 100%;
		}
	}
</style>
