<template>
	<div class="app-contain">
		<a-row class="do-exam-title">
			<a-col :span="24">
				<span v-for="item in answer.answerItems" :key="item.itemOrder">
					<a-tag
						:color="questionDoRightTag(item.doRight)"
						class="do-exam-title-tag"
						@click="goAnchor('question-' + item.itemOrder)"
					>
						{{ item.itemOrder }}
					</a-tag>
				</span>
			</a-col>
		</a-row>
		<a-row class="do-exam-title-hidden">
			<a-col :span="24">
				<span v-for="item in answer.answerItems" :key="item.itemOrder">
					<a-tag class="do-exam-title-tag">{{ item.itemOrder }}</a-tag>
				</span>
			</a-col>
		</a-row>
		<a-layout class="app-item-contain">
			<a-layout-header class="align-center">
				<h1>{{ form.name }}</h1>
				<div>
					<span class="question-title-padding">试卷得分：{{ answer.score }}</span>
					<span class="question-title-padding">试卷耗时：{{ formatSeconds(answer.doTime) }}</span>
				</div>
			</a-layout-header>
			<a-layout-content>
				<a-spin :spinning="formLoading">
					<a-form :model="form">
						<template v-for="(titleItem, index) in form.titleItems" :key="index">
							<h3 class="question-title">{{ titleItem.name }}</h3>
							<a-card class="exampaper-item-box" v-if="titleItem.questionItems.length !== 0">
								<a-form-item
									v-for="questionItem in titleItem.questionItems"
									:key="questionItem.itemOrder"
									:label="questionItem.itemOrder + '.'"
									:id="'question-' + questionItem.itemOrder"
									class="exam-question-item"
									:label-col="{ span: 2 }"
									:wrapper-col="{ span: 24 }"
									:colon="false"
								>
									<QuestionAnswerShow
										:qType="questionItem.questionType"
										:question="questionItem"
										:answer="answer.answerItems[questionItem.itemOrder - 1]"
									/>
								</a-form-item>
							</a-card>
						</template>
					</a-form>
				</a-spin>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script setup>
	import { ref, onMounted, nextTick } from 'vue'
	import { useRoute } from 'vue-router'
	import { useExamStore } from '@/store/exam'
	import { formatSeconds } from '@/utils/exam'
	import examPaperAnswerApi from '@/api/student/examPaperAnswer'
	import QuestionAnswerShow from '../components/QuestionAnswerShow.vue'
	import '../../style.less'
	const route = useRoute()
	const examStore = useExamStore()
	const { enumFormat } = examStore
	const doRightTag = examStore.exam.question.answer.doRightTag

	const form = ref({ titleItems: [] })
	const formLoading = ref(false)
	const answer = ref({
		id: null,
		score: 0,
		doTime: 0,
		answerItems: [],
		doRight: false
	})

	function questionDoRightTag(status) {
		// ant-design-vue的a-tag color支持字符串，直接用value即可
		return enumFormat(doRightTag, status)
	}

	function goAnchor(id) {
		nextTick(() => {
			const el = document.getElementById(id)
			if (el) {
				el.scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
			}
		})
	}

	onMounted(() => {
		const id = route.query.id
		if (id && parseInt(id) !== 0) {
			formLoading.value = true
			examPaperAnswerApi.read(id).then((re) => {
				form.value = re.paper
				answer.value = re.answer
				formLoading.value = false
			})
		}
	})
</script>
