GCLS_Page_Mobile/components/matching-question/matching-question.vue

<template>
	<!-- 连线题 -->
	<view class="matching-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="description"
			v-if="isEnable(questionData.property.is_enable_description)&&questionData.description.length > 0"
			v-html="sanitizeHTML(questionData.description)" :ref="'richText-2-2'+questionData.question_id"
			@longpress="previewByRichTextImg(-2,-2,questionData.question_id)">
		</view>
		<view ref="list" class="option-box">
			<view class="option-row" cellpadding="40" v-for="(item,i) in optionList" :key="i">
				<view class="option-serial">
					<text class="serial-number" :style="{'font-size':questionData.property.option_question_number_font_size}">
						{{ isEnable(isEnableManualModify)?(item[0].custom_number?item[0].custom_number+'.':''):computedQuestionNumber(i,questionData.option_number_show_mode) }}
					</text>
				</view>
				<view v-for="({content,mark}, j) in item" :key="mark" :ref="'itemView'+i+j"
					:class="['item-wrapper', `item-${mark}`, computedAnswerClass(mark)]"
					@click="handleClickConnection($event, i, j, mark)">
					<text v-html="sanitizeHTML(content)" class="content" :ref="'richText'+i+j+questionData.question_id"
						@longpress="previewByRichTextImg(i,j,questionData.question_id)"></text>
				</view>
			</view>
		</view>
		<view v-if="answer_control[questionData.question_id].isViewRightAnswer" :class=[circulateAnswerList()]>
			<uni-title type="h1" title="正确答案:" style="margin-bottom:32rpx;"></uni-title>
			<view ref="answer-list" class="option-box">
				<view v-for="(item, i) in optionList" :key="i" class="option-row">
					<view v-for="{ content, mark } in item" :key="mark" :class="['item-wrapper', `answer-item-${mark}`]">
						<text class="content" v-html="sanitizeHTML(content)"></text>
					</view>
				</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-3-3'+questionData.question_id"
				@longpress="previewByRichTextImg(-3,-3,questionData.question_id)">
			</text>
		</view>
	</view>
</template>

<script>
	let landscapeOb;
	import {
		questionData,
		svgNS,
		sanitizeHTML,
		isEnable,
		answer_control,
		computedQuestionNumber
	} from '@/pages/answer_question/common/data/common.js';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	export default {
		name: "matching-question",
		mixins: [AnswerControlMixin],
		props: {
			questionData: questionData,
			isEnableManualModify: {
				type: String,
				default: 'false',
			},
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				answer_control,
				computedQuestionNumber,
				answerList: [], // 答案列表
				curConnectionPoint: {
					i: -1,
					j: -1,
					mark: ''
				}, // 当前连线点
				mediaQueryOb: null,
				lineColorArr: ['#E92E2E', '#1F79F6', '#FA56BB', '#FE9244', '#17B58F', '#FFD85A', '#52C52A', '#000000'],
			};
		},
		created() {
			// console.log('进入连线', this.questionData);
		},
		computed: {
			optionList() {
				this.setUserAnswer();
				var that = this;
				var first_option_list = {};
				var cunList = [];
				var svg_html = "";
				var storageKey = that.questionData.answer_record_id + '_' + that.questionData.share_record_id;
				uni.getStorage({
					key: storageKey,
					success: function(res) {
						first_option_list = res.data;
						var currentData = first_option_list[that.questionData.question_id] || {};
						cunList = currentData.option_list;
					}
				})

				if (cunList && cunList.length > 0)
					return cunList;

				// 生成一个与选项列表相同的二维数组，但没有内容
				let arr = Array.from(Array(this.questionData.option_list.length), () => Array(this.questionData.option_list[0]
					.length).fill({}));
				for (let i = 0; i < this.questionData.property.column_number; i++) {
					let rowNumList = Array.from(Array(this.questionData.option_list.length).keys()); // 行数列表
					for (let j = 0; j < this.questionData.option_list.length; j++) {

						if (!this.questionData.option_list[j][i].lineColor && i == 1) {
							this.questionData.option_list[j][i].lineColor = this.lineColorArr[j];
						}
						let random = Math.floor(Math.random() * rowNumList.length); // 随机行数
						let item = this.questionData.option_list[j][i]; // 当前选项
						arr[rowNumList[random]][i] = item; // 将当前选项添加到随机行数的列中
						rowNumList.splice(random, 1); // 删除已经添加过选项的行数
					}
				}
				first_option_list[that.questionData.question_id] = {
					option_list: arr
				};
				//第一次进入题目，将随机选项存到缓存，uni获取缓存为异步，需注意
				uni.setStorage({
					key: storageKey,
					data: first_option_list
				});

				return arr;
			},
			isViewAnalysis: function() {
				return isEnable(this.questionData.property.is_enable_analysis);
			}
		},
		watch: {
			'questionData.question_id': {
				handler(val) {
					this.commonComputedAnswerControl(val);
					if (!this.questionData.parentType && this.questionData.parentType != 'read')
						this.clearLine();
				},
				immediate: true,
				deep: true
			},
			optionList: {
				handler() {
					let list = this.optionList.map((item) => {
						return item.map(({
							mark
						}) => {
							return {
								mark,
								preMark: '',
								nextMark: ''
							};
						});
					});
					this.$set(this, 'answerList', list);
				},
				immediate: true,
			},
			answerList: {
				handler(list) {
					let _userAnswerList = this.questionData.user_answer[this.questionData.question_id].answer_list;
					let arr = [];
					let column_number = this.questionData.property.column_number;
					// 从前往后遍历，如果有 nextMark，就往后找，直到没有 nextMark
					// 如果第一个选项的 nextMark 为空，则整个行都为空，等待后面的 preArr 填充
					list.forEach((item, i) => {
						let {
							mark,
							nextMark
						} = item[0];
						arr[i] = nextMark ? [mark, nextMark] : new Array(column_number).fill('');
						let _nextMark = nextMark;
						while (_nextMark) {
							let fMark = this.findMark(list, _nextMark, 'next');
							if (column_number > arr[i].length) {
								arr[i].push(fMark);
							}
							_nextMark = fMark;
						}
					});
					let emptyStringArray = []; // 无数据的列的下标数组
					arr.forEach((item, i) => {
						item.every((li) => li.length <= 0) ? emptyStringArray.push(i) : '';
					});
					if (column_number === 2) {
						_userAnswerList = arr;
						//	this.saveUserAnswer();
						return;
					}

					// 从后向前遍历，如果有 preMark，就往前找，直到没有 preMark，并过滤掉无数据的列
					let preArr = [];
					list.forEach((item) => {
						let {
							mark,
							preMark
						} = item[column_number - 1];
						let _arr = new Array(column_number).fill('');
						let back = column_number - 1;
						let _preMark = preMark;
						while (_preMark) {
							_arr[back] = mark;
							back -= 1;
							_arr[back] = _preMark;
							back -= 1;
							let fMark = this.findMark(list, _preMark, 'pre');
							if (back >= 0 && fMark) {
								_arr[back] = fMark;
							}
							_preMark = fMark;
						}
						if (_arr.every((li) => li.length <= 0)) return;
						preArr.push(_arr);
					});
					// 将 preArr 中的数据填充到 arr 无数据的位置中
					if (preArr.length > 0 && emptyStringArray.length > 0) {
						preArr.forEach((item, i) => {
							arr[emptyStringArray[i]] = item;
						});
					}
					_userAnswerList = arr;
					//this.saveUserAnswer();
				},
				deep: true,
			},
		},
		mounted() {
			document.addEventListener('click', this.handleEventConnection);
			this.testMediaQueryObserver();
			this.landscapeObserver();
		},
		beforeDestroy() {
			document.removeEventListener('click', this.handleEventConnection);
		},
		methods: {
			testMediaQueryObserver() {
				this.mediaQueryOb = uni.createMediaQueryObserver(this)
				this.mediaQueryOb.observe({
					minWidth: 750, //页面最小宽度 375px
					// maxWidth: 1200 //页面宽度最大 500px
				}, matches => {
					this.findMarkCreateLine(this.questionData.user_answer[this.questionData.question_id].answer_list, false);
					// var isViewRightAnswer = this.commonComputedAnswerControl(this.questionData.question_id).isViewRightAnswer;
					// this.findMarkCreateLine(this.questionData.answer.answer_list, isViewRightAnswer);
				})
			},
			landscapeObserver() {
				landscapeOb = uni.createMediaQueryObserver(this);
				landscapeOb.observe({
					orientation: 'landscape' //屏幕方向为纵向
				}, matches => {
					this.findMarkCreateLine(this.questionData.user_answer[this.questionData.question_id].answer_list, false);
					// var isViewRightAnswer = this.commonComputedAnswerControl(this.questionData.question_id).isViewRightAnswer;
					// this.findMarkCreateLine(this.questionData.answer.answer_list, isViewRightAnswer);
				})
			},
			destroyed() {
				this.mediaQueryOb.disconnect(); //组件销毁时停止监听
				landscapeOb.disconnect();
			},
			//重置连线点
			resetCurConnectionPoint() {
				this.curConnectionPoint = {
					i: -1,
					j: -1,
					mark: ''
				};
			},
			/**
			 * 当点击的不是连线点时，清除所有连线点的选中状态
			 * @param {PointerEvent} e
			 */
			handleEventConnection(e) {
				let currentNode = e.target;
				while (currentNode !== null) {
					if (currentNode.classList && currentNode.classList.contains('item-wrapper')) {
						break;
					}
					currentNode = currentNode.parentNode;
				}
				if (currentNode) return;
				Array.from(document.getElementsByClassName('item-wrapper')).forEach((item) => {
					item.classList.remove('focus');
				});
				this.resetCurConnectionPoint();
			},

			/**
			 * 处理点击连线
			 * @param {PointerEvent} e 事件对象
			 * @param {Number} i 选项列表索引
			 * @param {Number} j 选项索引
			 * @param {String} mark 选项标识
			 */
			handleClickConnection(e, i, j, mark) {
				if (this.answer_control[this.questionData.question_id].isReadOnly) return;
				let {
					i: curI,
					j: curJ,
					mark: curMark
				} = this.curConnectionPoint;
				// 获取 item-wrapper 元素
				let _ref = 'itemView' + i + j;
				let currentNode = this.$refs[_ref][0].$el;
				while (currentNode !== null) {
					if (currentNode.classList && currentNode.classList.contains('item-wrapper')) {
						break;
					}
					currentNode = currentNode.parentNode;
				}
				// 如果当前连线点不存在或就是当前连线点，则设置当前连线点
				if ((curI === -1 && curJ === -1) || mark === curMark) {
					this.curConnectionPoint = {
						i,
						j,
						mark
					};
					currentNode.classList.add('focus');
					return;
				}
				// 如果当前连线点存在，清除所有连线点的选中状态
				Array.from(document.querySelectorAll('.item-wrapper')).forEach((item) => {
					item.classList.remove('focus');
				});
				// 如果当前连线点与上一个连线点不在相邻的位置，则设置点击的连接点为当前连线点
				if (Math.abs(curJ - j) > 1 || mark === curMark || (curJ === j && curI !== i)) {
					this.curConnectionPoint = {
						i,
						j,
						mark
					};
					currentNode.classList.add('focus');
					return;
				}
				this.changeConnectionList(mark, j);
				// 如果当前连线点与上一个连线点在相邻的位置，则创建连接线
				this.createLine(mark);
			},

			// 循环答案列表
			circulateAnswerList() {
				var isViewRightAnswer = this.commonComputedAnswerControl(this.questionData.question_id).isViewRightAnswer;
				let answer_list = isViewRightAnswer ?
					this.questionData.answer.answer_list :
					this.questionData.user_answer[this.questionData.question_id].answer_list;
				var has = true;
				if (this.$refs['answer-list']) {
					if (this.$refs['answer-list'].$el.childNodes.length >= this.optionList.length * 2)
						has = false;
				}
				if (has)
					this.findMarkCreateLine(answer_list, true);
			},
			/**
			 * 创建连接线
			 * @param {String} mark 选项标识
			 */
			createLine(mark) {
				var cur = this.commonComputedAnswerControl(this.questionData.question_id);
				let {
					offsetWidth,
					offsetLeft,
					offsetTop,
					offsetHeight
				} = document.getElementsByClassName(
					`item-${mark}`
				)[0];
				// `${cur.isViewRightAnswer ? 'answer-' : ''}item-${mark}`,
				const {
					curOffsetWidth,
					curOffsetLeft,
					curOffsetTop,
					curOffsetHeight,
					curMark
				} = this.computedCurConnectionPoint();

				let top = Math.min(offsetTop + offsetHeight / 2, curOffsetTop + curOffsetHeight);
				let left = Math.min(offsetLeft + offsetWidth, curOffsetLeft + curOffsetWidth);
				let width = Math.abs(
					offsetLeft > curOffsetLeft ?
					curOffsetLeft - offsetLeft + offsetWidth :
					offsetLeft - curOffsetLeft + curOffsetWidth,
				);
				let height = Math.abs((offsetTop + offsetHeight / 2) - (curOffsetTop + curOffsetHeight));

				// 判断是左上还是右下
				let size = offsetLeft > curOffsetLeft ? offsetTop > curOffsetTop : offsetTop < curOffsetTop;

				// 创建一个空的SVG元素
				let svg = document.createElementNS(svgNS, 'svg');
				svg.setAttribute(
					'style',
					`position:absolute; width: 57px; height: ${Math.max(8, height)}px; top: ${top}px; left: ${left-1}px;`,
				);
				svg.classList.add('connection-line', `svg-${mark}-${curMark}`); // 添加类名
				// 向SVG元素添加 path 元素
				let path = document.createElementNS(svgNS, 'path');
				path.setAttribute('d', `M ${size ? 0 : 57} 0 L ${size ? 57 : 0} ${height}`); // 设置路径数据
				this.setPathAttr(path, mark, curMark);
				svg.appendChild(path);
				// this.$refs[cur.isViewRightAnswer ? 'answer-list' : 'list'].$el.appendChild(svg); // 将SVG元素插入到文档中
				this.$refs.list.$el.appendChild(svg);

				// 清除当前连线点
				this.resetCurConnectionPoint();

				//连线成功，记录答案
				this.saveUserAnswer();
			},

			//创建连线
			createLine_new(preMark, mark, predom, curdom, isStandardAnswer) {
				var preName = isStandardAnswer ? 'answer-' : '';
				if (!curdom) return;
				let {
					offsetWidth,
					offsetLeft,
					offsetTop,
					offsetHeight
				} = curdom;
				let curOffsetWidth = predom.offsetWidth;
				let curOffsetHeight = predom.offsetHeight;
				let curOffsetLeft = predom.offsetLeft;
				let curOffsetTop = predom.offsetTop;
				let top = Math.min(offsetTop + offsetHeight / 2, curOffsetTop + curOffsetHeight / 2);
				let left = Math.min(offsetLeft + offsetWidth, curOffsetLeft + curOffsetWidth);
				let width = Math.abs(
					offsetLeft > curOffsetLeft ?
					curOffsetLeft - offsetLeft + offsetWidth :
					offsetLeft - curOffsetLeft + curOffsetWidth,
				);
				let height = Math.abs((offsetTop + offsetHeight / 2) - (curOffsetTop + curOffsetHeight / 2));

				// 判断是左上还是右下
				let size = offsetLeft > curOffsetLeft ? offsetTop > curOffsetTop : offsetTop < curOffsetTop;
				// 创建一个空的SVG元素position:absolute定位后需根据元素自身定位计算，目前间隔固定为56PX
				let svg = document.createElementNS(svgNS, 'svg');
				svg.setAttribute(
					'style',
					`position:absolute; width: 57px; height: ${Math.max(8, height)}px; top: ${top}px; left: ${left-1}px;`,
				);
				svg.classList.add('connection-line', `svg-${mark}-${preMark}`); // 添加类名
				// 向SVG元素添加 path 元素
				let path = document.createElementNS(svgNS, 'path');
				path.setAttribute('d', `M ${size ? 0 : 57} 0 L ${size ? 57 : 0} ${height}`); // 设置路径数据
				this.setPathAttr(path, mark, preMark);
				svg.appendChild(path);
				this.$refs[preName + 'list'].$el.appendChild(svg); // 将SVG元素插入到文档中
			},

			// 设置 path 公用属性
			setPathAttr(path, mark, preMark) {
				var color = '#306eff';
				var data = this.optionList.find(p => p[1].mark == mark || p[1].mark == preMark);
				if (data && data[1].lineColor)
					color = data[1].lineColor

				path.setAttribute('stroke-width', '2'); // 设置线条宽度
				path.setAttribute('stroke-linecap', 'round'); // 设置线段的两端样式
				path.setAttribute('stroke', color); // 设置填充颜色
				path.setAttribute('transform', `translate(0, 2)`); // 设置偏移量
			},
			/**
			 * 计算当前连线点的位置
			 * @param {Boolean} isShowRightAnswer 是否是显示正确答案
			 */
			computedCurConnectionPoint() {
				var cur = this.commonComputedAnswerControl(this.questionData.question_id);
				if (cur.isReadOnly) return;
				var isViewRightAnswer = cur.isViewRightAnswer;
				const {
					mark
				} = this.curConnectionPoint;
				// let dom = document.getElementsByClassName(`${isViewRightAnswer ? 'answer-' : ''}item-${mark}`)[0];
				let dom = document.getElementsByClassName(`item-${mark}`)[0];
				return {
					curOffsetWidth: dom.offsetWidth,
					curOffsetLeft: dom.offsetLeft,
					curOffsetTop: dom.offsetTop,
					curOffsetHeight: dom.offsetHeight / 2,
					curMark: mark,
				};
			},

			// 清除所有连接线
			clearLine() {
				document.querySelectorAll('svg.connection-line').forEach((item) => {
					item.remove();
				});
			},

			/**
			 * 修改连接列表
			 * @param {String} mark 选项标识
			 */
			changeConnectionList(mark, j) {
				const {
					mark: curMark,
					j: curJ
				} = this.curConnectionPoint;
				this.changeAnswerList(curMark, mark, curJ < j);
				this.changeAnswerList(mark, curMark, curJ > j);
			},
			getOption(arr, key, val) {
				if (!arr || arr.length == 0) return [];
				var en = arr.find(p => p[key] == val);
				return en;
			},
			/**
			 * 根据 mark 查找 nextMark 或 preMark
			 * @param {Array} list 答案列表
			 * @param {String} mark 标记
			 * @param {'pre'|'next'} type 类型
			 * @returns {String} 返回 nextMark 或 preMark
			 */
			findMark(list, mark, type) {
				let fMark = '';
				list.find((item) => {
					return item.find((li) => {
						if (mark === li.mark) {
							fMark = type === 'pre' ? li.preMark : li.nextMark;
							return true;
						}
					});
				});
				return fMark;
			},

			/**
			 * 改变答案列表
			 * @param {String} curMark 当前选项标识
			 * @param {String} mark 选项标识
			 */
			changeAnswerList(curMark, mark, isPre) {
				let oldPointer = {
					mark: '',
					position: ''
				};
				// 找到当前选项，修改 preMark 或 nextMark
				this.answerList.find((item) =>
					item.find((li) => {
						if (li.mark === curMark) {
							if (isPre) {
								if (li.nextMark) {
									oldPointer = {
										mark: li.nextMark,
										position: 'next'
									};
								}
								li.nextMark = mark;
							} else {
								if (li.preMark) {
									oldPointer = {
										mark: li.preMark,
										position: 'pre'
									};
								}
								li.preMark = mark;
							}
							return true;
						}
					}),
				);
				// 如果当前选项有 preMark 或 nextMark，则清除原来的连线
				if (!oldPointer.mark) return;
				document.querySelector(`svg.connection-line.svg-${curMark}-${oldPointer.mark}`)?.remove();
				document.querySelector(`svg.connection-line.svg-${oldPointer.mark}-${curMark}`)?.remove();

				// 找到原来的选项，清除 preMark 或 nextMark
				this.answerList.find((item) =>
					item.find((li) => {
						if (li.mark === oldPointer.mark) {
							if (oldPointer.position === 'pre') {
								li.nextMark = '';
							} else {
								li.preMark = '';
							}
							return true;
						}
					}),
				);
			},

			computedAnswerClass(mark) {
				var cur = this.commonComputedAnswerControl(this.questionData.question_id);
				if (!cur.isJudgeAnswer) return '';
				let answer = this.questionData.answer.answer_list.find((item) => {
					return item.some((li) => li === mark);
				});
				let user_answer = this.questionData.user_answer[this.questionData.question_id].answer_list;

				return this.is2DArrayContains1DArray(user_answer, answer) ? 'right' : 'wrong';
			},
			is2DArrayContains1DArray(arr2D, arr1D) {
				for (let i = 0; i < arr2D.length; i++) {
					const currentArray = arr2D[i];
					if (currentArray.length !== arr1D.length) {
						continue;
					}
					let found = true;
					for (let j = 0; j < currentArray.length; j++) {
						if (currentArray[j] !== arr1D[j]) {
							found = false;
							break;
						}
					}
					if (found) {
						return true;
					}
				}
				return false;
			},

			//切换题目保存答案
			saveUserAnswer() {
				//保存答案给后台
				var that = this;
				var questionId = this.questionData.question_id;
				var answer_list = this.questionData.answer.answer_list || [];
				var userAnswer = [];
				var is_fill_answer = false;
				answer_list.forEach(p => {
					var a1 = "";
					var a2 = p[1];
					var a3 = "";
					that.answerList.map(x => {
						var en = that.getOption(x, 'mark', a2);
						if (en) {
							a1 = en.preMark;
							a3 = en.nextMark;
							is_fill_answer = is_fill_answer || (a1 || a3);
							return false;
						}
					})
					if (p.length == 3)
						userAnswer.push([a1, a2, a3])
					else
						userAnswer.push([a1, a2])
				})
				this.questionData.user_answer[questionId].isEdit = true;
				this.questionData.user_answer[questionId].is_fill_answer = is_fill_answer;
				this.questionData.user_answer[questionId].content = JSON.stringify(userAnswer);
				this.questionData.user_answer[questionId].answer_list = userAnswer;
				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;
					userAnswer = userAnswer.filter(p => p.length > 1);
					that.findMarkCreateLine(userAnswer, false);
					that.circulateAnswerList();
				};
				if (that.questionData.isSubSub) {
					that.$nextTick(() => {
						callback();
					})
				} else {
					this.$emit("getUserAnswer", this.questionData.question_id, callback);
				}
			},

			/**
			 * @param {String} 标识集合
			 * @param {Boolean} 是否标准答案
			 */
			findMarkCreateLine(markList, isStandardAnswer) {
				var that = this;
				var itemPre = isStandardAnswer ? 'answer-item-' : 'item-';
				this.$nextTick(() => {
					markList.forEach(p => {
						let a0 = p[0];
						let a1 = p[1];
						let a2 = p[2];
						if (!a1) return false;
						if (a0) {
							let preId = itemPre + a0;
							let nextId = itemPre + a1;
							if (!isStandardAnswer) {
								that.changeAnswerList(a1, a0, false);
								that.changeAnswerList(a0, a1, true);
							}
							var predom = document.getElementsByClassName(preId)[0];
							var curdom = document.getElementsByClassName(nextId)[0];
							that.createLine_new(a0, a1, predom, curdom, isStandardAnswer);
						}
						if (a2) {
							let preId = itemPre + a1;
							let nextId = itemPre + a2;
							if (!isStandardAnswer) {
								that.changeAnswerList(a2, a1, false);
								that.changeAnswerList(a1, a2, true);
							}
							var predom = document.getElementsByClassName(preId)[0];
							var curdom = document.getElementsByClassName(nextId)[0];
							that.createLine_new(a1, a2, predom, curdom, isStandardAnswer);
						}
					})
					setTimeout(function() {
						that.$forceUpdate();
					}, 10);
				})

			},

		}
	}
</script>
<style lang="scss" scoped>
	.matching-area {

		.option-box {
			position: relative;
			display: flex;
			flex-direction: column;
			row-gap: 32rpx;
			margin-bottom: 32rpx;

			/deep/ img {
				width: auto;
				height: auto;
				min-width: 100px;
				max-width: 100%;
				max-height: 100%;
			}

			.option-row {
				display: flex;
				column-gap: 56px;

				.option-serial {
					width: 16px;
					margin-right: -46px;
				}

				.item-wrapper {
					display: flex;
					flex: 1;
					align-items: center;
					column-gap: 16rpx;
					padding: 8px 30px 8px 8px;
					border-radius: 16rpx;
					background-color: $uni-bg-color-grey;

					.content {
						flex: 1;
						word-break: break-all;
						font-size: $font-size-serial;
					}

					&.focus {
						background-color: #dcdbdd;
					}

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

					&.wrong {
						border: 1px solid $error-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>