<template>
	<view class="word">
		<van-skeleton title row="10" v-if="loading" />
		<van-empty description="暂无数据" v-if="nodata" />
		<swiper class="swiper" next-margin="60rpx" @change="swiperChange" :current="current" v-if="!loading&&!nodata">
			<swiper-item v-for="(item,index) in StudyList" v-if="Type==2" :key="index" class="swiper-item">
				<Pronunciation :item="item" :cur="index+1" :ref="'cur'+index" :total="StudyList.length"></Pronunciation>
			</swiper-item>
			<swiper-item v-for="(item,index) in ReviewList" v-if="Type==1" :key="index" class="swiper-item">
				<Pronunciation :item="item" :cur="index+1" :total="ReviewList.length" :type="1">
				</Pronunciation>
			</swiper-item>
			<swiper-item></swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		provide,
	} from "vue";
	import Pronunciation from '../../components/word/Pronunciation.vue'
	export default {
		components: {
			Pronunciation
		},
		setup(props) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				msg: {
					ChapterId: 0, //当前章节编号
					CourseId: 0,
					ReviewChapterId: 0, //复习章节编号
				},
				StudyList: [],
				ReviewList: [],
				//当前学习索引
				current: 0,
				readMsg: {
					Id: 0,
					ClassId: 0,
					CourseId: 0,
					Stu_Account_Id: 0,
					ChapterId: 0,
					ReviewCourseChapterId: 0, //复习章节编号
					PrepNum: 0, //预习数量
					ReviewNum: 0, //复习单词数量
					StudyNum: 0, //学习总单词数量
					StudyType: 1, //1-预习，2-复习
				},
				Type: 1, //1复习 2 单词
				TotalHours: 0,
				CourseName: '',
				loading: false,
				nodata: false
			})
			let methods = {
				getData() {
					data.loading = true
					proxy.$request('/AppletWords/GetStudyWords', data.msg).then(res => {
						data.loading = false
						data.StudyList = res.Data.StudyList
						data.ReviewList = res.Data.ReviewList;
						data.current = 0
						if (data.StudyList.length === 0 && data.ReviewList.length == 0) {
							data.nodata = true
						}
					}).catch(err => {
						data.loading = false
						data.nodata = true
					})
				},
				getCountine() {
					if (data.StudyList.length > 0) {
						let ChapterId = data.StudyList[0].ChapterId;
						let CourseId = data.StudyList[0].CourseId;
						let studyObj = uni.getStorageSync('studyData');
						if (ChapterId == studyObj.ChapterId && CourseId == studyObj.CourseId) {
							data.current = studyObj.index;
						}
					}
					if (data.ReviewList.length > 0) {
						let ChapterId = data.ReviewList[0].ChapterId;
						let CourseId = data.ReviewList[0].CourseId;
						let studyObj = uni.getStorageSync('reviewData');
						if (ChapterId == studyObj.ChapterId && CourseId == studyObj.CourseId) {
							data.current = studyObj.index;
						}
					}
				},
				swiperChange(val) {
					data.current = val.detail.current
					if (data.Type == 1) {
						if (val.detail.current + 1 == data.ReviewList.length + 1 && data.ReviewList.length > 1) {
							uni.navigateTo({
								url: `/pages/word/readComplete?ClassId=${data.readMsg.ClassId}&&CourseId=${data.readMsg.CourseId}&&CourseName=${data.CourseName}&&TotalHours=${data.TotalHours}`
							})
							uni.removeStorageSync("reviewData")
						}
						let obj = {
							ChapterId: 0,
							CourseId: 0,
							index: 0
						}
						let name = 'cur' + val.detail.current;
						if(val.detail.current+1<=data.ReviewList.length){
							obj.ChapterId = data.ReviewList[data.current].ChapterId;
							obj.CourseId = data.ReviewList[data.current].CourseId;
							obj.index = data.current;
							uni.setStorageSync("reviewData", obj);
							
							this.$refs[name][0].stopVoice();
						}
						
					}
					if (data.Type == 2) {
						if (val.detail.current + 1 == data.StudyList.length + 1 && data.StudyList.length > 1) {
							uni.navigateTo({
								url: `/pages/word/readComplete?ClassId=${data.readMsg.ClassId}&&CourseId=${data.readMsg.CourseId}&&CourseName=${data.CourseName}&&TotalHours=${data.TotalHours}`
							})
							uni.removeStorageSync("studyData")
						}
						let obj = {
							ChapterId: 0,
							CourseId: 0,
							index: 0
						}
						let name = 'cur' + val.detail.current;
						if(val.detail.current+1<=data.StudyList.length){
							obj.ChapterId = data.StudyList[data.current].ChapterId;
							obj.CourseId = data.StudyList[data.current].CourseId;
							obj.index = data.current;
							uni.setStorageSync("studyData", obj);
							
							this.$refs[name][0].stopVoice();
						}
					}
				},
			}
			onMounted(() => {
				var studyObj = uni.getStorageSync("studyData");
				if ((data.msg.ChapterId == studyObj.ChapterId) && (data.msg.CourseId == studyObj.CourseId)) {
					let str = ''
					if (data.Type == 1) {
						str = '复习'
					} else {
						str = '学习'
					}
					if (studyObj && studyObj.index > 1) {
						uni.showModal({
							title: '提示',
							content: `是否继续上次${str}?`,
							success: function(res) {
								if (res.confirm) {
									that.getCountine();
								} else if (res.cancel) {
									data.current = 0;
								}
							}
						});
					}
				}
			})
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
		onLoad(options) {
			console.log("options", options);
			uni.setNavigationBarTitle({
				title: '单词复习'
			});
			this.msg.ChapterId = options.ChapterId ?? 0;
			this.msg.CourseId = options.CourseId ?? 0;
			this.msg.ReviewChapterId = options.ReviewChapterId ?? 0;
			if (options.ChapterId && options.CourseId && options.ReviewChapterId) {
				this.getData();
			}
			if (options.Type) {
				this.Type = options.Type
			}
			if (options.CourseName) {
				this.CourseName = options.CourseName;
			}
			if (options.TotalHours) {
				this.TotalHours = options.TotalHours;
			}
			const userInfo = uni.getStorageSync('userInfo');
			this.readMsg.Stu_Account_Id = userInfo.Id ?? 0;
			this.readMsg.CourseId = options.CourseId ?? 0;
			this.readMsg.ReviewCourseChapterId = options.ReviewChapterId ?? 0;
			this.readMsg.ChapterId = options.ChapterId ?? 0;
			this.readMsg.ClassId = options.ClassId ?? 0;
		},
	}
</script>

<style scoped>
	.word {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.word .swiper {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.word .swiper-item {
		min-height: 100vh;
		background-color: #F5F5F5;
		/* padding-left: 55rpx; */
	}
</style>
