<template>
	<div class="dashboard-container">
		<!-- 页面标题 -->
		<!-- <a-row type="flex" justify="end" align="middle" style="margin-bottom: 20px"> -->
		<a-row type="flex" justify="space-between" align="middle" style="margin-bottom: 20px">
			<a-col>
				<span style="font-size: 16px; font-weight: bold">课堂实录</span>
			</a-col>
			<a-col>
				<a-input-search
					v-model:value="searchValue"
					placeholder="请输入课程名称"
					style="width: 300px"
					@search="handleSearch"
				>
					<template #enterButton>
						<a-button type="primary">搜索</a-button>
					</template>
				</a-input-search>
			</a-col>
		</a-row>

		<!-- 表格内容 -->
		<a-table :columns="columns" :data-source="dataSource" :pagination="false">
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'courseName'">
					{{ record.courseName }}
				</template>
				<template v-else-if="column.dataIndex === 'teacherName'">
					{{ record.teacherName }}
				</template>
				<template v-else-if="column.dataIndex === 'organization'">
					{{ record.organization }}
				</template>
				<template v-else-if="column.dataIndex === 'courseLevel'">
					{{ record.courseLevel }}
				</template>
				<template v-else-if="column.dataIndex === 'videoCount'">
					{{ record.videoCount }}
				</template>
			</template>
		</a-table>
	</div>
</template>

  <script setup>
import { ref } from 'vue'

// 表格列配置
const columns = [
	{
		title: '课程名称',
		dataIndex: 'courseName',
		key: 'courseName'
	},
	{
		title: '教师名称',
		dataIndex: 'teacherName',
		key: 'teacherName'
	},
	{
		title: '所属组织',
		dataIndex: 'organization',
		key: 'organization'
	},
	{
		title: '课程层次',
		dataIndex: 'courseLevel',
		key: 'courseLevel'
	},
	{
		title: '视频数量',
		dataIndex: 'videoCount',
		key: 'videoCount'
	}
]

// 表格数据源
const dataSource = ref([])

// 搜索框值
const searchValue = ref('')

// 搜索处理函数
const handleSearch = (value) => {
	console.log('搜索:', value)
	// 这里可以添加实际的搜索逻辑
}
</script>

  <style scoped>
.dashboard-container {
	padding: 20px;
}

/* 自定义样式 */
</style>
