<template>
	<a-card>
		<a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
			<template #renderItem="{ item }">
				<a-list-item key="item.title">
					<a-list-item-meta @click="jump(item)" style="cursor: pointer;">
						<template #title>{{ item.courseName }}</template>
						<template #description>
							<div v-html="item.courseDesc"></div>
						</template>
					</a-list-item-meta>
					<div class="flc">
						<div>院系名称：{{ item.collegeAllIdName }}</div>
						<div class="ml-4">老师姓名：{{ item.teacherIdName }}</div>
						<div class="ml-4">观看次数：{{ item.viewCount }}</div>
						<div class="ml-4">课时数量：{{ item.hourCount }}</div>
					</div>
				</a-list-item>
			</template>
		</a-list>
	</a-card>
</template>
<script setup>
	import classCentre from '@/api/student/classCentre'
	import { useRoute, useRouter } from 'vue-router'
	const router = useRouter()
	const listData = ref([])
	const pagination = ref({
		current: 1,
		onChange: (page) => {
			pagination.value.current = page
			getList(page)
		},
		pageSize: 10
	})
	const getList = () => {
		classCentre
			.classCollectList({
				current:pagination.value.current,
				size: pagination.value.pageSize
			})
			.then((data) => {
				listData.value = data.records
				pagination.value.total = data.total
			})
	}
	const jump = (t) => {
		router.push({
			path: '/student/classCentre',
			query: {
				id: t.courseId
			}
		})
	}
	onMounted(() => {
		getList()
	})
</script>
<style scoped>
	.index-message-list {
		overflow: auto;
	}
	.flc {
		display: flex;
		justify-content: space-between;
	}
</style>
