<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" :key="index" class="swiper-item">
				<Pronunciation :item="item" :cur="index+1" :total="StudyList.length"></Pronunciation>
			</swiper-item>
			<swiper-item v-for="(item,index) in ReviewList" :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 {
		reactive,
		toRefs,
		getCurrentInstance,
		onMounted,
	} 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-复习
				},
				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;
						const total = data.StudyList.length + data.ReviewList.length;
						if (res.Data.StartIndex > total || res.Data.StartIndex == total) {
							data.current = 0
						} else {
							data.current = res.Data.StartIndex;
							if (data.current > total) {
								data.current = total - 1
							}
						}
						if (data.StudyList.length === 0 && data.ReviewList.length == 0) {
							data.nodata = true
						}
					}).catch(err=>{
						data.loading = false
						data.nodata = true
					})
				},
				swiperChange(val) {
					data.current = val.detail.current
					if (data.current <= data.StudyList.length) {
						methods.completeRead(val.detail.current, 1)
					} else if (data.current <= (data.ReviewList.length + data.StudyList.length)) {
						methods.completeRead(val.detail.current, 2)
					}
					const total = data.StudyList.length + data.ReviewList.length + 1
					if (val.detail.current + 1 == total && total > 1) {
						uni.navigateTo({
							url: "/pages/word/test?CourseId=" + data.readMsg.CourseId + '&&ChapterId=' + data
								.readMsg.ChapterId +
								'&&NextChapterId=' + '0'
						})
					}
				},
				completeRead(n, type) {
					if (type == 1) {
						data.readMsg.PrepNum = n
					} else {
						data.readMsg.ReviewNum = n - data.StudyList.length;
					}
					data.readMsg.StudyType = type;
					proxy.$request('/AppletWords/SetStuWordsPrep', data.readMsg).then(res => {

					})
				}
			}
			onMounted(() => {

			})
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
		onShow() {
			const total = this.StudyList.length + this.ReviewList.length;
			if (this.current >= total) {
				this.current = total - 1
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: '单词学习'
			});
			this.msg.ChapterId = options.ChapterId ?? 0;
			this.msg.CourseId = options.CourseId ?? 0;
			this.msg.ReviewChapterId = options.ReviewChapterId ?? 0;
			this.getData();
			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>
