<template>
	<!-- 单选题 -->
	<view>
		<view class="item" style="padding: 0 20px" v-if="!isShowAnswer">
			<van-nav-bar fixed>
				<template #left>
					<van-icon name="cross" size="40rpx" @click="goBack()" />
				</template>
				<template #title>
					<text class="Exam_Current">{{current+1}}</text><text class="Exam_Count">/{{Count}}</text>
				</template>
			</van-nav-bar>
			<i class="iconfont icon-caidanzu answerSheet" style="
			    position: absolute;
			    right: 50rpx;
				font-size:40rpx;
			    z-index: 999;
			  " :style="{ top: `calc(${statusBarHeight}px + 105rpx)` }" @click="showAnswerSheet"></i>
		    <div class="loading" v-if="loading">
			  <van-loading type="spinner" color="#fff" text-color="#fff" size="28rpx">题库加载中...</van-loading>
		    </div>
			<swiper class="swiper-box" style="height:100vh" :current="current" @change="onchange">
				<swiper-item v-for="(item, index) in dataList" :key="index" :data-index="index">
					<singlenumber v-if="item.QuestionTypeKey=='single-number'||item.QuestionTypeKey=='single'"
						@answerChange="getAnswerChange($event, index)" :paperData="item" :isShowJx="isShowJx" />
					<readingCompre v-if="item.QuestionTypeKey=='reading-comprehensio'"
						@answerChange="getAnswerChange($event, index)" :paperData="item" :isShowJx="isShowJx" />
					<listen v-if="item.QuestionTypeKey=='listening'" :CurIndex='current' @answerChange="getAnswerChange($event, index)"
						:paperData="item" :isShowJx="isShowJx" />
				</swiper-item>
			</swiper>
		</view>
		<answer v-if="isShowAnswer" :paperData="dataList" @hideAnswer="hideAnswer" :saveId="saveId" :isShowJx="isShowJx" @chooseTopic="jumpTopic"></answer>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	import singlenumber from "../../components/question/subject/singlenumber.vue";
	import readingCompre from "../../components/question/subject/readingCompre.vue";
	import listen from "../../components/question/subject/listen.vue";

	import answer from "../../components/question/subject/answer.vue"; //答题卡
	import {
		GetAppBankDetails,
		GetPracticeWrongPage,
		SetStudentStartExam,
		SetPracticeReview
	} from "../../api/exam";
	const innerAudioContext = uni.createInnerAudioContext();
	
	export default {
		components: {
			singlenumber,
			readingCompre,
			listen,
			answer
		},
		props: {},
		setup(props, context) {
			let {
				ctx,
				refs
			} = getCurrentInstance();
			let data = reactive({
				dataList: [],
				msg: {
					pageIndex: 1,
					pageSize: 10000,
					BankId: 0,
					StudentId:0
				},
				startMsg: {
				   Id:0,
				   BankId:1,
				   StudentId:1
				},
				saveId:0, //提交保存的时候用
				current: 0, //默认从第几个开始-用于从快捷菜单点入
				isShowJx: false,
				Count: 0,
				isShowAnswer: false,
				statusBarHeight: 0,
				wrongMsg:{
				  pageIndex:1,
				  pageSize:10000,
				  StudentId:1,
				  QCategoryIds:"",
				  StartId:0
				},
				setMsg:{
				  Id:0
				},
				CommonType:-1,
				loading:true
			});
			let UserInfo = uni.getStorageSync('userInfo');
			
			let methods = {
				goBack() {
					uni.navigateBack();
				},
				onchange(e) {
					if(e&&e.detail){
					  data.current = e.detail.current;
					  if(data.CommonType==3||data.CommonType==4||data.CommonType==5||data.CommonType==6){
						  var Id=0;
						  if(data.current>=1){
							Id = data.dataList[data.current-1].Id;
							this.setPractise(Id);
						  }
						  if(data.current+1==data.dataList.length){
						    Id =  data.dataList[data.current].Id
						    this.setPractise(Id);
						  }
					  }
					}
				},
				//设置已答题
				setPractise(Id){
					data.setMsg.Id = Id;
					SetPracticeReview(data.setMsg).then(res=>{
						
					})
				},
				getList() {
					if(data.isShowJx){
						data.msg.StudentId = UserInfo.AccountId;
					}
					GetAppBankDetails(data.msg).then(res => {
						if (res) {
							if (res.Code == 1) {
								let TempData = res.Data.PageData;
								data.dataList=TempData;
								setTimeout(x=>{
									if(data.dataList.length>0){
										data.loading=false;
									}
								},2000)
								data.Count = res.Data.Count;
							}
						}
					});
				},
				//从答题卡跳回来
				jumpTopic(val) {
					data.current = val;
					data.isShowAnswer = false;
				},
				//点击显示答题卡
				showAnswerSheet() {
					data.isShowAnswer = true;
				},
				hideAnswer() {
					data.isShowAnswer = false;
				},
				//获取答案改变后的数据
				getAnswerChange(val, index) {
					data.dataList[index] = val;
				},
				//获取单词错题
				getWrongWord(){
					GetPracticeWrongPage(data.wrongMsg).then(res=>{
						if(res.Code==1){
							data.dataList = res.Data.PageData;
							data.Count = res.Data.Count;
							//第一次进来调用一次
							if(data.dataList&&data.dataList.length>0){
							    this.setPractise(data.dataList[0].Id);
							}
							setTimeout(x=>{
								if(data.dataList.length>0){
									data.loading=false;
								}
							})
						}
					})
				},
				//开始考试调用接口
				getStart(){
					data.startMsg.StudentId = UserInfo.AccountId;
					SetStudentStartExam(data.startMsg).then(res=>{
						if(res.Code==1){
							data.saveId = res.Data.Id;
						}
					})
				}
			};
			onMounted(() => {
				data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			});
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
		async onLoad(options) {			
			if (options && options.BankId) {
				this.msg.BankId = options.BankId;
				this.startMsg.BankId = options.BankId;
			}
			let UserInfo = uni.getStorageSync('userInfo');
			if (options && options.Type){
				// 1开始考试 2产看解析
				if(options.Type==1){
					this.getStart();
					this.msg.StudentId='';
					this.isShowJx=false;
					this.getList();
				}
				if(options.Type==2){
					this.isShowJx=true;
					this.getList();
				}
				//3 4 5 6从错题跳过来
				if(options.Type==3){
					this.wrongMsg.StudentId = UserInfo.AccountId;
					this.wrongMsg.QCategoryIds = '3,4,5';
					// this.wrongMsg.StartId = options.StartId;
					this.getWrongWord();
					this.isShowJx=true;
				}
				if(options.Type==4){
					this.wrongMsg.StudentId = UserInfo.AccountId;
					this.wrongMsg.QCategoryIds = '6';
					// this.wrongMsg.StartId = options.StartId;
					this.getWrongWord();
					this.isShowJx=true;
				}
				if(options.Type==5){
					this.wrongMsg.StudentId = UserInfo.AccountId;
					this.wrongMsg.QCategoryIds = '8';
					// this.wrongMsg.StartId = options.StartId;
					this.getWrongWord();
					this.isShowJx=true;
				}
				if(options.Type==6){
					this.wrongMsg.StudentId = UserInfo.AccountId;
					this.wrongMsg.QCategoryIds = '9';
					// this.wrongMsg.StartId = options.StartId;
					this.getWrongWord();
					this.isShowJx=true;
				}
				this.CommonType = options.Type;
			}
		}		
	};
</script>
<style scoped>
	.Exam_Current {
		font-size: 35rpx;
		color: red;
	}

	.Exam_Count {
		color: gray;
		font-size: 26rpx;
	}
	.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>
