<template>
	<!-- 计算题 -->
	<view>
		<view class="item">
			<view class="name" style="padding: 0 20px">
				<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 - 300rpx - ${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="padding: 0 20px" :style="{height: `calc(100vh - 390rpx - ${statusBarHeight}px)`}">
						<view class="flex">
							<template v-if="item1.QuestionContentObj[1] && item1.QuestionContentObj[1].length > 0">
								<view class="num">(1)</view>
								<view class="num">-({{item1.QuestionContentObj[1].length}})题共用备选答案：</view><text class="Exam_Score">（{{item1.Score}}）</text>
							</template>
						</view>
						<template v-if="item1.QuestionContentObj[0] && item1.QuestionContentObj[0].length > 0">
							<view v-for="(item2, index2) in item1.QuestionContentObj[0]" :key="index2">
								<view class="flex item2 flex_start_center">
									<view class="chooseNum">{{ item2.Name }}</view>
									<view style="margin-left: 5px" class="chooseName" v-html="item2.Content"></view>
								</view>
							</view>
						</template>
						<template v-if="isOperate">
							<template v-if="item1.QuestionContentObj[1] && item1.QuestionContentObj[1].length > 0">
								<view v-for="(item3, index3) in item1.QuestionContentObj[1]" :key="index3">
									<view class="flex item2 flex_start_center">
										<view class="num">{{ index3 + 1 }}.</view>
										<view class="chooseName" v-html="item3.Content"></view>
									</view>
									<van-button type="primary" size="small" @click="alertMenu(item3)">
										{{ item3.Name == "" ? "请选择" : item3.Name }}
									</van-button>
									<van-action-sheet :show="item3.isShow" @click-overlay="hideVan(item3)"
										:actions="getSelect(item1.QuestionContentObj[0])"
										@select="onSelect($event, item3, item1)" />
								</view>
							</template>
						</template>
						<template v-else>
							<view class="AnswerContent">
								<view>
									<text style="color: #8c8a94">正确答案：</text>
									<text class="isTrueAnswer">{{ item1.Answer }}</text>，
									<text>
										您的答案：
										<template v-if="item1.StundetAnswer != ''">
											<text v-if="item1.Answer == item1.StundetAnswer" class="isTrueAnswer">
												{{ item1.StundetAnswer }}，回答正确
											</text>
											<text v-else class="isNotAnswer">{{ item1.StundetAnswer }}，回答错误</text>
										</template>
										<template v-else>
											<text>未作答</text>
										</template>
									</text>
								</view>
								<view style="margin:20rpx 0;" v-if="item1.StudentScore!=''||item1.StudentScore===0">
									<text style="color:#8c8a94">您的得分：</text>
									<text class="isTrueAnswer" v-if="item1.StudentScore>0">{{item1.StudentScore}}</text>
									<text class="isNotAnswer" v-else>{{item1.StudentScore}}</text>
								</view>
								<view style="word-wrap: break-word" v-if="item1.AnswerParse">
									<text style="color: #8c8a94">解析：</text>
									<view style="color: #000; display: inline-block" v-html="item1.AnswerParse"></view>
								</view>
							</view>
						</template>
					</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,
			isOperate: Boolean,
			startIndex: Number,
			ExamStatus: Number
		},
		setup(props, context) {
			let {
				ctx
			} = getCurrentInstance();
			if (props.paperData.DetailsList && props.paperData.DetailsList.length > 0) {
				props.paperData.DetailsList[0].QuestionContentObj[1].forEach(
					(item, index) => {
						item.isShow = false;
					}
				);
			}
			console.log(props.paperData, "paperData");
			let data = reactive({
				data: props.paperData,
				autoplay: false,
				sortIndex: props.sort + 1,
				sortTotal: props.sortTotal,
				current: 1, //默认从第几个开始-用于从快捷菜单点入
				ExamIndex: 1, //第几题
				isOperate: props.isOperate,
				statusBarHeight: 0,
				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;
				}
			}
			let methods = {
				changeNumToHan,
				jumpPage() {
					uni.navigateTo({
						url: "/pages/exam/examPaper",
					});
				},
				back() {
					uni.navigateBack();
				},
				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");
					}
				},
				alertMenu(item) {
					item.isShow = true;
					this.$forceUpdate();
				},
				//点击背景隐藏
				hideVan(item) {
					item.isShow = false;
					this.$forceUpdate();
				},
				onSelect(e, item3, item1) {
					item3.isShow = false;
					item3.Name = e.detail.name;
					context.emit("answerChange", data.data);
					if (
						item1.QuestionContentObj &&
						item1.QuestionContentObj[1].length > 0
					) {
						item1.IsRes = item1.QuestionContentObj[1].some((e) => {
							return e.Name && e.Name != "";
						});
					}
				},
				getSelect(item) {
					let Array = [];
					if (item && item.length > 0) {
						item.forEach((x) => {
							let obj = {
								name: x.Name,
							};
							Array.push(obj);
						});
					}
					return Array;
				},
				//点击上一题
				getBeforeExam(){
					data.current = data.current-1;
				},
				//点击下一题
				getNextExam(){
					data.current = data.current+1;
				}
			};
			onMounted(() => {
				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: 20rpx;
		padding:0 20px;
	}
	.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;
	}
	
	.name {
		height: 90rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #111111;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.isTrueAnswer {
		color: green !important;
	}

	.isNotAnswer {
		color: red !important;
	}

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

	.viewAnswerContent {
		width: 100%;
		border-bottom: 1px solid #d1d1d1;
		padding-bottom: 5px;
		font-size: 28rpx;
	}

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

	.ExamIndex_Box {
		margin-right: 40rpx;
	}

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

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

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

	.item {
		margin-bottom: 40rpx;
	}

	.item1 {
		align-items: center;
	}

	.item2 {
		/* padding-left: 25rpx; */
		margin: 30rpx 0;
	}

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

	.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: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
	}

	.input {
		box-sizing: border-box;
		width: 690rpx;
		border-bottom: 2rpx solid #000;
		color: #000;
		font-size: 22rpx;
	}

	.textarea {
		box-sizing: border-box;
		padding: 20rpx 0;
	}

	/deep/.textarea-placeholder {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #cccccc;
	}
	.Exam_Score{
		color:#999999;
		font-size:28rpx;
	}
</style>
