<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-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'">
							{{ 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>
		<!-- 任务中心结束 -->
		<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: '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 {
			const res = await taskApi.pageExamList({
				current: 1,
				size: 10
			})
			console.log('res', res)
			taskList.value = res?.records || []
		} 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>
