<style scoped>
	.studyCourse {
		/* width: 100%; */
		min-height: 100vh;
		background: #F5F5F5;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.Course_Top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.CourseBan {
		color: #111111;
		font-size: 34rpx;
	}

	.CourseTotal {
		font-size: 23rpx;
		color: #999999;
	}

	.Course_Bottom {
		min-height: 89vh;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		margin-top: 30rpx;
		overflow: hidden;
	}

	.Course_List {
		width: 100%;
		height: auto;
		border-bottom: 1px solid #F5F5F5;
	}

	.CourseList_One {
		height: 200rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}

	.Course_Name {
		color: #111111;
		font-weight: bold;
		font-size: 30rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-all;
	}

	.Course_Index {
		color: #C1C1C1;
		font-size: 22rpx;
		margin-top: 28rpx;
	}

	.Course_SeName {
		width: 50%;
		margin: 0 20rpx;
	}

	.Course_Two {
		background-color: #EBEBEB;
		height: 200rpx;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.Course_Two>view {
		flex: 0 0 33.3%;
		text-align: center;
	}

	.Course_Two img {
		width: 90rpx;
		height: 90rpx;
	}

	.Course_Opera {
		color: #666666;
		font-size: 22rpx;
		text-align: center;
		margin-top: 5rpx;
	}

	.loading {
		position: fixed;
		z-index: 9999;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
<template>
	<view class="studyCourse">
		<div class="loading" v-if="isShowLoad">
			<van-loading type="spinner" color="#fff" />
		</div>
		<template v-if="ChapterList.length>0">
			<view class="Course_Top">
				<view class="CourseBan">《{{CourseName}}》</view>
				<view class="CourseTotal" v-if="TotalHours>0">共 {{TotalHours}}课</view>
			</view>
			
			<view class="Course_Bottom">
				<view class="Course_List" v-for="(item,index) in ChapterList" :key="index">
					<view class="CourseList_One" @click="getReview(index)">
						<view>
							<van-circle :value="item.StudyProgress" layer-color="#E4E5FB" :size="75" color="#4C50E7"
								:rate="100" :speed="100" :text="getSpeed(item.StudyProgress)" />
						</view>
						<view class="Course_SeName">
							<view class="Course_Name">{{item.ChapterTree.ChapterName}}</view>
							<view class="Course_Index">第{{item.ChapterTree.ChapterNo}}课</view>
						</view>
						<view>
							<van-rate :value="item.Score" :size="20" readonly color="#FAC217" void-color="#EBEBEB"
								void-icon="star" icon="star" :count="3" />
						</view>
					</view>
					<view class="Course_Two" v-if="item.isShow">
						<view @click="goCourseReview(item)">
							<view>
								<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/review.png"
									alt="" />
							</view>
							<view class="Course_Opera">课程回顾</view>
						</view>
						<view @click="goWordStudy(item,2)">
							<view>
								<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/fuxi.png"
									alt="" />
							</view>
							<view class="Course_Opera">单词</view>
						</view>
						<view @click="jumpToExam(item)">
							<view>
								<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/ceshi.png"
									alt="" />
							</view>
							<view class="Course_Opera">练习</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<van-empty description="暂无数据" v-else />
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		provide,
	} from "vue";
	export default {
		components: {},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "所有单词",
			});
			if (options.ClassId && options.CourseId) {
				this.msg.ClassId = options.ClassId;
				this.msg.CourseId = options.CourseId
				this.msg.GuestId = options.GuestId
				this.msg.StuId = options.StuId
				this.getChapterList();
			}
			if (options.CourseName) {
				this.CourseName = options.CourseName
			}
			if (options.TotalHours) {
				this.TotalHours = options.TotalHours
			}
		},
		setup(props) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				ChapterList: [], //课程列表
				msg: {
					ClassId: 0,
					CourseId: 0,
					ClassScrollType:0,
					GuestId:0,
					StuId:0
				},
				CourseName: '',
				TotalHours: 0,
				isShowLoad: false
			})
			let methods = {
				async getChapterList() {
					data.isShowLoad = true;
					let userinfo=uni.getStorageSync('userInfo')
					data.msg.ClassScrollType=userinfo.ClassScrollType
					proxy.$request("/AppletIndex/GetMyStudyCourseChapterList", data.msg).then((res) => {
						data.isShowLoad = false;
						if (res.Code == 1) {
							data.ChapterList = res.Data;
							data.ChapterList.forEach(x => {
								x.isShow = false
							})
						}
					}).catch(err=>{
						data.isShowLoad = false;
					});
				},
				getSpeed(score) {
					if (score < 100) {
						return score + '%'
					} else {
						return '已学完'
					}
				},
				//点击展开
				getReview(index) {
					data.ChapterList.forEach((x, i) => {
						if (index != i) {
							x.isShow = false;
						}
					})
					data.ChapterList[index].isShow = !data.ChapterList[index].isShow;
				},
				jumpToExam(obj) {
					if(obj){
						let url = `/pages/word/test?CourseId=${obj.CourseId}&&ChapterId=${obj.ChapterNo}&&NextChapterId=${obj.NextChapterNo}`
						uni.navigateTo({
							url: url
						});
					}
				},
				goWordStudy(obj, Type) {
					if (obj) {
						let url =
							`/pages/word/wordStudy?CourseId=${obj.CourseId}&&ChapterId=${obj.ChapterNo}&&ReviewChapterId=${obj.NextChapterNo}&&Type=${Type}&&ClassId=${obj.ClassId}&&CourseName=${this.CourseName}&&TotalHours=${this.TotalHours}`
						uni.navigateTo({
							url: url
						});
					}
				},
				goCourseReview(obj) {
					let flag=obj.CourseReview.some(e=>{
						return e.VideoUrl
					})
					if(!flag){
						uni.showToast({
							icon:'none',
							title:"暂无课程回顾"
						})
					}
				}
			}
			onMounted(() => {})
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		}
	}
</script>
