<template>
	<!-- 阅读理解 -->
	<view>
		<view class="item">
			<view class="name">
				<view>
					{{ changeNumToHan(sortIndex) }}、{{ data.GroupName }}
					<text class="Exam_Score">（共{{ data.DetailsList.length }}道,{{ data.GScore }}分）</text>
				</view>
				<view class="ExamIndex_Box">
					<text class="Single_Before">{{ ExamIndex }}</text>/<text
						class="Exam_Total">{{ data.DetailsList.length }}</text>
				</view>
			</view>
			<swiper class="swiper-box" :style="{
          height: `calc(100vh - 200rpx - ${statusBarHeight}px)`,
        }" :autoplay="autoplay" :current="current" @change="onchange">
				<swiper-item v-if="sortIndex != 1"></swiper-item>
				<swiper-item v-for="(item1, index1) in data.DetailsList" :key="index1">
					<view class="item1" :style="{height: `calc(100vh - 390rpx - ${statusBarHeight}px)`}">
						<view class="flex">
							<view class="num readTitle" v-html="item1.Title"></view>
							<!-- <text class="Exam_Score">（{{item1.Score}}）</text> -->
						</view>
						<!-- <view class="questionBox" :style="{ height: `${questionH}rpx` }">
							<view class="questionTotal" @touchstart="touchstart" @touchmove="touchmove"
								@touchend="touchend">本阅读理解共5小题</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="isOperate">
								<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><text class="Exam_Score">（{{item2.SubScore}}）</text>
										</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 === 'judge'||item2.QuestionKey === 'single-number'
                        ">
												<view class="chooseNum" :class="{ myAnswer: item3.IsAnswer }"
													@click="singerChange(item2, item3)">{{ item3.Name }}
												</view>
												<view class="chooseName" @click="singerChange(item2, item3)"
													v-html="item3.Content"></view>
											</view>
											<!-- 多选 -->
											<view class="flex flex_start_center item3"
												v-if="item2.QuestionKey === 'multiple'">
												<view class="chooseNum" :class="{ myAnswer: item3.IsAnswer }"
													@click="multipleChange(item2, item3)">{{ item3.Name }}
												</view>
												<view class="chooseName" @click="multipleChange(item2, item3)"
													v-html="item3.Content"></view>
											</view>
											<!-- 填空 -->
											<view class="flex flex_start_center item3"
												v-if="item2.QuestionKey === 'fill-in'">
												<view style="margin-right:15rpx;">{{ index3 + 1 }} </view>
												<input type="text" style="height:70rpx;" v-model="item3.Content"
													class="chooseName chooseName2" placeholder="请填写答案"
													@input="AnswerChange(item2)" />
											</view>
											<!-- 简答 -->
											<view class="flex flex_start_center item3"
												v-if="item2.QuestionKey === 'short-answer'">
												<textarea type="text" v-model="item3.Content"
													class="chooseName chooseName2" placeholder="请填写答案"
													@input="AnswerChange(item2)" />
											</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><text class="Exam_Score">（{{item2.SubScore}}）</text>
										</view>
										<view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
											<!-- 单选 、判断-->
											<view class="flex item3"
												v-if="item2.QuestionKey === 'single' || item2.QuestionKey === 'judge'||item2.QuestionKey === 'single-number'">
												<view class="chooseNum" :class="{ isTrueAnswer: item3.IsAnswer }">
													{{ item3.Name }}
												</view>
												<view class="chooseName" :class="{ isTrueAnswer: item3.IsAnswer }"
													v-html="item3.Content"></view>
											</view>

											<!-- 多选 -->
											<view class="flex item3" v-if="item2.QuestionKey === 'multiple'">
												<view class="chooseNum" :class="{ isTrueAnswer: item3.IsAnswer }">
													{{ item3.Name }}
												</view>
												<view class="chooseName" :class="{ isTrueAnswer: item3.IsAnswer }"
													v-html="item3.Content"></view>
											</view>
											<!-- 填空 -->
											<view class="flex item3" v-if="item2.QuestionKey === 'fill-in'">
												<view class="chooseNum">{{ index3 + 1 }} </view>
												<view v-html="item3.Content" class="chooseName"></view>
											</view>
											<!-- 简答 -->
											<view class="flex item3" v-if="item2.QuestionKey === 'short-answer'">
												<view v-html="item3.Content" class="chooseName"></view>
											</view>
										</view>
										<view class="AnswerContent">
											<view>
												<text style="color: #8c8a94">正确答案：</text>
												<text
													class="isTrueAnswer">{{item1.QuestionAnswerList[index2].SubAnswer}}</text>，
												<text>您的答案：
													<template v-if="item1.AnswerList[index2].SubAnswer!=''">
														<text
															v-if="item1.QuestionAnswerList[index2].SubAnswer == item1.AnswerList[index2].SubAnswer"
															class="isTrueAnswer">
															{{ item1.AnswerList[index2].SubAnswer }}
														</text>
														<text v-else class="isNotAnswer">{{item1.AnswerList[index2].SubAnswer}}，回答错误</text>
													</template>
													<template v-else>
														<text class="isNotAnswer">未作答</text>
													</template>
												</text>
											</view>
											<view style="margin-top:20rpx;"
												v-if="item1.AnswerList[index2].StudentScore!=''||item1.AnswerList[index2].StudentScore===0">
												<text style="color:#8c8a94">您的得分：</text>
												<text class="isTrueAnswer"
													v-if="item1.AnswerList[index2].StudentScore>0">{{item1.AnswerList[index2].StudentScore}}</text>
												<text class="isNotAnswer"
													v-else>{{item1.AnswerList[index2].StudentScore}}</text>
											</view>
										</view>
									</view>
									<view style="word-wrap: break-word; margin: 0 30rpx 30rpx 30rpx;display: flex;align-items: center;"
										class="AnswerContent" v-if="item1.AnswerParse">
										<text style="color: #8c8a94">解析：</text>
										<view style="color: #000" v-html="item1.AnswerParse"></view>
									</view>
								</view>
							</template>
						</view>
					</view>
					<view class="AnswerBtn clear">
						<view class="AnswerBtnFirst" @click="getBeforeExam()" v-if="ExamIndex!=1||sortIndex!=1">上一题</view>
						<view class="AnswerBtnSecond" v-if="sortIndex != sortTotal" @click="getNextExam()">下一题</view>
					</view>
				</swiper-item>
				<swiper-item v-if="sortIndex != sortTotal"></swiper-item>
			</swiper>
		</view>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	import {
		changeNumToHan
	} from "../../utils/index";
	export default {
		props: {
			paperData: Object,
			sort: Number,
			sortTotal: Number,
			isLast: Boolean,
			startIndex: Number,
			isOperate: Boolean,
			ExamStatus: Number
		},
		setup(props, context) {
			let {
				ctx
			} = getCurrentInstance();
			let data = reactive({
				autoplay: false,
				sortIndex: props.sort + 1,
				sortTotal: props.sortTotal, //总共多少道大题
				data: props.paperData,
				Score: 0, //总分
				current: 1, //默认从第几个开始-用于从快捷菜单点入
				ExamIndex: 1, //第几题
				questionH: 500, //问题区域高度
				timer: null,
				timeOutEvent: false,
				statusBarHeight: 0,
				isOperate: props.isOperate,
				ExamStatus: props.ExamStatus
			});
			//判断是否是第一大题
			if (data.sortIndex === 1) {
				data.current = 0;
				//从答题卡进入
				if (props.startIndex) {
					data.current = props.startIndex - 1;
					data.ExamIndex = props.startIndex;
				}
			} else {
				if (props.startIndex) {
					data.current = props.startIndex;
					data.ExamIndex = props.startIndex;
				}
			}
			watch(data.data, (newVal, oldVal) => {
				if (newVal) {
					context.emit("answerChange", newVal);
				}
			});
			let methods = {
				changeNumToHan,
				jumpPage() {
					uni.navigateTo({
						url: "/pages/exam/examPaper",
					});
				},
				back() {
					uni.navigateBack();
				},
				//----------------------------------------选题----------------------------------
				// 单选or判断
				singerChange(item2, item3) {
					item2.SubAnwser.map((e) => {
						if (e.Name == item3.Name) {
							e.IsAnswer = true;
							item2.IsRes = true; //答题标记
						} else {
							e.IsAnswer = false;
						}
					});
				},
				// 多选
				multipleChange(item2, item3) {
					item3.IsAnswer = !item3.IsAnswer;
					//标记已回答
					item2.IsRes = item2.SubAnwser.some((e) => {
						return e.IsAnswer;
					});
				},
				onchange(e) {
					data.ExamIndex = e.detail.current;
					if (data.sortIndex == 1) {
						data.ExamIndex = e.detail.current + 1;
					}
					if (data.ExamIndex === data.data.DetailsList.length + 1) {
						this.$emit("getAfterTopic");
					}
					if (e.detail.current == 0 && data.sortIndex != 1) {
						this.$emit("getBeforeTopic");
					}
				},
				AnswerChange(item) {
					item.IsRes = item.SubAnwser.some((e) => {
						console.log(217, e.Content && e.Content != "");
						return e.Content && e.Content != "";
					});
					console.log(218, item.IsRes);
				},
				//触摸事件
				touchstart(e) {
					clearTimeout(data.timer);
					data.timer = setTimeout(() => {
						data.timeOutEvent = true;
					}, 100);
				},
				touchmove(e) {
					if (data.timeOutEvent) {
						let touches = e.touches[0];
						let startTy = touches.clientY;
						let screenHeight = uni.getSystemInfoSync().screenHeight;
						data.questionH = (screenHeight - startTy) * 2;
					}
				},
				touchend() {
					data.timeOutEvent = false;
					clearTimeout(data.timer);
				},
				//点击上一题
				getBeforeExam() {
					data.current = data.current - 1;
				},
				//点击下一题
				getNextExam() {
					data.current = data.current + 1;
				}
			};
			onMounted(() => {
				console.log(361, data.data);
				data.data.DetailsList.forEach(x=>{
					x.Title = x.Title.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
				})
				if (props.isLast) {
					if (data.sortIndex === 1) {
						data.current = props.paperData.DetailsList.length - 1;
					} else {
						data.current = props.paperData.DetailsList.length;
					}
				}
				data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			});
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
	};
</script>
<style scoped>
	.AnswerBtn {
		margin-top: 70rpx;
		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;
	}

	.isTrueAnswer {
		color: green !important;
	}

	.isNotAnswer {
		color: red !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;
	}

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

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

	.isTrueAnswer {
		color: green !important;
	}

	.isNotAnswer {
		color: red !important;
	}

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

	.Exam_Score {
		color: #999999;
		font-size: 28rpx;
	}
</style>
