<template>
	<view :style="{ 'padding-top': `${statusBarHeight}px` }">
		<view style="height: 100rpx"></view>
		<van-nav-bar fixed>
			<template #left>
				<van-icon name="cross" size="40rpx" @click="goBack()" />
			</template>
			<template #title>
			</template>
		</van-nav-bar>
		<div class="loading" v-if="loading">
		  <van-loading type="spinner" color="#fff" text-color="#fff" size="28rpx">题库加载中...</van-loading>
		</div>
		<view class="exam-con">
			<!-- 单词  语法-->
			<word :paperData="dataList" v-if="Type==1||Type==2" :StartIndex="StartIndex" :Count="Count" :Times="Times" @getAfter="getAfter()" />
			<!-- 听力 -->
			<listen :paperData="dataList" v-if="Type==3" :StartIndex="StartIndex" :Count="Count" :Times="Times" @getAfter="getAfter()" />
			<!-- 阅读理解 -->
			<readingCompre :paperData="dataList" v-if="Type==4" :StartIndex="StartIndex" :Count="Count" :Times="Times" @getAfter="getAfter()" />
		</view>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted
	} from "vue";
	import {
		submitPaper,
		GetQuestionWords,
		GetQuestionGrammar,
		GetQuestionListening,
		GetQuestionReading,
	} from "../../api/exam";
	import readingCompre from "../../components/question/readingCompre";
	import word from "../../components/question/word.vue";
	import listen from "../../components/question/listen.vue";
	export default {
		components: {
			word,
			listen,
			readingCompre
		},
		setup(props, context) {
			let {
				refs
			} = getCurrentInstance();
			console.log(refs);
			let data = reactive({
				statusBarHeight: 0,
				dataList: [],
				changeIndex: 0, //大题序号
				isOperate: true, //考试状态 判断是考试还是查看答案
				isAutoTime: false,
				examMsg: {
					PageIndex: 1,
					PageSize: 20,
					BankType: 1
				},
				Count: 0, //题目总数
				Type: 1, //1单词 2语法 3听力 4阅读
				Times: 0,
				loading: true,
				StartId: 0,
				StartIndex: 0
			});				
			let methods = {
				//返回
				goBack() {
					uni.navigateBack();
				},
				jumpPage() {
					uni.navigateTo({
						url: "/pages/exam/examPaper",
					});
				},
				//单词
				GetWords() {
					let res = GetQuestionWords(data.examMsg).then(res => {
						if (res.Code == 1) {
							this.dataList = res.Data.PageData;
							this.Count = res.Data.Count;
							this.StartIndex = this.dataList.findIndex(cItem => cItem.QuestionId == data.StartId);
							if(this.dataList.length>=0){
								this.loading=false;
							}
						}
					});
				},
				//语法
				getGrammar() {
					let res = GetQuestionGrammar(data.examMsg).then(res => {
						if (res.Code == 1) {
							this.dataList = res.Data.PageData;
							this.Count = res.Data.Count;
							this.StartIndex = this.dataList.findIndex(cItem => cItem.QuestionId == data.StartId);
							if(this.dataList.length>=0){
								this.loading=false;
							}
						}
					});
				},
				//听力
				getListen() {
					let res = GetQuestionListening(data.examMsg).then(res => {
						if (res.Code == 1) {
							this.dataList = res.Data.PageData;
							this.dataList.map((item) => {
							  let arr = item.Title.split(" "); //按空格分段
							  arr.map((e) => {
							    if (e.indexOf("src") != -1) {
									let Before = e.split("url=")[1]
									if(Before){
									   item.Src = decodeURIComponent(Before.slice(0, -1));
									}
							    }
							  });
							});
							if(this.dataList.length>=0){
								this.loading=false;
							}
							this.StartIndex = this.dataList.findIndex(cItem => cItem.QuestionId == data.StartId);
							this.Count = res.Data.Count;
						}
					});
				},
				//阅读
				GetMyQuestionReading() {
					let res = GetQuestionReading(data.examMsg).then(res => {
						if (res.Code == 1) {
							this.dataList = res.Data.PageData;
							this.Count = res.Data.Count;
							if(this.dataList.length>=0){
								this.loading=false;
							}
							this.StartIndex = this.dataList.findIndex(cItem => cItem.QuestionId == data.StartId);
						}
					});
				},
				//往后追加题
				getAfter() {
					data.examMsg.PageIndex++;
					if (data.Type == 1) {
						this.GetWords();
					}
					if (data.Type == 2) {
						this.getGrammar();
					}
					if (data.Type == 3){
						this.getListen();
					}
					if (data.Type == 4) {
						this.GetMyQuestionReading();
					}
				},
			};
			onMounted(() => {
				data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			});
			return {
				...toRefs(data),
				...methods,
			};
		},
	    onLoad(options) {
			if (options && options.Type) {
				this.Type = options.Type;
			}
			if (options && options.BankType) {
				this.examMsg.BankType = options.BankType;
			}
			if (options && options.StartId) {
				this.StartId = options.StartId;
			}
			if (options && options.Times){
				this.Times = options.Times;
			}
			//获取单词
			if (this.Type == 1) {
				this.GetWords();
			}
			//获取语法
			if (this.Type == 2) {
				this.getGrammar();
			}
			//获取听力
			if (this.Type == 3) {
				this.getListen();
			}
			if (this.Type == 4) {
				this.GetMyQuestionReading();
			}
		},
	};
</script>

<style scoped>
	.exam-con {
		box-sizing: border-box;
		margin-top:20rpx;
	}

	.answerSheet {
		font-size: 40rpx;
		margin-left: 30rpx;
		color: #000;
	}
	.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>
