<template>
	<div class="section-list">
		<div v-for="section in pagedSections" :key="section.id" class="section-block">
			<div class="section-title">{{ section.name }}</div>
			<div v-if="section.classHours && section.classHours.length > 0">
				<div v-for="lesson in section.classHours" :key="lesson.id" class="lesson-row">
					<div class="lesson-cover">
						<a-avatar shape="square" :size="48" icon="play-circle" />
					</div>
					<div class="lesson-info">
						<div class="lesson-title">{{ lesson.name }}</div>
						<div class="lesson-meta">
							<span>创建时间：{{ lesson.createTime }}</span>
							<span>创建人：{{ lesson.createUserName }}</span>
						</div>
					</div>
				</div>
			</div>
			<div v-else class="no-lessons">
				<a-empty description="暂无课时" />
			</div>
		</div>
		<!-- 分页 -->
		<div class="pagination-box">
			<a-pagination
				:current="currentPage"
				:page-size="pageSize"
				:total="sectionsLength"
				@change="$emit('page-change', $event)"
				show-quick-jumper
				:show-total="(total) => `共${total}章`"
			/>
			<a-select
				v-model:value="localPageSize"
				style="width: 100px; margin-left: 16px"
				@change="emits('page-size-change', $event)"
			>
				<a-select-option :value="5">5/页</a-select-option>
				<a-select-option :value="10">10/页</a-select-option>
			</a-select>
		</div>
	</div>
</template>

<script setup>
	import { defineProps, ref, watch } from 'vue'
	import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
	const props = defineProps({
		pagedSections: Array,
		currentPage: Number,
		pageSize: Number,
		sectionsLength: Number
	})
	const emits = defineEmits(['edit-lesson', 'delete-lesson', 'page-change', 'page-size-change'])

	const localPageSize = ref(props.pageSize)
	watch(
		() => props.pageSize,
		(newVal) => {
			localPageSize.value = newVal
		}
	)
</script>

<style scoped>
	.section-list {
		width: 1200px;
		margin: 0 auto;
		background: #fff;
		border-radius: 0 0 12px 12px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
		padding: 1px 32px 32px 32px;
		height: calc(100vh - 400px);
		overflow: auto;
	}
	.section-block {
		margin-top: 32px;
	}
	.section-title {
		font-size: 16px;
		font-weight: 600;
		color: #222;
		margin-bottom: 18px;
	}
	.lesson-row {
		display: flex;
		align-items: center;
		background: #f7f8fa;
		border-radius: 8px;
		margin-bottom: 16px;
		padding: 16px 24px;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.03);
		transition: box-shadow 0.2s;
	}
	.lesson-row:hover {
		box-shadow: 0 4px 16px 0 rgba(52, 122, 255, 0.08);
		background: #f0f6ff;
	}
	.lesson-cover {
		margin-right: 20px;
	}
	.lesson-cover .ant-avatar {
		background: #e6e9ef;
		font-size: 24px;
	}
	.lesson-info {
		flex: 1;
	}
	.lesson-title {
		font-size: 15px;
		font-weight: 500;
		color: #222;
		margin-bottom: 6px;
	}
	.lesson-meta {
		font-size: 13px;
		color: #888;
	}
	.lesson-meta span {
		margin-right: 18px;
	}
	.lesson-actions {
		display: flex;
		align-items: center;
	}
	.action-icon {
		font-size: 18px;
		color: #347aff;
		margin-left: 18px;
		cursor: pointer;
		transition: color 0.2s;
	}
	.action-icon:hover {
		color: #1d5fd6;
	}
	.pagination-box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 32px;
	}
	.pagination-box .ant-pagination {
		margin-right: 16px;
	}
	.pagination-box .ant-select {
		min-width: 90px;
	}
	.no-lessons {
		padding: 40px 0;
		text-align: center;
	}
</style>
