<template>
	<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">任务中心</h3>
			<a-spin :spinning="taskLoading">
				<a-collapse v-if="taskList.length !== 0" accordion>
					<a-collapse-panel v-for="taskItem in taskList" :key="taskItem.id" :header="taskItem.title">
						<a-table
							:dataSource="taskItem.paperItems"
							:columns="taskColumns"
							:pagination="false"
							rowKey="examPaperId"
							size="small"
						>
							<template #bodyCell="{ column, record }">
								<template v-if="column.key === 'examPaperName'">
									{{ record.examPaperName }}
								</template>
								<template v-else-if="column.key === 'status'">
									<a-tag v-if="record.status !== null" :color="statusTagFormatter(record.status)" size="small">
										{{ statusTextFormatter(record.status) }}
									</a-tag>
								</template>
								<template v-else-if="column.key === 'action'">
									<router-link
										v-if="record.status === null"
										:to="{ path: '/student/do', query: { id: record.examPaperId } }"
										target="_blank"
									>
										<a-button type="link" size="small">开始答题</a-button>
									</router-link>
									<router-link
										v-else-if="record.status === 1"
										:to="{ path: '/student/edit', query: { id: record.examPaperAnswerId } }"
										target="_blank"
									>
										<a-button type="link" size="small">批改试卷</a-button>
									</router-link>
									<router-link
										v-else-if="record.status === 2"
										:to="{ path: '/student/read', query: { id: record.examPaperAnswerId } }"
										target="_blank"
									>
										<a-button type="link" size="small">查看试卷</a-button>
									</router-link>
								</template>
							</template>
						</a-table>
					</a-collapse-panel>
				</a-collapse>
				<div v-else style="color: #999; padding: 16px 0">暂无任务</div>
			</a-spin>
		</div>
		<!-- 任务中心结束 -->
		<a-spin :spinning="listLoading">
			<a-tabs tab-position="left" v-model:activeKey="tabId" @change="subjectChange" class="subject-tabs">
				<a-tab-pane v-for="item in subjectList" :key="item.id" :tab="item.name">
					<div class="paper-type-radio">
						<a-radio-group v-model:value="queryParam.paperType" @change="paperTypeChange" size="small">
							<a-radio v-for="type in paperTypeEnum" :key="type.key" :value="type.key">
								{{ type.value }}
							</a-radio>
						</a-radio-group>
					</div>
					<a-table :dataSource="tableData" :columns="columns" :pagination="false" rowKey="id" bordered size="middle">
						<template #bodyCell="{ column, record }">
							<template v-if="column.key === 'action'">
								<router-link :to="{ path: '/student/do', query: { id: record.id } }" target="_blank">
									<a-button type="link" size="small">开始答题</a-button>
								</router-link>
							</template>
						</template>
					</a-table>
					<a-pagination
						v-if="total > 0"
						:total="total"
						:current="queryParam.pageIndex"
						:pageSize="queryParam.pageSize"
						@change="onPageChange"
						@showSizeChange="onPageSizeChange"
						:showSizeChanger="true"
						:pageSizeOptions="['10', '20', '50', '100']"
						style="margin-top: 20px"
					/>
				</a-tab-pane>
			</a-tabs>
		</a-spin>
	</div>
</template>

<script setup>
	import { ref, reactive, onMounted, computed } from 'vue'
	import { useExamStore } from '@/store/exam'
	import examPaperApi from '@/api/student/examPaper'
	import taskApi from '@/api/student/examPaper'

	// store
	const examStore = useExamStore()
	const paperTypeEnum = computed(() => examStore.paperTypeEnum.filter((item) => item.key !== 6))

	// 任务中心相关
	const taskList = ref([])
	const taskLoading = ref(false)
	const taskColumns = [
		{ title: '试卷名称', dataIndex: 'examPaperName', key: 'examPaperName' },
		{ title: '状态', dataIndex: 'status', key: 'status', width: 90 },
		{ title: '操作', key: 'action', align: 'right', width: 120 }
	]

	const statusTextFormatter = (status) => {
		if (status === null) return '未作答'
		if (status === 1) return '待批改'
		if (status === 2) return '已批改'
		return ''
	}
	const statusTagFormatter = (status) => {
		if (status === 1) return 'orange'
		if (status === 2) return 'green'
		return 'default'
	}
	const getTaskList = async () => {
		taskLoading.value = true
		try {
			const res = await taskApi.task()
			taskList.value = res || []
		} catch (e) {
			taskList.value = []
		}
		taskLoading.value = false
	}

	// data
	const queryParam = reactive({
		paperType: 1,
		subjectId: 0,
		pageIndex: 1,
		pageSize: 10
	})
	const tabId = ref('')
	const listLoading = ref(true)
	const subjectList = ref([])
	const tableData = ref([])
	const total = ref(0)
	const columns = [
		{ title: '序号', dataIndex: 'id', key: 'id', width: 90 },
		{ title: '名称', dataIndex: 'name', key: 'name' },
		{ title: '操作', key: 'action', align: 'right' }
	]

	// methods
	const initSubject = async () => {
		listLoading.value = true
		await examStore.initSubject()
		subjectList.value = examStore.subjects
		if (subjectList.value.length > 0) {
			const subjectId = subjectList.value[0].id
			queryParam.subjectId = subjectId
			tabId.value = subjectId.toString()
			await search()
		}
		listLoading.value = false
	}

	const search = async () => {
		listLoading.value = true
		const params = {
			...queryParam,
			current: queryParam.pageIndex,
			size: queryParam.pageSize
		}
		delete params.pageIndex
		delete params.pageSize
		const res = await examPaperApi.pageList(params)
		const re = res
		tableData.value = re.records
		total.value = re.total
		queryParam.pageIndex = re.current
		listLoading.value = false
	}

	const paperTypeChange = () => {
		queryParam.pageIndex = 1
		search()
	}

	const subjectChange = (key) => {
		queryParam.subjectId = Number(key)
		queryParam.pageIndex = 1
		search()
	}

	const onPageChange = (page, pageSize) => {
		queryParam.pageIndex = page
		queryParam.pageSize = pageSize
		search()
	}

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

	// lifecycle
	onMounted(() => {
		getTaskList()
		initSubject()
	})
</script>

<style lang="less" scoped>
	.paper-list {
		margin-top: 10px;
		.task-center {
			margin-bottom: 24px;
		}
		.subject-tabs {
			.ant-tabs-nav {
				margin-right: 20px;
			}
		}
		.paper-type-radio {
			float: right;
			margin-bottom: 10px;
		}
	}
</style>
