<template>
	<div style="padding: 20px;  background: white">
		<div class="list-header">
			<div style="display: flex">
				<div style="display: flex; justify-content: center; align-items: center">
					<a-image :src="Frame350" style="width: 20px; height: 20px"></a-image>
					<span style="font-weight: bold; font-size: 20px; margin-left: 10px">共计 {{ total }} 个资源</span>
				</div>
				<div style="width: 20px"></div>
				<TabSwitcher @selectTab="selectTab"/>
			</div>
			<div>
				<a-range-picker
					v-model:value="currentPage.date"
					@calendarChange="calendarChange"
					style="margin-right: 12px; width: 240px"
				/>
				<a-input-search
					v-model:value="currentPage.queryInfo"
					placeholder="请输入资源关键词"
					style="width: 200px"
					@search="onSearch"
				/>
			</div>

		</div>
		<a-spin :spinning="loading" tip="">
			<a-row :gutter="[16, 16]">
				<a-col :span="8" v-for="(item, index) in resources" :key="index">
					<div class="myItem"
						 @click="handleItem(item)">
						<div style="display: flex; position: relative">
							<div
								class="resource"

								:style="{
									backgroundSize: 'cover',
									backgroundPosition: 'center',
									backgroundImage:
										'url(' +
										(item.coverImagePath != '' && sysConfig.FILE_URL + item.coverImagePath
											? sysConfig.FILE_URL + item.coverImagePath
											: '') +
										')'
								}"
							>
								<!-- <a-image
                                    style="width: 100%; height: 100%"
                                    :src="
                                        item.coverImagePath != '' && sysConfig.FILE_URL + item.coverImagePath
                                            ? sysConfig.FILE_URL + item.coverImagePath
                                            : ''
                                    "
                                    alt=""
                                    :preview="false"
                                ></a-image> -->
								<PlayCircleOutlined
									:style="{ fontSize: '40px', color: 'white' }"
									style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)"
								/>
							</div>
						</div>
						<div style="display: flex; flex-direction: column; padding: 10px 20px">
							<a-tooltip>
								<template #title>{{ item.fileName }}</template>
								<span style="font-size: 15px; font-weight: bold">{{
										tool.truncateString(item.fileName, 18)
									}}</span>
							</a-tooltip>
							<span style="font-size: 12px; margin-top: 10px"> {{ item.collegeIdName }}</span>
							<span style="font-size: 12px; margin-top: 10px">{{ item.majorIdName }}</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">{{ item.uploadTime }}</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>
		</a-spin>
		<div style="height: 20px"></div>
		<div style="display: flex; width: 100%; align-items: center; justify-content: center">
			<a-pagination
				v-model:current="currentPage.current"
				v-model:pageSize="currentPage.size"
				:page-size-options="pageSizeOptions"
				:total="total"
				@change="onChange"
				:show-size-changer="true"
				:show-quick-jumper="true"
			/>
		</div>
		<div style="height: 100px; display: flex; justify-content:  center; align-items: center">
			<span style="display: block;  color: #7f8c8d">——已经到底了——</span>
		</div>
	</div>
</template>

<script setup>
import {ref} from 'vue'
import Frame350 from '@/assets/images/Frame350.png'
import TabSwitcher from './TabSwitcher.vue'
import {list} from '@/api/portal'
import tool from '@/utils/tool'
import EventBus from '@/utils/EventBus'
import sysConfig from '@/config/index'

const queryData = ref({})
const total = ref(0)
const loading = ref(false)
const tabKey = ref(0)
const pageSizeOptions = ref(['12', '24', '36', '48', '60']);
const tabKeyName = ref('')
const dateName = ref([])
const currentPage = reactive({
	current: 1,
	size: 12,
	queryInfo: '',
	date: undefined,
	startTime: undefined,
	endTime: undefined,
	sortflag: tabKey
})
const searchKeyword = ref('')
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 calendarChange = (dates, dateStrings, info) => {
	console.log('修改时间', ' dates ', dates, ' dateStrings ', dateStrings, ' info ', info)
	// currentPage.date = dateStrings
	// if(dateStrings[0] == '' && dateStrings[1] == ''){
	//
	// }
	dateName.value = dateStrings
	selectTab(tabKeyName.value)
}
const selectTab = (key) => {
	console.log('现在是点了tab', key)
	tabKeyName.value = key
	if (key == 'latest') {
		tabKey.value = 0
	} else {
		tabKey.value = 1
	}
	console.log('有没有', ' currentPage.date ', currentPage.date,)
	if (dateName.value[0] == '' && dateName.value[1] == '') {
		dateName.value = []
		currentPage.startTime = undefined
		currentPage.endTime = undefined
	} else {
		currentPage.startTime = dateName.value[0]
		currentPage.endTime = dateName.value[1]
		dateName.value = []
	}
	currentPage.date = undefined
	currentPage.sortflag = tabKey.value
	currentPage.current = 1
	currentPage.size = 12
	getList()
}
const handleItem = (item) => {
	console.log('点了看教材的条目了', item)

	EventBus.emit('openResourceDetails', {id: item.id})
}
const onSearch = (value) => {
	console.log('搜索了', value)
	currentPage.current = 1
	currentPage.size = 12
	getList()
}
const scrollToTop = () => {
	window.scrollTo({
		top: 0,
		behavior: 'smooth'
	});
};
const onChange = (page, pageSize) => {
	console.log('翻页', page, pageSize)
	getList()
	scrollToTop()

}

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

const getList = () => {
	loading.value = true

	let json = JSON.parse(JSON.stringify(currentPage))
	json.date = undefined
	list({...json, ...queryData.value})
		.then((res) => {
			console.log('下面列表获取', res)
			if (res.code == 200) {
				resources.value = res.data.records
				total.value = res.data.total
				currentPage.current = res.data.current
			}
			loading.value = false
		})
		.catch((err) => {
			console.log(err)
			loading.value = false
		})
}

const upLoadList = (data) => {
	currentPage.current = 1
	currentPage.size = 12
	queryData.value = data
	loading.value = true
	let json = JSON.parse(JSON.stringify(currentPage))
	json.date = undefined
	list({...json, ...queryData.value})
		.then((res) => {
			// console.log('外面控制的刷新列表', res)
			if (res.code == 200) {
				resources.value = res.data.records
				total.value = res.data.total
				currentPage.current = res.data.current
			}
			loading.value = false
		})
		.catch((err) => {
			console.log(err)
			loading.value = false
		})
}
onMounted(() => {
	getList()
})
EventBus.off('upLoadList', upLoadList)
EventBus.on('upLoadList', upLoadList)
</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;
}
.myItem{
	border-radius: 10px 10px 5px 5px; border: 0.1px solid #dcdcdc55; cursor: pointer
}
.myItem:hover {
	transform: translateY(-0px);
	box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}
.resource {
	width: 100%;
	height: 200px;
	background: #00000011;
	border-radius: 10px 10px 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.resource::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	transition: background-color 0.6s ease;
	z-index: 1;
}

.resource:hover::before {
	background-color: rgba(0, 0, 0, 0.4); /* 悬停变暗 */
}

/* 图标或其他内容要放在最上层 */
.resource > * {
	position: relative;
	z-index: 2;
}

/* .resource:hover {
	background-color: #ffffff8c;
} */
</style>
