<template>
	<div class="resource-list">
		<div class="list-header">
			<div style="display: flex">
				<div style="display: flex; justify-content: center; align-items: center">
					<div class="line"></div>
					<span style="font-weight: bold">共计 {{ total }} 个资源</span>
				</div>
				<div style="width: 20px"></div>
				<TabSwitcher @selectTab="selectTab" />
			</div>

			<a-input-search placeholder="输入资源关键词" style="width: 200px" @search="onSearch" />
		</div>
		<a-row :gutter="[16, 16]">
			<a-col :span="8" v-for="(item, index) in resources" :key="index">
				<div style="border-radius: 10px 10px 5px 5px; border: 1px solid #dcdcdc">
					<div style="display: flex">
						<div class="resource" @click="handleItem(item)">
							<PlayCircleOutlined :style="{ fontSize: '40px', color: 'white' }" />
						</div>
					</div>
					<div style="display: flex; flex-direction: column; padding: 5px 10px">
						<span style="font-size: 16px; font-weight: bold">{{ item.courseName }}</span>
						<span style="font-size: 12px">{{ item.description }}</span>
						<span style="font-size: 12px">{{ item.name }}</span>
						<div style="display: flex; justify-content: space-between">
							<div style="display: flex; justify-content: center; align-items: center">
								<FieldTimeOutlined />
								<div style="width: 5px"></div>
								<span style="font-size: 12px">{{ tool.formatTimestamp(item.publishTime) }}</span>
							</div>

							<div style="display: flex; justify-content: center; align-items: center">
								<EyeOutlined />
								<div style="width: 5px"></div>
								<span style="font-size: 12px">{{ item.viewCount }}</span>
							</div>
						</div>
					</div>

					<!-- <a-card-meta :title="item.title">
						<template #description>
							<p>{{ item.description }}</p>
						</template>
					</a-card-meta> -->
				</div>
			</a-col>
		</a-row>

		<div style="height: 20px"></div>
		<div style="display: flex; width: 100%; align-items: center; justify-content: center">
			<a-pagination v-model:current="currentPage.current" :total="total" @change="onChange" show-size-changer />
		</div>
		<div style="height: 20px"></div>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import TabSwitcher from './TabSwitcher.vue'
	import { list } from '@/api/portal'
	import tool from '@/utils/tool'
	const total = ref(1024)
	const tabKey = ref('new')
	const currentPage = reactive({
		current: 1,
		size: 10
	})
	const resources = ref([
		// { id: 1, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 2, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 3, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 4, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 5, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 6, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 7, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 8, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 9, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 10, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 11, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 },
		// { id: 12, title: '学术交流英语', description: '来源学校', name: '姓名', time: '05-22 10:49', look: 10000 }
		// 更多数据...
	])

	const selectTab = (key) => {
		console.log('现在是点了tab', key)
	}
	const handleItem = (item) => {
		console.log('点了看教材的条目了', item)
	}
	const onSearch = (value) => {
		console.log('搜索了', value)
	}
	const onChange = (page, pageSize) => {
		console.log('翻页', page, pageSize)
		getList()
	}

	// watch(currentPage.value.current, (newValue) => {
	// 	console.log('变化了', newValue)
	// 	// getList()
	// })

	const getList = () => {
		list(currentPage)
			.then((res) => {
				console.log('下面列表获取', res)
				if (res.code == 200) {
					resources.value = res.data.records
					total.value = res.data.total
					currentPage.current = res.data.current
					// "size": 20,
					//                 "current": 1,
					//   "pages": 1
				}

				// {
				//     "code": 200,
				//     "msg": "操作成功",
				//     "data": {
				//         "records": [
				//             {
				//                 "publishTime": 1750820852119,
				//                 "courseName": "转手绢",
				//                 "collegeIdName": "二人转研究学院",
				//                 "teacherId": "1936984714123436034",
				//                 "coverImageId": "1936957954687279104",
				//                 "collegeId": "1",
				//                 "timeLimitType": "0",
				//                 "viewCount": 0,
				//                 "courseId": "1937091089341124610",
				//                 "teacherIdName": "老师"
				//             },
				//             {
				//                 "publishTime": 1750820875604,
				//                 "courseName": "胸口碎大石",
				//                 "collegeIdName": "二人转研究学院",
				//                 "teacherId": "1936984714123436034",
				//                 "coverImageId": "1937056330116354050",
				//                 "coverImagePath": "http://localhost:9003/api/webapp/dev/file/download?id=1937056330116354050",
				//                 "collegeId": "1",
				//                 "timeLimitType": "0",
				//                 "viewCount": 10000,
				//                 "courseId": "1937326992873689089",
				//                 "teacherIdName": "老师"
				//             }
				//         ],
				//         "total": 2,
				//         "size": 20,
				//         "current": 1,
				//         "orders": [],
				//         "optimizeCountSql": true,
				//         "searchCount": true,
				//         "maxLimit": null,
				//         "countId": null,
				//         "pages": 1
				//     }
				// }
			})
			.catch((err) => {
				console.log(err)
			})
	}

	onMounted(() => {
		getList()
	})
</script>

<style scoped>
	.list-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	.line {
		width: 6px;
		height: 15px;
		background-color: rgb(0, 140, 255);
		margin-right: 5px;
	}

	.resource {
		width: 100%;
		height: 150px;
		background: #00000011;
		border-radius: 10px 10px 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
	.resource:hover {
		background: #0000008c;
	}
</style>
