<template>
	<!-- 阅读理解 -->
	<view>
		<view class="item">
			<view class="item1">
				<view class="flex" style="height:520rpx;overflow:auto;">
					<view class="num readTitle" v-html="dataObj.Title"></view>
				</view>
				<view :style="{maxHeight: `calc(100vh - 730rpx)`}"
					style="overflow-y: auto;">
					<view style="margin:30rpx;" class="Exam_Score">
						本阅读理解共{{dataObj.QuestionContentObj.length}}小题（{{dataObj.Score}}分）</text>
					</view>
					<view class="questionView" v-if="!isShowJx">
						<view v-for="(item, index) in dataObj.QuestionContentObj" :key="index"
							class="item2">
							<view class="flex questionTitle">
								<view style="white-space: nowrap">{{ index + 1 }}、({{item.QuestionName.slice(0, 2)}})</view>
								<view v-html="item.SubTitle"></view>
							</view>
							<view v-for="(item2, index2) in item.SubAnwser" :key="index2">
								<!-- 单选 -->
								<view class="flex flex_start_center item3" 
									v-if="item.QuestionKey === 'single' || item.QuestionKey === 'single-number'">
									<view class="chooseNum" :class="{ myAnswer: dataObj.StudentAnswer[index]==item2.Name }"
										@click="singerChange(dataObj,index,item2)">{{ item2.Name }}
									</view>
									<view class="chooseName" @click="singerChange(dataObj,index,item2)"
										v-html="item2.Content"></view>
								</view>
							</view>
						</view>
					</view>
					<template v-if="isShowJx">
						<view class="questionView">
							<view v-for="(item2, index2) in dataObj.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.Name==dataObj.QuestionAnswerList[index2],'isNotRightAnswer':getErrorAnswer(dataObj,index2,item3.Name)}">
											{{ item3.Name }}
										</view>
										<view class="chooseName" :class="{ 'isRightText': item3.Name==dataObj.QuestionAnswerList[index2],'isNotAnswer':getErrorAnswer(dataObj,index2,item3.Name) }"
											v-html="item3.Content"></view>
									</view>
								</view>
								<view class="AnswerContent">
									<view>
										<text style="color: #8c8a94">正确答案：</text>
										<text
											class="isTrueAnswer">{{dataObj.QuestionAnswerList[index2]}}</text>，
										<text>您的答案：
											<template v-if="dataObj.StudentAnswer.length>0">
												<text
													v-if="dataObj.QuestionAnswerList[index2] == dataObj.StudentAnswer[index2]"
													class="isTrueAnswer">
													{{ dataObj.StudentAnswer[index2] }}，回答正确
												</text>
												<text v-else
													class="isNotAnswer">{{dataObj.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="dataObj.AnswerParse">
								<text style="color: #8c8a94;flex-shrink: 0;">解析：</text>
								<view style="color: #000" v-html="dataObj.AnswerParse"></view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	export default {
		props: {
			paperData: Object,
			isShowJx: Boolean
		},
		setup(props, context) {
			let {
				ctx
			} = getCurrentInstance();
			let data = reactive({
				dataObj: props.paperData,
				statusBarHeight: 0,
			});
			let methods = {
				getErrorAnswer(item1,index,name){
					if (item1.StudentAnswer[index] ==name) {
						return true
					}else{
						return false
					}
				},
				//----------------------------------------选题----------------------------------
				// 单选or判断
				singerChange(item1,index,item3) {
					item1.StudentAnswer[index] = item3.Name;
					context.emit("answerChange", data.dataObj);
				}
			};
			onMounted(() => {
				data.dataObj.Title = data.dataObj.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 {
		margin-top: 30rpx;
		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 {
		position: relative;
		margin-top:225rpx;		
	}

	.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;
	}
	.isRightAnswer{
		background-color: green;
		color:#fff!important;
	}
	.isRightText{
		color:green!important;
	}
	.isNotRightAnswer{
		background-color: red!important;
		color:#fff!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;
	}

	.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;
	}

	.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;
	}

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

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