<template>
	<div style="line-height: 1.8">
		<a-spin :spinning="qLoading">
			<!-- 单选题 -->
			<div v-if="qType === 1">
				<div class="q-title" v-html="question.title" />
				<div class="q-content">
					<a-radio-group :value="answer.content" @change="(e) => onSingleChange(e.target.value)">
						<a-radio v-for="item in question.items" :key="item.prefix" :value="item.prefix">
							<span class="question-prefix">{{ item.prefix }}.</span>
							<span v-html="item.content" class="q-item-span-content"></span>
						</a-radio>
					</a-radio-group>
				</div>
			</div>
			<!-- 多选题 -->
			<div v-else-if="qType === 2">
				<div class="q-title" v-html="question.title" />
				<div class="q-content">
					<a-checkbox-group :value="answer.contentArray" @change="(val) => onMultiChange(val)">
						<a-checkbox v-for="item in question.items" :key="item.prefix" :value="item.prefix">
							<span class="question-prefix">{{ item.prefix }}.</span>
							<span v-html="item.content" class="q-item-span-content"></span>
						</a-checkbox>
					</a-checkbox-group>
				</div>
			</div>
			<!-- 判断题 -->
			<div v-else-if="qType === 3">
				<div class="q-title" v-html="question.title" style="display: inline; margin-right: 10px" />
				<span style="padding-right: 10px">(</span>
				<a-radio-group :value="answer.content" @change="(e) => onSingleChange(e.target.value)">
					<a-radio v-for="item in question.items" :key="item.prefix" :value="item.prefix">
						<span v-html="item.content" class="q-item-span-content"></span>
					</a-radio>
				</a-radio-group>
				<span style="padding-left: 10px">)</span>
			</div>
			<!-- 填空题 -->
			<div v-else-if="qType === 4">
				<div class="q-title" v-html="question.title" />
				<div>
					<a-form>
						<a-form-item
							v-for="item in question.items"
							:key="item.prefix"
							:label="item.prefix"
							:style="{ margin: '10px 0' }"
						>
							<a-input
								:value="answer.contentArray[item.prefix - 1]"
								@change="(e) => onGapChange(item.prefix - 1, e.target.value)"
							/>
						</a-form-item>
					</a-form>
				</div>
			</div>
			<!-- 简答题 -->
			<div v-else-if="qType === 5">
				<div class="q-title" v-html="question.title" />
				<div style="margin-top: 10px">
					<a-textarea
						:value="answer.content"
						:rows="5"
						:auto-size="{ minRows: 5, maxRows: 10 }"
						@change="(e) => onSingleChange(e.target.value)"
					/>
				</div>
			</div>
		</a-spin>
	</div>
</template>

<script setup>
	import { defineEmits } from 'vue'

	const props = defineProps({
		question: {
			type: Object,
			default: () => ({})
		},
		answer: {
			type: Object,
			default: () => ({ id: null, content: '', contentArray: [] })
		},
		qLoading: {
			type: Boolean,
			default: false
		},
		qType: {
			type: Number,
			default: 0
		}
	})

	const emit = defineEmits(['update:answerContent', 'update:answerContentArray', 'update:answerCompleted'])

	function onSingleChange(val) {
		emit('update:answerContent', val)
		emit('update:answerCompleted', true)
	}
	function onMultiChange(val) {
		emit('update:answerContentArray', val)
		emit('update:answerCompleted', true)
	}
	function onGapChange(idx, val) {
		const arr = [...(props.answer.contentArray || [])]
		arr[idx] = val
		emit('update:answerContentArray', arr)
		emit('update:answerCompleted', true)
	}
</script>

<style lang="less" scoped>
	.q-title {
		font-weight: bold;
		margin-bottom: 8px;
	}
	.q-content {
		margin-bottom: 12px;
	}
	.question-prefix {
		font-weight: 500;
		margin-right: 4px;
	}
	.q-item-span-content {
		margin-left: 2px;
	}
</style>
