<template>
	<a-card>
		<div class="paper-list">
			<!-- 任务中心开始 -->
			<div class="task-center" style="margin-bottom: 24px">
				<h3 style="border-left: solid 4px #3651d4; padding-left: 8px; margin-bottom: 12px; font-size: 18px">
					<div v-if="examType == 1">考试</div>
					<div v-if="examType == 2">章节测验</div>
					<div v-if="examType == 3">调查问卷</div>
					<div v-if="examType == 4">我的作业</div>
				</h3>
				<a-spin :spinning="taskLoading">
					<a-table
						v-if="taskList.length !== 0"
						:dataSource="taskList"
						:columns="taskColumns"
						:pagination="false"
						rowKey="id"
						size="middle"
					>
						<template #bodyCell="{ column, record }">
							<template v-if="column.key === 'examName'">
								{{ record.examName }}
							</template>
							<template v-else-if="column.key === 'examType'">
								{{ examTypeName(record.examType) }}
							</template>
							<template v-else-if="column.key === 'startTime'">
								{{ record.startTime }}
							</template>
							<template v-else-if="column.key === 'endTime'">
								{{ record.endTime }}
							</template>
							<template v-else-if="column.key === 'examStatus'">
								<a-tag :color="statusTagFormatter(record.examStatus)" size="small">
									{{ statusTextFormatter(record.examStatus) }}
								</a-tag>
							</template>
							<template v-else-if="column.key === 'action'">
								<router-link
									v-if="record.examStatus === 0"
									:to="{ path: '/student/do', query: { id: record.paperId } }"
									target="_blank"
								>
									<a-button type="link" size="small">查看问卷</a-button>
								</router-link>
								<router-link
									v-else-if="record.examStatus === 1"
									:to="{ path: '/student/do', query: { id: record.paperId } }"
									target="_blank"
								>
									<a-button type="link" size="small">填写问卷</a-button>
								</router-link>
								<router-link
									v-else-if="record.examStatus === 2"
									:to="{ path: '/student/read', query: { id: record.paperId } }"
									target="_blank"
								>
									<a-button type="link" size="small">查看结果</a-button>
								</router-link>
							</template>
						</template>
					</a-table>
					<div v-else style="color: #999; padding: 16px 0">暂无任务</div>
				</a-spin>
			</div>
		</div>
	</a-card>
</template>

<script setup>
	import { useExamStore } from '@/store/exam'
	import examPaperApi from '@/api/student/examPaper'
	import taskApi from '@/api/student/examPaper'
	import { useRoute } from 'vue-router'
	import tool from '@/utils/tool'
	const examNameOption = tool.dictList('EXAM_TYPE')
	const route = useRoute()
	const examTypeName = computed(() => {
		return (id) => {
			return examNameOption.filter((r) => r.value == id)[0].label
		}
	})

	// 任务中心相关
	const taskList = ref([])
	const taskLoading = ref(false)
	const taskColumns = [
		{ title: '问卷名称', dataIndex: 'examName', key: 'examName' },
		{ title: '问卷类型', dataIndex: 'examType', key: 'examType', width: 120 },
		{ title: '开始时间', dataIndex: 'startTime', key: 'startTime', width: 180 },
		{ title: '结束时间', dataIndex: 'endTime', key: 'endTime', width: 180 },
		{ title: '状态', dataIndex: 'examStatus', key: 'examStatus', width: 90 },
		{ title: '操作', key: 'action', align: 'right', width: 120 }
	]

	const statusTextFormatter = (status) => {
		if (status === 0) return '未开始'
		if (status === 1) return '已开始'
		if (status === 2) return '已结束'
		return ''
	}
	const statusTagFormatter = (status) => {
		if (status === 0) return 'blue'
		if (status === 1) return 'green'
		if (status === 2) return 'gray'
		return 'default'
	}
	const getTaskList = async () => {
		taskLoading.value = true
		try {
			let res = []
			if (examType.value == 4) {
				const params = {
					current: 1,
					size: 999999,
					examType: examType.value,
					paperType: '2'
				}
				res = await examPaperApi.pageList(params)
			} else {
				res = await taskApi.pageExamList({
					current: 1,
					size: 10,
					examType: examType.value,
					courseId: route.query.id
				})
			}

			taskList.value = res?.records || []
		} catch (e) {
			taskList.value = []
		}
		taskLoading.value = false
	}

	// lifecycle
	const examType = ref()
	onMounted(() => {
		examType.value = route.params && route.params.examType
		getTaskList()
	})
</script>

<style lang="less" scoped>
	.paper-list {
		margin-top: 10px;
		.task-center {
			margin-bottom: 24px;
		}
	}
</style>
