<template>
	<div class="p-6">
		<div class="bg-white rounded-lg shadow-sm">
			<!-- 页面标题 -->
			<div class="p-4 border-b border-gray-200">
				<h2 class="text-lg font-semibold text-gray-800">历史开课统计</h2>
			</div>

			<!-- 搜索区域 -->
			<!-- <div class="p-4 bg-gray-50">
				<a-form layout="inline" :model="searchForm" @finish="handleSearch">
					<a-form-item label="课程名称">
						<a-input
							v-model:value="searchForm.courseName"
							placeholder="请输入课程名称"
							allow-clear
							style="width: 200px"
						/>
					</a-form-item>
					<a-form-item>
						<a-button type="primary" html-type="submit" :loading="loading">
							<template #icon><SearchOutlined /></template>
							搜索
						</a-button>
						<a-button @click="handleReset" class="ml-2"> 重置 </a-button>
					</a-form-item>
				</a-form>
			</div> -->

			<!-- 数据表格 -->
			<div class="p-4">
				<a-table
					:columns="columns"
					:data-source="dataSource"
					:loading="loading"
					:pagination="pagination"
					@change="handleTableChange"
					row-key="courseId"
					size="middle"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="column.key === 'courseName'">
							<span class="text-blue-600 font-medium">{{ record.courseName }}</span>
						</template>
						<template v-if="column.key === 'courseOpenCount'">
							<a-tag color="blue" class="text-center min-w-[60px]"> {{ record.courseOpenCount }}次 </a-tag>
						</template>
						<template v-if="column.key === 'videoCount'">
							<a-tag color="green" class="text-center min-w-[60px]"> {{ record.videoCount }}个 </a-tag>
						</template>
						<template v-if="column.key === 'teachMaterialsCount'">
							<a-tag color="orange" class="text-center min-w-[60px]"> {{ record.teachMaterialsCount }}份 </a-tag>
						</template>
					</template>
				</a-table>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue'
	import { message } from 'ant-design-vue'
	import { SearchOutlined } from '@ant-design/icons-vue'
	import { historyProgressPage } from '@/api/statisticalAnalysis/statisticsHistoryCourseOfferings'

	// 响应式数据
	const loading = ref(false)
	const dataSource = ref([])

	// 搜索表单
	const searchForm = reactive({
		courseName: ''
	})

	// 分页配置
	const pagination = reactive({
		current: 1,
		pageSize: 10,
		total: 0,
		showSizeChanger: true,
		showQuickJumper: true,
		showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条数据`
	})

	// 表格列配置
	const columns = [
		{
			title: '序号',
			key: 'index',
			width: 80,
			align: 'center',
			customRender: ({ index }) => pagination.current * pagination.pageSize - pagination.pageSize + index + 1
		},
		{
			title: '课程名称',
			dataIndex: 'courseName',
			key: 'courseName',
			ellipsis: true,
			width: 200
		},
		{
			title: '历史开课数',
			dataIndex: 'courseOpenCount',
			key: 'courseOpenCount',
			align: 'center',
			width: 120,
			sorter: false
		},
		{
			title: '视频数量',
			dataIndex: 'videoCount',
			key: 'videoCount',
			align: 'center',
			width: 120,
			sorter: false
		},
		{
			title: '讲义数量',
			dataIndex: 'teachMaterialsCount',
			key: 'teachMaterialsCount',
			align: 'center',
			width: 120,
			sorter: false
		}
	]

	// 获取数据
	const fetchData = async () => {
		try {
			loading.value = true
			const params = {
				current: pagination.current,
				size: pagination.pageSize
				// ...searchForm
			}

			const response = await historyProgressPage(params)
			if (response) {
				dataSource.value = response.records || []
				pagination.total = response.total || 0
			} else {
				message.error(response.message || '获取数据失败')
			}
		} catch (error) {
			console.error('获取历史开课统计数据失败:', error)
			message.error('获取数据失败，请稍后重试')
		} finally {
			loading.value = false
		}
	}

	// 搜索处理
	const handleSearch = () => {
		pagination.current = 1
		fetchData()
	}

	// 重置搜索
	const handleReset = () => {
		Object.keys(searchForm).forEach((key) => {
			searchForm[key] = ''
		})
		pagination.current = 1
		fetchData()
	}

	// 表格变化处理（分页、排序等）
	const handleTableChange = (pag, filters, sorter) => {
		pagination.current = pag.current
		pagination.pageSize = pag.pageSize
		fetchData()
	}

	// 组件挂载时获取数据
	onMounted(() => {
		fetchData()
	})
</script>

<style scoped>
	.ant-table-tbody > tr > td {
		padding: 12px 16px;
	}

	.ant-tag {
		margin: 0;
		border-radius: 4px;
		font-weight: 500;
	}
</style>
