<template>
	<!-- 单选题 -->
	<view>
		<view class="item" style="padding: 0 20px">
			<view class="item1">
				<view class="flex">
					<view class="num" v-html="dataObj.Title"></view>
					<text class="Exam_Score">（{{dataObj.Score}}分）</text>
				</view>
				<view v-for="(item2, index2) in dataObj.QuestionContentObj" :key="index2"
					class="flex item2 flex_start_center">
					<template v-if="!isShowJx">
						<view class="chooseNum" :class="{ 'isMyChoose': item2.ShowName==dataObj.StudentAnswer[0]}"
								@click="change(dataObj, item2)">{{ item2.ShowName }}
							</view>
						<view class="chooseName" @click="change(dataObj, item2)" v-html="item2.Content"></view>
					</template>
					<template v-else>
						<view class="chooseNum"
							:class="{ 'isRightAnswer': item2.ShowName==dataObj.Answer,'isNotRightAnswer':getErrorAnswer(dataObj,item2.ShowName) }">
							{{ item2.ShowName }}
						</view>
						<view class="chooseName"
							:class="{ 'isRightText': item2.ShowName==dataObj.Answer,'isNotAnswer':getErrorAnswer(dataObj,item2.ShowName) }"
							v-html="item2.Content">
						</view>
					</template>
				</view>
				<view class="AnswerContent" v-if="isShowJx">
					<view>
						<text style="color: #8c8a94">正确答案：</text>
						<text class="isTrueAnswer">{{ dataObj.QuestionAnswerList[0] }}</text>，
						<text>您的答案是：
							<template v-if="dataObj.StudentAnswer.length>0">
								<text v-if="dataObj.StudentAnswer[0] == dataObj.QuestionAnswerList[0]"
									class="isTrueAnswer">
									{{ dataObj.StudentAnswer }}，回答正确
								</text>
								<text v-else class="isNotAnswer">{{ dataObj.StudentAnswer[0] }}，回答错误</text>
							</template>
							<template v-else>
								<text>未作答</text>
							</template>
						</text>
					</view>
					<view style="margin-top: 20rpx; word-wrap: break-word" v-if="dataObj.AnswerParse" class="flex">
						<text style="color: #8c8a94;flex-shrink: 0;">解析：</text>
						<view style="color: #000" v-html="dataObj.AnswerParse"></view>
					</view>
				</view>
			</view>
		</view>
		<van-toast id="van-toast" />
	</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 UserInfo = uni.getStorageSync('userInfo');
			let methods = {
				change(item1, item2) {
					item1.StudentAnswer[0] = item2.Name;
					context.emit("answerChange", data.dataObj);
				},
				//判断是否为正确答案
				getErrorAnswer(item1, Number) {
					if (item1.StudentAnswer[0] != item1.QuestionAnswerList[0]) {
						if (item1.StudentAnswer[0] == Number) {
							return true
						}
					}
				}
			};
			onMounted(() => {
				data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			});
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
		async onLoad(options) {}
	};
</script>
<style scoped>
	.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;
	}

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

	.swiper-box {
		box-sizing: border-box;
	}

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

	.item {
		margin-top: 225rpx;
	}

	.item1 {
		align-items: center;
	}

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

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

	.isMyChoose {
		background-color: #00acf9 !important;
		color: #fff;
	}

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

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