<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view><video object-fit="cover" class="course-video" id="courseVideo" :src="courseSrc" @error="videoErrorCallback" controls></video></view>
			<uni-group>
				<view class="course-title">{{ courseTitle }}</view>
				<view class="course-desc">{{ courseDesc }}</view>
			</uni-group>
		</view>
	</view>
</template>

<script>
let app = getApp();
export default {
	data() {
		return {
			courseId: '',
			courseStatus: 0,
			courseSrc: '',
			courseTitle: '',
			courseDesc: '',
		};
	},
	onLoad(e) {
		if (e) {
			if(e.courseId) {
				this.courseId = e.courseId;
			}
			if(e.id) {
				this.courseId = e.courseId;
				this.courseSrc = app.globalData.service_standard[e.id].url;
				this.courseTitle = app.globalData.service_standard[e.id].title;
				this.courseDesc = app.globalData.service_standard[e.id].desc;
				this.changeCourseStatus();
			}
			
			if(e.status) {
				this.courseStatus = e.status;
			}
		}
	},
	onReady: function(res) {
		// #ifndef MP-ALIPAY
		this.videoContext = uni.createVideoContext('courseVideo');
		// #endif
	},
	methods: {
		videoErrorCallback: function(e) {
			uni.showModal({
				content: e.target.errMsg,
				showCancel: false
			});
		},
		getRandomColor: function() {
			const rgb = [];
			for (let i = 0; i < 3; ++i) {
				let color = Math.floor(Math.random() * 256).toString(16);
				color = color.length == 1 ? '0' + color : color;
				rgb.push(color);
			}
			return '#' + rgb.join('');
		},
		changeCourseStatus() {
			let that = this
			if(that.courseId) {
				that.$u.api.saveCourseRate({courseId: that.courseId}).then(res => {
					if(res.code == 200) {
						// uni.navigateBack({delta: 1})
						uni.navigateTo({
							url: "/pages/learn/exam"
						})
					} else {
						uni.showToast({
							icon: "none",
							title: "更新课程状态失败"
						})
					}
				}).catch(e=> {
					
				})
			} else {
				uni.showToast({
					title: "课程ID为空，请重新选择课程"
				})
			}
		},
	}
};
</script>

<style lang="scss">
.course-video {
	width: 750rpx;
}
.course-title {
	font-size: 36rpx;
	font-weight: 700;
	padding: 80rpx 60rpx 40rpx 60rpx;
}
.course-desc {
	margin-left: 60rpx;
}
</style>
