GCLS_Page_Mobile/components/replace-answer-question/replace-answer-question.vue

<template>
	<!-- 替换题 -->
	<view class="replace-answer-area">
		<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 class="replace-box">
			<picker-view :indicator-style="indicatorStyle" :value="indexArr" @change="bindChange" class="picker-view"
				v-if="isShow">
				<picker-view-column v-for="(item,index) in replaceList" :key="index" v-if="item.length>0">
					<view class="item" v-for="(option,indexO) in item" :key="indexO" v-if="option.content!=''">
						{{option.content}}
					</view>
				</picker-view-column>
			</picker-view>
			<view class="disable-view" v-if="answer_control[questionData.question_id].isReadOnly">
			</view>
		</view>
		<!-- 语音作答 -->
		<SoundRecord @setAudioId="setFileId" :disabled="answer_control[questionData.question_id].isReadOnly"
			:wav-blob.sync="questionData.user_answer[questionData.question_id].answer_list[0].audio_file_id"
			:viewPopup="false">
		</SoundRecord>
		<view class="reference" v-if="isViewReference&&answer_control[questionData.question_id].isViewRightAnswer">
			<text class="reference-title">参考答案</text>
			<text class="reference-answer" v-html="sanitizeHTML(questionData.reference_answer)"
				:ref="'richText-3-3'+questionData.question_id"
				@longpress="previewByRichTextImg(-3,-3,questionData.question_id)"></text>
		</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-4-4'+questionData.question_id"
				@longpress="previewByRichTextImg(-4,-4,questionData.question_id)">
			</text>
		</view>
	</view>
</template>

<script>
	import {
		questionData,
		sanitizeHTML,
		isEnable,
		answer_control,
	} from '@/pages/answer_question/common/data/common.js';
	import SoundRecord from '@/components/sound-record/sound-record.vue';
	import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
	export default {
		name: "replace-answer-question",
		mixins: [AnswerControlMixin],
		components: {
			SoundRecord
		},
		props: {
			questionData: questionData,
		},
		data() {
			return {
				sanitizeHTML,
				isEnable,
				answer_control,
				columnsNum: 0,
				replaceList: [],
				markList: [],
				isShow: false,
				indexArr: [],
			};
		},
		watch: {
			'questionData.question_id': {
				handler(val) {
					this.commonComputedAnswerControl(val);
					this.isShow = false;
					this.replaceList = [];
					this.indexArr = [];
					this.columnsNum = this.questionData.property.column_count;
					var opl = this.questionData.option_list.slice();
					// 将数据转换为多个数组
					for (let i = 0; i < this.columnsNum; i++) {
						const array = opl.map(row => row[i]);
						this.replaceList.push(array);
					}
					this.setUserAnswer();
				},
				immediate: true,
				deep: true
			},
			markList: {
				handler(val) {
					for (let i = 0; i < this.columnsNum; i++) {
						if (val.length == i) {
							val.push('');
						} else {
							if (!val[i])
								val[i] = ''
						}
					}
					this.questionData.user_answer[this.questionData.question_id].answer_list[0].mark_list = val;
					this.saveUserAnswer();
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			isViewReference: function() {
				return isEnable(this.questionData.property.is_enable_reference_answer);
			},
			isViewAnalysis: function() {
				return isEnable(this.questionData.property.is_enable_analysis);
			},
			indicatorStyle: function() {
				var opl = this.questionData.option_list.slice();
				var eleWidth = 0;
				uni.createSelectorQuery().select('.replace-box').boundingClientRect(function(rect) {
					eleWidth = rect.width; // 获取元素的宽度
				}).exec();
				var singleWidth = eleWidth / this.columnsNum;
				var heis = [];
				// 将数据转换为多个数组
				for (let i = 0; i < this.columnsNum; i++) {
					opl.map(row => {
						heis.push(Math.round((row[i].content.length * 16) / singleWidth));
					});
				}
				var maxRow = Math.max(...heis);
				if (maxRow > 1) {
					const height = 30 + maxRow * 20;
					return `height: ${height}px;background-color: #777777;opacity: 0.1;`;
				}
				return `height: 34px;background-color: #777777;opacity: 0.1;`;
			}
		},
		methods: {
			bindChange: function(e) {
				if (this.answer_control[this.questionData.question_id].isReadOnly) return;
				const val = e.detail.value;
				// console.log('变化', val);
				this.markList = [];
				for (let i = 0; i < this.columnsNum; i++) {
					// this.markList[i] = this.replaceList[i][val[i]];
					if (this.replaceList[i][val[i]]) {
						this.markList[i] = this.replaceList[i][val[i]].mark;
					}
				}

			},
			//切换选项保存答案
			saveUserAnswer: function() {
				var questionId = this.questionData.question_id;
				this.questionData.user_answer[questionId].isEdit = true;
				var ansed = this.questionData.user_answer[questionId].answer_list;
				this.questionData.user_answer[questionId].is_fill_answer = ansed.length > 0;
				this.questionData.user_answer[questionId].content = JSON.stringify(ansed);
				this.questionData.user_answer[questionId].answer_list = ansed;
			},
			//回显
			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;
					// console.log('2', userAnswer);
					if (userAnswer.length > 0 && userAnswer[0].mark_list.length > 0) {
						// console.log(that.replaceList);
						userAnswer[0].mark_list.forEach((p, i) => {
							if (p) {
								var idx = that.replaceList[i].findIndex(x => x.mark == p);
								that.indexArr.push(idx);
							} else {
								that.indexArr.push(0);
							}
						})
					}
					that.isShow = true;
				};
				this.$emit("getUserAnswer", this.questionData.question_id, callback);
			},
			//异步更新声音ID有问题，所以采用方法手动赋值
			setFileId(fileId) {
				this.questionData.user_answer[this.questionData.question_id].isEdit = true;
				this.$forceUpdate();
			}
		},

	}
</script>

<style lang="scss" scoped>
	.replace-answer-area {
		.replace-box {
			margin-top: 32rpx;
			position: relative;

			/deep/ .picker-view {
				min-width: 100%;
				height: 600rpx;
				margin-top: 20rpx;

				.uni-picker-view-mask {
					border-left: 1px solid #EFEFEF;
					border-right: none;
				}

				.uni-picker-view-mask:last-child {
					border-right: 1px solid #EFEFEF;
				}

				.uni-picker-view-content {
					left: 4px !important;

					.item {
						display: flex;
						align-items: center;
						justify-content: left;
					}
				}
			}

			.disable-view {
				position: absolute;
				height: 600rpx;
				min-width: 100%;
				top: 0;
				left: 0;
			}
		}

		.reference {
			margin: 32rpx 0;
			background-color: $uni-bg-color-grey;
			padding: 24rpx;
			font-size: 28rpx;

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

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