<template>
	<a-card>
		<a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
			<template #renderItem="{ item }">
				<a-list-item>
					<a-list-item-meta :description="item.chapterName">
						<template #title>
							<div @click="jumpDetail(item)" style="cursor: pointer">{{ item.courseName }}</div>
						</template>
					</a-list-item-meta>
					{{ item.fileName }}
				</a-list-item>
			</template>
		</a-list>
	</a-card>
</template>
<script setup>
	import classCentre from '@/api/student/classCentre'
	import { useRouter, useRoute } from 'vue-router'
	const router = useRouter()
	const listData = ref([])
	const pagination = ref({
		current: 1,
		onChange: (page,size) => {
			pagination.value.current = page
			pagination.value.pageSize = size
			getList()
		},
		pageSize: 10
	})
	const getList = () => {
		classCentre
			.footprintClassList({
				current:pagination.value.current,
				size: pagination.value.pageSize
			})
			.then((data) => {
				listData.value = data.records
				pagination.value.total = data.total
			})
	}
	onMounted(() => {
		getList()
	})
	const jumpDetail = (item) => {
		router.push({
			path: '/student/classCentre',
			query: {
				id: item.courseId
			}
		})
	}
</script>
<style scoped>
	.index-message-list {
		overflow: auto;
	}
</style>
