<template>
	<!-- 阅读理解 -->
	<view>
		<view class="item">
			<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>
			<swiper class="swiper-box" :style="{height: `calc(100vh - 320rpx)`}" :current="current" @change="onchange">
				<swiper-item v-for="(item1, index1) in dataList" :key="index1">
					<view class="item1">
						<view class="flex" style="max-height:600rpx;overflow:auto;">
							<view class="num readTitle" v-html="item1.Title"></view>
						</view>
						<view :style="{maxHeight: `calc(100vh - 800rpx)`}"
							style="overflow-y: auto;">
							<view style="margin:30rpx;" class="Exam_Score">本阅读理解共{{item1.QuestionContentObj.length}}小题
							</view>
							<template v-if="item1.StudentAnswer.length<item1.QuestionContentObj.length">
								<view class="questionView">
									<view v-for="(item2, index2) in item1.QuestionContentObj" :key="index2"
										class="item2">
										<view class="flex questionTitle">
											<view style="white-space: nowrap">{{ index2 + 1 }}、({{item2.QuestionName.slice(0, 2)}})</view>
											<view v-html="item2.SubTitle"></view>
										</view>
										<view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
											<!-- 单选 -->
											<view class="flex flex_start_center item3" 
												v-if="item2.QuestionKey === 'single' || item2.QuestionKey === 'single-number'">
												<view class="chooseNum" :class="{ myAnswer: item1.StudentAnswer[index2]==item3.Name }"
													@click="singerChange(item1,index2,item3)">{{ item3.Name }}
												</view>
												<view class="chooseName" @click="singerChange(item1,index2,item3)"
													v-html="item3.Content"></view>
											</view>
										</view>
									</view>
								</view>
							</template>
							<template v-else>
								<view class="questionView">
									<view v-for="(item2, index2) in item1.QuestionContentObj" :key="index2"
										class="item2">
										<view class="flex questionTitle">
											<view style="white-space: nowrap">
												{{ index2 + 1 }}、({{item2.QuestionName.slice(0, 2)}})
											</view>
											<view v-html="item2.SubTitle"></view>
										</view>
										<view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
											<!-- 单选-->
											<view class="flex item3"
												v-if="item2.QuestionKey === 'single' || item2.QuestionKey === 'single-number'">
												<view class="chooseNum" :class="{ 'isRightAnswer': item3.IsAnswer,'isNotRightAnswer':getErrorAnswer(item1,index2,item3.Name)}">
													{{ item3.Name }}
												</view>
												<view class="chooseName" :class="{ 'isRightText': item3.IsAnswer }"
													v-html="item3.Content"></view>
											</view>
										</view>
										<view class="AnswerContent">
											<view>
												<text style="color: #8c8a94">正确答案：</text>
												<text
													class="isTrueAnswer">{{item1.QuestionAnswerList[index2]}}</text>，
												<text>您的答案：
													<template v-if="item1.StudentAnswer.length>0">
														<text
															v-if="item1.QuestionAnswerList[index2] == item1.StudentAnswer[index2]"
															class="isTrueAnswer">
															{{ item1.StudentAnswer[index2] }}，回答正确
														</text>
														<text v-else
															class="isNotAnswer">{{item1.StudentAnswer[index2]}}，回答错误</text>
													</template>
													<template v-else>
														<text class="isNotAnswer">未作答</text>
													</template>
												</text>
											</view>
										</view>
									</view>
									<view
										style="word-wrap: break-word; margin: 0 30rpx 30rpx 30rpx;display: flex;"
										class="AnswerContent" v-if="item1.AnswerParse">
										<text style="color: #8c8a94;flex-shrink: 0;">解析：</text>
										<view style="color: #000" v-html="item1.AnswerParse"></view>
									</view>
								</view>
							</template>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="AnswerBtn clear" style="display:none;">
			<view class="AnswerBtnFirst" @click="getBeforeExam()" v-if="current!=0">上一题
			</view>
			<view class="AnswerBtnSecond" :class="{'isCanNext':!isCanNext}" v-if="current!=dataList.length" @click="getNextExam()">下一题</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	import {
		SetStudentPractice
	} from "../../api/exam";
	export default {
		props: {
			paperData: Array,
			Count: Number,
			Times: Number,
			StartIndex: Number
		},
		setup(props, context) {
			let {
				ctx
			} = getCurrentInstance();
			let data = reactive({
				dataList: props.paperData,
				current: 0, //默认从第几个开始-用于从快捷菜单点入
				statusBarHeight: 0,
				isCanNext:false //判断是否能点击下一题
			});
			let UserInfo = uni.getStorageSync('userInfo');
			watch(() => [...props.paperData], (val) => {
				val.forEach(x => {
					x.Title = x.Title.replace(/\<img/gi, '<img style="max-width:100%;height:520rpx" ')
				})
				data.dataList = [...data.dataList, ...val];
			})
			// watch(()=>props.StartIndex,(val)=>{
			// 	if(val>-1){
			// 		data.current=val;
			// 	}
			// })			
			let methods = {
				stopTouchMove(){
					return true
				},
				clickImg(src) {
					console.log(src);
					wx.previewImage({
						urls: [src], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: '', // 当前显示图片的http链接，默认是第一个
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				},
				jumpPage() {
					uni.navigateTo({
						url: "/pages/exam/examPaper",
					});
				},
				goBack() {
					uni.navigateBack();
				},
				getErrorAnswer(item1,index,name){					
					if (item1.StudentAnswer[index] ==name) {
						return true
					}else{
						return false
					}
				},
				//----------------------------------------选题----------------------------------
				// 单选or判断
				singerChange(item1,index,item3) {
					item1.StudentAnswer[index] = item3.Name;
					//判断题数已经全做
					if(item1.StudentAnswer.length==item1.QuestionContentObj.length){
						data.isCanNext=true;
						this.getNextExam();
					}
				},
				onchange(e) {
					data.current = e.detail.current;
					if(data.current+1==data.dataList.length){
						this.$emit('getAfter');
					}
				},
				//点击上一题
				getBeforeExam() {
					data.current = data.current - 1;
				},
				//点击下一题
				getNextExam() {
					let msg = {
						Id: 0,
						StudentId: UserInfo.AccountId,
						Category: data.dataList[data.current].Category,
						QuestionId: data.dataList[data.current].QuestionId,
						Title: data.dataList[data.current].Title,
						QuestionContent: data.dataList[data.current].QuestionContentObj,
						QuestionTypeId: data.dataList[data.current].QuestionTypeId,
						QuestionTypeKey: data.dataList[data.current].QuestionTypeKey,
						StudentAnswer: data.dataList[data.current].StudentAnswer,
						AnswerParse: data.dataList[data.current].AnswerParse,
						LevelType:data.dataList[data.current].LevelType,
						Answer:data.dataList[data.current].Answer,
						IsAnswer: 0,
						IsWrong: 0,
						Times: props.Times
					}
					if(data.dataList[data.current].StudentAnswer.length>0){
						msg.IsAnswer=1;
					}else{
						msg.IsAnswer=0;
					}
					if(data.dataList[data.current].StudentAnswer.length==data.dataList[data.current].QuestionAnswerList.length){
						if(data.dataList[data.current].StudentAnswer.toString()==data.dataList[data.current].QuestionAnswerList.toString()){
							msg.IsWrong = 0
						}else{
							msg.IsWrong = 1
						}
					}
					let res = SetStudentPractice(msg).then(res => {
						if (res) {
							if (res.Code == 1) {
					
							}
						}
					});
					if(msg.IsWrong==0){
						data.current = data.current + 1;
					}
				}
			};
			onMounted(() => {
				data.dataList.forEach(x => {
					x.Title = x.Title.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
				})
				data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			});
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
	};
</script>
<style scoped>
	.AnswerBtn {
		padding: 0 40rpx;
	}

	.clear {
		clear: both
	}

	.AnswerBtnFirst {
		width: 250rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
		border: 1px solid #00ACF9;
		color: #00ACF9;
		float: left;
	}

	.AnswerBtnSecond {
		width: 250rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
		background-color: #00ACF9;
		color: #fff;
		float: right;
	}

	.item {
		/* margin-bottom: 40rpx; */
		position: relative;
	}

	.name {
		height: 90rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #111111;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
	}
	.isRightAnswer{
		background-color: green!important;
		color:#fff!important;
	}
	.isRightText{
		color:green!important;
	}
	.isNotAnswer {
		color: red !important;
	}

	.isTrueAnswer {
		color: green !important;
	}
	.isNotRightAnswer{
		background-color: red;
		color:#fff!important;
	}


	.ExamIndex_Box {
		margin-right: 48rpx;
	}

	.Exam_Total {
		font-size: 25rpx;
		color: gray;
	}

	.swiper-box {
		height: calc(100vh - 230rpx);
		box-sizing: border-box;
		overflow: auto;
	}

	.num {
		font-size: 30rpx;
		font-family: PingFang SC;
		color: #111111;
		box-sizing: border-box;

	}

	.readTitle img {
		max-width: 100%;
	}

	.Single_Before {
		font-size: 30rpx;
		font-weight: bold;
		color: #da7878;
	}

	.item1 {
		height: 100%;
		align-items: center;
		/* overflow-y: auto; */
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.questionBox {
		width: 100%;
		min-height: 500rpx !important;
		max-height: 800rpx !important;
		/* background-color: #eee; */
		position: absolute;
		left: 0rpx;
		bottom: 0rpx;
		z-index: 9;
		color: #000000;
		transition: all 0.5;
		box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
	}

	.questionView {
		height: 100%;
		/* overflow-y: auto; */
		box-sizing: border-box;
		padding-bottom: 80rpx;
	}

	.questionTotal {
		text-align: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #888888;
		padding: 30rpx 0;
	}

	.questionTitle {
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #111111;
	}

	.item2 {
		box-sizing: border-box;
		margin-bottom: 50rpx;
		padding: 0 30rpx;
	}

	.myAnswer {
		background-color: #00acf9 !important;
		color: #ffffff !important;
	}

	.myAnswerText {
		color: #00acf9 !important;
	}

	.item3 {
		padding-left: 25rpx;
		margin: 20rpx 0;
		align-items: center;
	}

	.chooseNum {
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 50%;
		border: 1px solid #e2e2e2;
		margin-right: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
		flex-shrink: 0;
	}

	.chooseName {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.chooseName2 {
		flex-grow: 1;
		border-bottom: 1px solid #111;
		color: #111111;
	}


	.isNotAnswer {
		color: red !important;
	}
	.isTrueAnswer {
		color: green !important;
	}

	.AnswerContent {
		font-size: 30rpx;
		padding: 25rpx;
		background-color: #f4f4f4;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.Exam_Score {
		color: #999999;
		font-size: 28rpx;
	}

	.Exam_Current {
		font-size: 35rpx;
		color: red;
	}

	.Exam_Count {
		color: gray;
		font-size: 26rpx;
	}
	.isCanNext{
		background-color: gray!important;
	}
</style>
