<template>
	<div style="margin-top: 10px" class="app-contain">
		<a-space>
			<!-- 试卷名称 -->
			<a-input v-model:value="queryParam.paperName" placeholder="请输入试卷名称" allow-clear />
			<!-- 试卷类型 -->
			<a-select v-model:value="queryParam.paperType" style="width: 200px" placeholder="请选择试卷类型" allow-clear>
				<a-select-option v-for="item in examStore.paperTypeEnum" :key="item.key" :value="item.key">
					{{ item.value }}
				</a-select-option>
			</a-select>
			<!-- 搜索按钮 -->
			<a-button type="primary" @click="handleSearch">搜索</a-button>
		</a-space>
		<a-row :gutter="50">
			<a-col :span="18">
				<a-table
					:loading="listLoading"
					:data-source="tableData"
					:columns="columns"
					row-key="id"
					:custom-row="customRow"
					:pagination="false"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="column.key === 'status'">
							<a-tag :color="statusTagFormatter(record.status)">
								{{ statusTextFormatter(record.status) }}
							</a-tag>
						</template>
						<template v-else-if="column.key === 'action'">
							<template v-if="record.status === 1">
								<router-link :to="{ path: '/student/edit', query: { id: record.id } }" target="_blank">
									<a-button type="link" size="small">批改</a-button>
								</router-link>
							</template>
							<template v-else-if="record.status === 2">
								<router-link :to="{ path: '/student/read', query: { id: record.id } }" target="_blank">
									<a-button type="link" size="small">查看试卷</a-button>
								</router-link>
							</template>
						</template>
					</template>
				</a-table>
				<a-pagination
					v-if="total > 0"
					:total="total"
					:current="queryParam.pageIndex"
					:page-size="queryParam.pageSize"
					@change="onPageChange"
					@showSizeChange="onPageSizeChange"
					:show-size-changer="true"
					:page-size-options="['10', '20', '50', '100']"
					style="margin-top: 20px"
				/>
			</a-col>
			<a-col :span="6">
				<a-card class="record-answer-info">
					<a-descriptions :column="1" bordered size="small">
						<a-descriptions-item label="系统判分">{{ selectItem.systemScore }}</a-descriptions-item>
						<a-descriptions-item label="最终得分">{{ selectItem.userScore }}</a-descriptions-item>
						<a-descriptions-item label="试卷总分">{{ selectItem.paperScore }}</a-descriptions-item>
						<a-descriptions-item label="正确题数">{{ selectItem.questionCorrect }}</a-descriptions-item>
						<a-descriptions-item label="总题数">{{ selectItem.questionCount }}</a-descriptions-item>
						<a-descriptions-item label="用时">{{ selectItem.doTime }}</a-descriptions-item>
					</a-descriptions>
				</a-card>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue'
	import { useExamStore } from '@/store/exam'
	import examPaperAnswerApi from '@/api/student/examPaperAnswer'
	import { parseTime } from '@/utils/exam'
	const examStore = useExamStore()

	const queryParam = reactive({
		pageIndex: 1,
		pageSize: 10,
		paperName: undefined,
		paperType: undefined
	})
	const listLoading = ref(false)
	const tableData = ref([])
	const total = ref(0)
	const selectItem = reactive({
		systemScore: '0',
		userScore: '0',
		doTime: '0',
		paperScore: '0',
		questionCorrect: 0,
		questionCount: 0
	})

	const columns = [
		{ title: '序号', dataIndex: 'id', key: 'id', width: 90 },
		{ title: '学生姓名', dataIndex: 'name', key: 'name' },
		{ title: '班级', dataIndex: 'gradesName', key: 'gradesName' },
		{
			title: '试卷类型',
			dataIndex: 'paperType',
			key: 'paperType',
			customRender: ({ text }) => examStore.enumFormat(examStore.paperTypeEnum, text?.toString())
		},
		{ title: '名称', dataIndex: 'paperName', key: 'paperName' },
		{
			title: '状态',
			dataIndex: 'status',
			key: 'status'
		},
		{
			title: '做题时间',
			dataIndex: 'createTime',
			key: 'createTime',
			customRender: ({ text }) => formatDateTime(text)
		},
		{
			title: '',
			key: 'action',
			align: 'right'
		}
	]

	function formatDateTime(val) {
		if (!val) return ''
		return parseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
	}

	function search() {
		listLoading.value = true
		const params = { ...queryParam, current: queryParam.pageIndex, size: queryParam.pageSize }
		delete params.pageIndex
		delete params.pageSize
		examPaperAnswerApi
			.pageList(params)
			.then((data) => {
				const re = data
				tableData.value = re.records
				total.value = re.total
				queryParam.pageIndex = re.current
				listLoading.value = false
			})
			.catch(() => {
				listLoading.value = false
			})
	}
	function customRow(record) {
		return {
			onClick: () => itemSelect(record)
		}
	}

	function itemSelect(record) {
		Object.assign(selectItem, record)
	}

	function statusTagFormatter(status) {
		return examStore.enumFormat(examStore.exam.examPaperAnswer.statusTag, status)
	}
	function statusTextFormatter(status) {
		return examStore.enumFormat(examStore.exam.examPaperAnswer.statusEnum, status)
	}

	function onPageChange(page, pageSize) {
		queryParam.pageIndex = page
		queryParam.pageSize = pageSize
		search()
	}
	function onPageSizeChange(current, size) {
		queryParam.pageIndex = 1
		queryParam.pageSize = size
		search()
	}
	const handleSearch = () => {
		queryParam.pageIndex = 1
		search()
	}

	onMounted(() => {
		search()
	})
</script>

<style lang="less" scoped>
	.app-contain {
		// 可根据需要自定义样式
	}
	.record-answer-info {
		margin-top: 20px;
	}
</style>
