<style scoped>
	.studyindex {
		width: 100%;
		height: 100vh;
		background: #F5F5F5;
		overflow-y: auto;
	}

	.row {
		display: flex;
		align-items: center;
	}

	::-webkit-scrollbar {
		display: none
	}

	.page-title {
		font-size: 44rpx;

		font-weight: bold;
		color: #0f1b35;
	}

	.curriculum {
		width: 100%;
	}

	.box {
		padding: 100rpx 0rpx 50rpx;
	}

	.box-top {
		width: 100%;

	}

	.box_t {
		padding: 40rpx 36rpx;
	}

	.box_tb {
		height: 388rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
	}

	.box_tb_c {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 46rpx;
	}

	.box_tb_c span {
		font-size: 12px;
		color: #666666;
	}

	.box_tb_c text {
		font-size: 22rpx;
		color: #111111;
		font-weight: bold;
	}

	.box_tb_b {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10rpx;
	}

	.box_tb_b .btn {
		width: 130rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		border-radius: 26rpx;
		background: #4C50E7;
		color: #FFFFFF;
		margin-top: 7px;
	}

	.box_review {
		background: #EBEBEB;
		padding: 36rpx;
		margin-top: 10px;
		position: relative;
		height: 660rpx;

	}

	.box_review_date_item {
		width: calc((100vw - 67rpx)/7);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 17px;
		color: #999999;
		height: 140rpx;
		border-radius: 12px 12px 0px 0px;


	}

	.box_review_date_item2 {
		background: #4C50E7;
		color: #FFF;
		font-weight: bold;
	}

	.box_review_sp {
		width: calc(100vw - 67rpx);
		height: 420rpx;
		border-radius: 12px;
		background: linear-gradient(to bottom, #4C50E7, #FFFFFF);
		padding: 5px;
		/* margin-top: -5px; */
		box-sizing: border-box;
		position: absolute;
		/* left: 18px; */
		top: 248rpx;
	}

	.box_review_box {
		background: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #FFF;
		height: 100%;
		border-radius: 12px;
	}

	.box_review_swiper {
		width: 660rpx;
		height: 400rpx;
	}

	.myVideo {
		width: 660rpx;
		height: 400rpx;
		border-radius: 24rpx;
	}

	.examination {
		margin-top: 60rpx;
	}

	.examination-box {
		background: #FFF;
		margin: 40rpx 0;
	}

	.examination-box-c {
		/* height: 200rpx; */
		background: #F9F9F9;
		overflow-x: scroll;
		width: 100%;
		white-space: nowrap;
	}

	.examination-boxb {
		width: 200rpx;
		/* height: 100%; */
		display: inline-block;
		padding: 40rpx 0;
		box-sizing: border-box;
		/* border-right: 1px solid #E2E2E2; */
	}

	.shuxian {
		width: 2rpx;
		height: 100%;
		display: inline-block;
		padding: 20px 0;
		box-sizing: border-box;


	}

	.shuxianbox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		font-size: 12px;
		color: #8F8F92;
		height: 100%;
	}

	.examination-box-c-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		font-size: 12px;
		color: #8F8F92;
		height: 100%;
	}

	.examination-box-c-item .item_o {
		color: #A3A3A3;
	}

	.examination-box-c-item .item_t {
		color: #A3A3A3;
		font-size: 19px;
		font-weight: bold;
		margin: 8rpx 0;
	}

	.examination-box-btnbox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.examination-btn {
		width: 150rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background: #4C50E7;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: bold;
		color: #FFF;
		margin: 20px 0;
	}

	.status-blue {
		color: #00acf9;
	}

	.status-green {
		color: #00df9f;
	}

	.status-black {
		color: #111111;
	}

	.status-red {
		color: #ff3816;
	}

	.reviewcenter {

		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;
	}
</style>
<template>
	<view class="studyindex">
		<van-nav-bar :border="fasle" fixed :z-index="99">
			<view slot="left" class="page-title" title="shouye">学习</view>
		</van-nav-bar>
		<view class="curriculum">
			<template v-if="CourseList.length==0">
				<!-- 无数据的显示 -->
				<indexNo></indexNo>
			</template>
			<template v-if="CourseList.length>0">
				<view class="box" :style="{ 'margin-top': `${statusBarHeight}px` }">
					<view class="box-top">
						<carousel :img-list="CourseList" url-key="B2BIcon" @selected='selectedBanner'></carousel>
					</view>
				</view>
				<view class="box_t">
					<view class="box_tb">
						<view class="row" style="justify-content: space-between;">
							<view class="row" style="color: #111111;font-size: 28rpx;font-weight: bold;">
								<view>单词练习 </view>
								<view style="margin-left: 5px;">{{InfoData.TotalScore}}</view>
							</view>
							<view style="font-size: 22rpx;color: #4C50E7;" @click="gourl()">所有单词</view>
						</view>
						<view class="row" style="justify-content: space-around;">
							<view class="box_tb_c">
								<span>下节单词</span>
								<view class="row" style="align-items: flex-end;">
									<text style="font-size: 78rpx;font-style: italic">{{InfoData.Words.NextWord}}</text>
									<text style="margin-left: 5px;margin-bottom: 10px;">词</text>
								</view>
							</view>
							<view class="box_tb_c">
								<span>需要复习</span>
								<view class="row" style="align-items: flex-end;">
									<text
										style="font-size: 78rpx;font-style: italic">{{InfoData.Words.ReviewWord}}</text>
									<text style="margin-left: 5px;margin-bottom: 10px;">词</text>
								</view>
							</view>
						</view>
						<view class="box_tb_b">
							<view style="font-size: 22rpx;color: #999999;visibility: hidden;">预计用时10分钟</view>
							<view style="text-align: center;font-size: 22rpx;color: #4C50E7;"
								v-if="(InfoData.Words.NextWord==0||!InfoData.Words.NextWord)&&(InfoData.Words.ReviewWord==0||!InfoData.Words.ReviewWord)">
								暂无新词</view>
							<view class="btn" @click="jumpStudyPage()" v-else>立即学习</view>
						</view>
					</view>
				</view>

				<view class="box_review" v-if='InfoData'
					:style="{height:InfoData.Review && InfoData.Review.length>0?'660rpx':'300rpx'}">
					<view class="row" style="justify-content: space-between;height: 50rpx;">
						<view class="row" style="color: #111111;font-size: 28rpx;font-weight: bold;">
							<view>课程回顾 </view>
							<view style="font-size: 20rpx;color: #999999;">(最近7天课程)</view>
						</view>
						<view style="font-size: 22rpx;color: #4C50E7;" @click="gourl()">所有课程</view>
					</view>
					<view class="reviewcenter" v-if='InfoData.Review && InfoData.Review.length==0'>
						<view style="font-size: 26rpx;font-family: PingFang SC;font-weight: bold;color: #111111;">暂无课程
						</view>
						<view
							style="font-size: 20rpx;font-family: PingFang SC;font-weight: 400;color: #888888;margin-top: 10px;">
							购买课程后可回顾</view>
					</view>
					<view class="box_review_date row" style="margin-top: 40rpx;"
						v-if='InfoData.Review && InfoData.Review.length>0'>
						<view v-for="(x,y) in InfoData.Review" :key='y'>
							<view :class="{'box_review_date_item2':current==y}" class="box_review_date_item"
								@click="goreview(x,y)">
								<text>{{getdate(x,1)}}</text>
								<text style="font-size: 22rpx;margin-top: 5px;">{{getdate(x,2)}}</text>
							</view>
						</view>

					</view>
					<view class="box_review_sp" v-if='InfoData.Review && InfoData.Review.length>0'>
						<view class="box_review_box" v-if="loading">
							<van-loading size="24px" vertical color="#FFF" text-color="#FFF">加载中...</van-loading>
						</view>
						<view class="box_review_box" v-if="!loading">
							<view v-if="InfoData.Review[current].videolist.length==0">暂无回顾视频...</view>
							<template v-if="InfoData.Review[current].videolist.length>0">
								<swiper class="box_review_swiper" @change="swiperChange">
									<swiper-item 
										v-for="(item, index) in InfoData.Review[current].videolist" :key="index">
										<video class="myVideo" :id="'Video'+current+'-'+index" :src="item.URL"
											@error="spcuowu" :controls="controls" :show-center-play-btn="false"
											:show-fullscreen-btn="false" @fullscreenchange="videoControl">
										</video>
										<view @click="enlarge('Video'+current+'-'+index)" style="
										              position: absolute;
										              left: 50%;
										              top: 50%;
													  z-index: 9;
										              transform: translate(-50%,-50%);
										              width: 98rpx;
										              height: 98rpx;
										              border-radius: 20rpx;
										              background-color: rgba(0, 0, 0, 0.4);
										              display: flex;
										              align-items: center;
										              justify-content: center;
										            ">
											<!-- 播放按钮 -->
											<image
												src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
												style="width: 37rpx; height: 44rpx" mode=""></image>
										</view>
									</swiper-item>
								</swiper>
							</template>

						</view>
					</view>
				</view>
				<view class="examination" v-if='InfoData'>
					<view style="padding: 0 20px;">
						<view style="color: #666666;font-size: 28rpx;">加油哦！</view>
						<view class="row" style="justify-content: space-between;margin-top: 9px;">
							<view class="row" style="color: #111111;font-size: 46rpx;font-weight: bold;">
								考试
							</view>
							<view style="font-size: 28rpx;color: #4C50E7;" @click="gourlkaoshilist()">更多考试</view>
						</view>
					</view>
					<view class="reviewcenter"
						style="height: 300rpx;margin-top: 0;align-items: center;justify-content: center;"
						v-if="InfoData.ExamList.length==0">
						<view style="font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							line-height: 35px;">暂无记录</view>
						<view style="font-size: 20rpx;margin-top: 10px;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;">参与考试后可查看</view>
					</view>
					<view v-if="InfoData.ExamList.length>0">
						<view v-for="(x,y) in InfoData.ExamList" :key='y'>
							<view class="examination-box">
								<view style="padding: 60rpx 40rpx;">
									<view style="font-size: 36rpx;font-weight: bold;color: #111111;">{{x.PaperName}}
									</view>
									<!-- <view style="font-size: 24rpx;font-weight: 500;color: #999999;margin-top: 9px;">
										测评次数：<text v-if="x.ExamStatus==1||x.ExamStatus==2||x.ExamStatus==4">0</text>
										<text v-if="x.ExamStatus==3||x.ExamStatus==5">1</text>次
									</view> -->
								</view>
								<view>
									<view class="examination-box-c">
										<div class='examination-boxb'>
											<view class="examination-box-c-item">
												<text class="item_o">我的排名</text>
												<text class="item_t">#{{x.MyRank}}</text>
												<text class="">分数</text>
											</view>

										</div>
										<!-- 这个竖线不知道咋回事弄不出来 如果有好的方案麻烦改下 -->
										<view class="shuxian">
											<view class="examination-box-c-item"
												style="border-left: 1px solid #E2E2E2;">
												<text class="item_o"></text>
												<text class="item_t"></text>
												<text class="" style="opacity: 0;height: 34rpx;">.</text>
											</view>
										</view>
										<div class='examination-boxb'>
											<view class="examination-box-c-item">
												<text class="item_o">我的得分</text>
												<text class="item_t">{{x.TotalScore}}</text>
												<text class="">分</text>
											</view>
										</div>
										<view class="shuxian">
											<view class="examination-box-c-item"
												style="border-left: 1px solid #E2E2E2;">
												<text class="item_o"></text>
												<text class="item_t"></text>
												<text class="" style="opacity: 0;height: 34rpx;">.</text>
											</view>
										</view>
										<!-- ExamStatus 1未开始 2已开始 3已考试 4缺考 5已阅卷 -->
										<div class='examination-boxb'>
											<view class="examination-box-c-item">
												<text class="item_o">考试状态</text>
												<text class="" style="opacity: 0;height: 34rpx;">.</text>
												<text style="font-size: 28rpx;font-weight: bold" :class="{
													'status-blue': x.ExamStatus==1,
													'status-green': x.ExamStatus==2,
													'status-black': x.ExamStatus==3,
													'status-red': x.ExamStatus==4,
												  }">{{x.ExamStatusStr}}</text>

											</view>
										</div>
										<view class="shuxian">
											<view class="examination-box-c-item"
												style="border-left: 1px solid #E2E2E2;">
												<text class="item_o"></text>
												<text class="item_t"></text>
												<text class="" style="opacity: 0;height: 34rpx;">.</text>
											</view>
										</view>
										<div class='examination-boxb'>
											<view class="examination-box-c-item">
												<text class="item_o">我的耗时</text>
												<text class="item_t">{{getTimems(x.ExamSecondTime) }}</text>
												<text class="">秒</text>
											</view>
										</div>
										<view class="shuxian">
											<view class="examination-box-c-item"
												style="border-left: 1px solid #E2E2E2;">
												<text class="item_o"></text>
												<text class="item_t"></text>
												<text class="" style="opacity: 0;height: 34rpx;">.</text>
											</view>
										</view>
										<div class='examination-boxb'>
											<view class="examination-box-c-item">
												<text class="item_o">最高得分</text>
												<text class="item_t">{{x.MaxScore}}</text>
												<text class="">分</text>
											</view>
										</div>
									</view>
								</view>
								<view class="examination-box-btnbox">
									<view class="examination-btn" @click="gourlkaoshixq(x)">
										<text v-if="x.ExamStatus==2">开始考试</text>
										<text v-else>查看详情</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<bottom></bottom>
	</view>
</template>

<script>
	import indexNo from './components/indexNo.vue'
	import carousel from './components/vear-carousel/vear-carousel.vue'
	import bottom from '../../components/bottom.vue'
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		provide,
	} from "vue";
	export default {
		components: {
			indexNo,
			bottom,
			carousel
		},
		setup(props) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				videoContext: null,
				controls: false, //显示默认控件
				CourseList: [], //课程列表
				statusBarHeight: 0,
				CourseInfoMsg: {
					ClassId: 0,
					GuestId: 0,
					CourseId: 0,
					ClassScrollType:0,
					StuId:0

				},
				InfoData: null,
				current: 0,
				loading: false, //获取视频加载中
				checkIndex: 0
			})
			let methods = {
				enlarge(id) {
					// 全屏
					data.videoContext = uni.createVideoContext(id);
					console.log(538,id, data.videoContext)
					data.videoContext.requestFullScreen({
						direction: 0,
					});
				},
				videoControl(e) {
					
					if (e.detail.fullScreen == false) {
						data.videoContext.stop();
						data.controls = false;
					} else {
						data.videoContext.play();
						data.controls = true;
					}
				},
				getCourseList() {
					proxy.$request("/AppletIndex/GetMyStudyCourseList", {}).then(res => {
						if (res.Code == 1) {
							data.CourseList = res.Data
							if (data.CourseList.length > 0) {
								data.CourseInfoMsg.ClassId = data.CourseList[0].ClassId;
								data.CourseInfoMsg.GuestId = data.CourseList[0].GuestId;
								data.CourseInfoMsg.CourseId = data.CourseList[0].CourseId;
								that.getCourseInfo()
							}
						}
					})

				},
				getCourseInfo() { //详情
					data.CourseInfoMsg.ClassScrollType=uni.getStorageSync('userInfo').ClassScrollType
					proxy.$request("/AppletIndex/GetMyStudyCourseInfo", data.CourseInfoMsg).then(res => {
						if (res.Code == 1) {
							data.InfoData = res.Data
							if (res.Data && res.Data.Review.length > 0) {
								data.InfoData.Review.forEach(x => {
									x.videolist = []
								})
								that.getvideo()
							}
						}
					})

				},
				spcuowu(e) {
					console.log(e, '视频错误')
				},
				selectedBanner(index) { //切换轮播图的时候 调取接口
					data.checkIndex = index;
					data.CourseInfoMsg.ClassId = data.CourseList[index].ClassId;
					that.getCourseInfo()
				},
				goreview(x, y) { //回顾选择
					that.swiperChange() //让当前页面的视频暂停
					data.current = y;
					that.getvideo()
				},
				getvideo() {
					if (data.InfoData.Review[data.current].videolist.length == 0) {
						let datalist = data.InfoData.Review[data.current].List
						if (datalist.length > 0) {
							data.loading = true
							datalist.forEach((x, y) => {
								that.getvideoId(x, y)
							})
						}
					}
				},
				getvideoId(x, y) { //获取视频id

					if (x.VideoUrl) { //判断是否有视频id
						proxy.$request("/Video/GetVideoPlayAuth", {
							strVid: x.VideoUrl
						}).then(res => {
							if (res.Code == 1) {
								that.getvideourl(res.Data, y)
							}
						})
					} else {
						data.loading = false
					}

				},
				async getvideourl(x, y) { //获取视频地址

					proxy.$request("/Video/GetPlayInfo", {
						strVid: x.VideoMeta.VideoId
					}).then(res => {
						if (res.Code == 1) { //地址赋值
							data.InfoData.Review[data.current].videolist.push(res.Data)
							if (y + 1 == data.InfoData.Review[data.current].List.length) {
								data.loading = false
							}
						}
					})
				},
				swiperChange() { //当前选择视频全部暂停
					let trailer = data.InfoData.Review[data.current].videolist // 获取视频列表
					if (trailer.length > 0) {
						trailer.forEach((item, index) => {
							if (item.URL != null && item.URL != '') {
								let temp = 'Video' + data.current + '-' + index;
								// 暂停其他视频
								uni.createVideoContext(temp, this).pause()
							}
						})
					}

				},
				gourl() { //学习列表
					let ClassId = data.CourseList[data.checkIndex].ClassId;
					let CourseId = data.CourseList[data.checkIndex].CourseId;
					let CourseName = data.CourseList[data.checkIndex].CourseName;
					let TotalHours = data.CourseList[data.checkIndex].TotalHours;
					let GuestId=data.CourseList[data.checkIndex].GuestId;
					let StuId=data.CourseList[data.checkIndex].StuId;
					uni.navigateTo({
						url: '/pages/study/courseList?ClassId=' + ClassId + '&CourseId=' + CourseId +
							'&CourseName=' + CourseName + '&TotalHours=' + TotalHours+'&GuestId='+GuestId+"&StuId="+StuId
					})
				},
				gourlkaoshilist() {
					let indexData = uni.getStorageSync("indexData")
					uni.navigateTo({
						url: `/pages/exam/examPaperList?Id=${indexData.GuestId}`
					})
				},
				jumpPage(url) {
					uni.navigateTo({
						url: url,
					});
				},
				jumpStudyPage() {
					let url =
						`/pages/word/word?CourseId=${data.InfoData.Words.CourseId}&&ChapterId=${data.InfoData.Words.NextCourseNo}&&ReviewChapterId=${data.InfoData.Words.ReviewCourseNo}&&ClassId=${data.InfoData.Words.ClassId}`
					uni.navigateTo({
						url: url
					});
				},
				gourlkaoshixq(item) {
					let indexData = uni.getStorageSync("indexData")
					//ExamStatus 1未开始 2已开始 3已考试 4缺考 5已阅卷
					if (item.ExamStatus == 5) {
						this.jumpPage(
							`/pages/exam/examScore?GuestId=${indexData.GuestId}&&PaperId=${item.PaperId}&&Id=${item.Id}&&Exam_Student_Id=${item.Exam_Student_Id}&&ExamStatus=${item.ExamStatus}`
						);
					} else {
						this.jumpPage(
							`/pages/exam/examPaper?GuestId=${indexData.GuestId}&&PaperId=${item.PaperId}&&Id=${item.Id}&&Exam_Student_Id=${item.Exam_Student_Id}&&ExamStatus=${item.ExamStatus}`
						);
					}
				},
				getdate(x, type) { //获取月和天
					let day = '',
						month = '';
					if (type == 1) {
						day = x.ClassDate.split('-')[2]
						return day
					} else {
						month = x.ClassDate.split('-')[1]
						month = Number(month) + '月'
						return month
					}
				},
				getTimems(data) { //获取分秒
					let time = Number(data)
					if (time > 0) {
						let second = Math.floor(time % 60); // 秒
						let minute = Math.floor(time % 3600 / 60); // 分
						let hour = Math.floor(time / 3600); // 时
						let str = '';
						if (minute > 0 || hour > 0) {
							if (hour > 0) {
								str = hour * 60 + minute + '′';
							} else {
								str = minute + '′';
							}
						}
						if (second > 0) {
							str = str + second + '″';
						}
						return str
					} else {
						return '0″'
					}

				}
			}
			onMounted(() => {
				data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			})
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
		onShow() {
			if (this.$isLogin()) {
				this.getCourseList() //我的课程列表
			}
		},
	}
</script>
