<template>
	<view class="learn-vedio">
		<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>
			<view class="title-content">
				<view class="item-content">
					<view class="item-st">
						<text class="item-st-text">{{courseTitle.split(' ') ? courseTitle.split(' ')[0] : ''}}</text>
					</view>
					<view class="item-title">{{courseTitle.split(' ') ? courseTitle.split(' ')[1] : ''}}</view>
				</view>
				<view>接单操作须知有助你快速了解充电桩安装业务，提高接单效率，请认真查看及学习。</view>
			</view>
			<view class="learn-view">
				<view class="learn-view-title">内容大纲</view>
				<view class="learn-list" v-for="(item, key) in courseOutline" :key="key">
					<view class="learn-list-item">{{item}}</view>
					<view class="line-view"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				courseId: '',
				courseStatus: 0,
				courseSrc: '',
				courseTitle: '',
				courseDesc: '',
				courseOutline: ['1 aaa', '2 bbb'] // 视频大纲
			};
		},
		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" scoped>
	.learn-vedio {
		background-color: #F4F5F7;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.course-video {
		width: 100%;
	}

	.course-title {
		font-size: 36rpx;
		font-weight: 700;
		padding: 80rpx 60rpx 40rpx 60rpx;
	}

	.course-desc {
		margin-left: 60rpx;
	}

	.title-content {
		padding: 40rpx 30rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		color: #999999;
		font-size: 24rpx;

		.item-content {
			display: flex;
		}

		.item-st {
			width: 80rpx;
			height: 36rpx;
			background-image: linear-gradient(to right, #FF930D, #FFC174);
			font-size: 16rpx;
			border-radius: 6rpx 36rpx 36rpx 6rpx;
			padding-top: 8rpx;
			padding-right: 2rpx;
			text-align: center;
			margin-right: 20rpx;

			.item-st-text {
				color: #FFFFFF;
			}
		}

		.item-title {
			color: #333333;
			font-size: 28rpx;
		}

	}

	.item-content {
		display: flex;
		padding-bottom: 30rpx;
	}

	.item-st {
		width: 80rpx;
		height: 36rpx;
		background-image: linear-gradient(to right, #FF930D, #FFC174);
		font-size: 16rpx;
		border-radius: 6rpx 36rpx 36rpx 6rpx;
		padding-top: 8rpx;
		padding-right: 2rpx;
		text-align: center;
		margin-right: 20rpx;
	}

	.item-title {
		color: #333333;
		font-size: 28rpx;
	}

	.learn-view {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 38rpx 30rpx 30rpx 30rpx;
		margin-bottom: 20rpx;
		font-size: 32rpx;
		color: #333333;

.learn-view-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}
		.learn-list {
		

			.learn-list-item {
				font: 24rpx;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
			}

			.line-view {
				background-color: #F4F5F7;
				height: 2rpx;
				width: 100%;
			}
		}
	}
</style>
