GCLS_Page_Mobile/components/judge-question/judge-question.vue

<template>
	<!-- 判断题 -->
	<view class="judge-area" v-model="questionData">
		<view class="question_title">
			<text class="question_number">
				{{ questionNumberEndIsBracket(questionData.property.question_number) }}
			</text>
			<text class="question_stem" v-html="sanitizeHTML(questionData.stem)"
				:ref="'richText-1-1'+questionData.question_id"
				@longpress="previewByRichTextImg(-1,-1,questionData.question_id)"></text>
		</view>
		<view class="judge" v-for="(item,index) in questionData.option_list" :key="index" v-if="questionChanged">
			<view class="option-left">
				<view :class="['option-bj', computedIsJudgeRight(item.mark)]">
					<text class="serial-number" :style="{'font-size':questionData.property.option_question_number_font_size}">
						{{ isEnable(isEnableManualModify)?(item.custom_number?item.custom_number+'.':''):computedQuestionNumber(index,questionData.option_number_show_mode) }}
					</text>
					<text v-html="sanitizeHTML(item.content)" :ref="'richText'+index+1+questionData.question_id"
						@longpress="previewByRichTextImg(index,1,questionData.question_id)"></text>
				</view>
			</view>
			<view class="determine-right">
				<view v-for="option_type in questionData.property.option_type_list" :key="option_type"
					@click="determine(item,option_type,index)" :class="[
              'circle-bj',
              {
                active: isAnswer(item.mark, option_type),
              },
              isAnswer(item.mark, option_type)?'':computedIsShowRightAnswer(item.mark, option_type),
            ]">
					<SvgIcon v-if="option_type===option_type_list[0].value" icon-class="checkmarkempty" size="18" />
					<SvgIcon v-if="option_type===option_type_list[1].value" icon-class="closeempty" size="14" />
					<SvgIcon v-if="option_type===option_type_list[2].value" icon-class="neutral-tone" size="20" />
				</view>
			</view>
		</view>
		<view class="reference" v-if="isViewAnalysis&&answer_control[questionData.question_id].isViewRightAnswer">
			<text class="reference-title">解析</text>
			<text class="reference-answer" v-html="sanitizeHTML(questionData.analysis)"
				:ref="'richText-2-2'+questionData.question_id"
				@longpress="previewByRichTextImg(-2,-2,questionData.question_id)">
			</text>
		</view>
	</view>
</template>

<script>
	import {
		questionData,
		option_type_list,
		sanitizeHTML,
		isEnable,
		computedQuestionNumber,
		answer_control,
	} from '@/pages/answer_question/common/data/common.js';
	import {
		changeNumToHan,
		checkNum
	} from '@/utils/transform.js';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	import {
		GetFileURLMap
	} from '@/api/api.js';
	export default {
		name: "judge-question",
		mixins: [AnswerControlMixin],
		props: {
			questionData: questionData,
			isEnableManualModify: {
				type: String,
				default: 'false',
			},
		},
		data() {
			return {
				computedQuestionNumber,
				isEnable,
				sanitizeHTML,
				option_type_list,
				answer_control,
			}
		},
		watch: {
			'questionData': {
				handler(val) {
					this.$forceUpdate();
				},
				immediate: true,
				deep: true
			},
		},
		computed: {
			questionChanged: function() {
				this.setUserAnswer()
				return true;
			},
			isViewAnalysis: function() {
				return isEnable(this.questionData.property.is_enable_analysis);
			}
		},
		methods: {
			determine(item, answer, index) {
				if (this.answer_control[this.questionData.question_id].isReadOnly) return;
				var questionId = this.questionData.question_id;
				this.questionData.user_answer[questionId].isEdit = true;
				if (item.answer !== answer)
					item.answer = answer;
				else
					item.answer = '';

				var ans = {
					mark: item.mark,
					option_type: item.answer
				};

				var preAnswer = this.questionData.user_answer[questionId].answer_list.find(p => p.mark === ans.mark);
				if (!preAnswer)
					this.questionData.user_answer[questionId].answer_list.push(ans);
				else
					preAnswer.option_type = item.answer;

				var ansed = this.questionData.user_answer[questionId].answer_list.filter(p => p.option_type != '');
				this.questionData.user_answer[questionId].is_fill_answer = ansed.length > 0;
				this.questionData.user_answer[questionId].content = JSON.stringify(ansed);
				this.$set(this.questionData.user_answer[questionId], 'answer_list', ansed);

				this.$emit("setSubAnswer", this.questionData.user_answer[questionId], questionId);
			},
			setUserAnswer: function() {
				var that = this;
				var callback = function() {
					var userAnswer = [];
					var questionId = that.questionData.question_id;
					var _ua = that.questionData.user_answer[questionId];
					if (_ua && _ua.answer_list && _ua.answer_list.length > 0)
						userAnswer = _ua.answer_list;

					if (userAnswer.length == 0) return;

					that.questionData.option_list.forEach(p => {
						var _ans = userAnswer.find(x => x.mark === p.mark);
						if (_ans)
							p.answer = _ans.option_type
					})
				}
				if (that.questionData.isSubSub) {
					callback();
				} else {
					this.$emit("getUserAnswer", this.questionData.question_id, callback);
				}
			},

			isAnswer(mark, option_type) {
				return this.questionData.user_answer[this.questionData.question_id].answer_list.some((li) => li.mark === mark &&
					li.option_type === option_type);
			},

			/**
			 * 计算是否显示正确答案的样式
			 * @param {string} mark 选项标识
			 * @param {string} option_type 选项类型
			 */
			computedIsShowRightAnswer(mark, option_type) {
				var cur = this.commonComputedAnswerControl(this.questionData.question_id);
				if (!cur.isJudgeAnswer && !cur.isViewRightAnswer) {
					return [];
				}
				if (!cur.isViewRightAnswer) return '';
				// let selectOption = this.questionData.user_answer[this.questionData.question_id].answer_list.find((item) => item
				// 	.mark === mark); // 查找是否已选中的选项
				// if (!selectOption) return '';
				// return this.questionData.answer.answer_list.find((item) => item.mark === mark).option_type === option_type &&
				// 	!(selectOption.option_type === option_type) ?
				// 	'answer-right' :
				// 	'';
				//未答题也显示正确样式
				return this.questionData.answer.answer_list.find((item) => item.mark === mark).option_type === option_type ?
					'answer-right' :
					'';
			},
			/**
			 * 计算判断题题干的样式
			 * @param {string} mark 选项标识
			 */
			computedIsJudgeRight(mark) {
				var cur = this.commonComputedAnswerControl(this.questionData.question_id);

				if (!cur.isJudgeAnswer && !cur.isViewRightAnswer) {
					return [];
				}
				if (!cur.isJudgeAnswer) return '';
				let selectOption = this.questionData.user_answer[this.questionData.question_id].answer_list.find((item) => item
					.mark === mark); // 查找是否已选中的选项
				if (!selectOption) return 'wrong';
				return this.questionData.answer.answer_list.find((item) => item.mark === mark).option_type === selectOption
					.option_type ?
					'right' :
					'wrong';
			},
		}
	}
</script>

<style lang="scss" scoped>
	.judge {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 32rpx;
		column-gap: 28rpx;

		.option-left {
			display: flex;
			width: 100%;
			font-size: $font-size-serial;

			.option-bj {
				flex: 1;
				display: flex;
				align-items: center;
				column-gap: 8rpx;
				border-radius: 40rpx;
				background-color: $uni-bg-color-grey;
				padding: 16rpx 24rpx;

				&.right {
					background-color: $right-bc-color;
				}

				&.wrong {
					border: 1px solid $error-color;
				}

				.serial-number {
					align-self: flex-start;
				}
			}
		}

		.determine-right {
			display: flex;
			column-gap: 10rpx;

			.circle-bj {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: $uni-bg-color-grey;

				&.active {
					color: #ffffff;
					background-color: $light-main-color;
				}

				&.answer-right {
					color: $right-color;
					border: 1px solid $right-color;
				}
			}
		}
	}

	.reference {
		margin: 32rpx 0;
		background-color: #f9f8f9;
		padding: 24rpx;

		.reference-title {
			display: block;
			line-height: 64rpx;
			color: #4E5969;
			font-size: 28rpx;
		}

		.reference-answer {
			color: #1D2129;
			line-height: 48rpx;
			font-size: 14pt;
		}
	}
</style>