<template>
	<div class="wrap">
		<div class="main-header">
			<div class="search-box">

				<el-input placeholder="搜索智库报告" v-model="searchReport" style="width: 270px" />
				<div class="icon">
					<img src="./images/search-icon.png" alt="" @click="handleGetThinkDynamicsReport()" />
				</div>
			</div>
			<div>
				<div class="select-box">
					<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px">
						<el-option @click="handleGetThinkDynamicsReport()" v-for="item in yearList" :key="item.value"
							:label="item.label" :value="item.value" />
					</el-select>
					<el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px;">
						<el-option @click="handleGetThinkDynamicsReport()" :key="true" label="正序" :value="true" />
						<el-option @click="handleGetThinkDynamicsReport()" :key="false" label="倒序" :value="false" />
					</el-select>
				</div>
			</div>
		</div>
		<div class="main-content">
			<div class="left">
				<div class="select-box">
					<div class="select-box-header">
						<div class="icon"></div>
						<div class="title">{{ "报告类型" }}</div>
					</div>
					<div class="select-main">
						<div class="checkbox-group">
							<el-checkbox v-for="type in reportTypeList" :key="type.id" v-model="selectedReportTypeList"
								:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
								{{ type.typeName }}
							</el-checkbox>
						</div>
					</div>
				</div>
				<div class="select-box">
					<div class="select-box-header">
						<div class="icon"></div>
						<div class="title">{{ "研究类型" }}</div>
					</div>
					<div class="select-main">
						<div class="checkbox-group">
							<el-checkbox v-for="type in researchTypeList" :key="type.id" v-model="selectedResearchTypeList"
								:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
								{{ type.name }}
							</el-checkbox>
						</div>
					</div>
				</div>
				<div class="select-box">
					<div class="select-box-header">
						<div class="icon"></div>
						<div class="title">{{ "作者" }}</div>
					</div>
					<div class="input-main">
						<el-input placeholder="输入作者名字" v-model="author" @input="handleGetThinkDynamicsReport()" />
					</div>
				</div>
			</div>
			<div class="right">
				<div class="card-box">
					<div class="footer-card" v-for="(item, index) in curFooterList" :key="index"
						@click="handleToReportDetail(item.id)">
						<div class="footer-card-top">
							<img :src="item.imageUrl" alt="" />
						</div>
						<div class="footer-card-title">
							{{ item.name }}
						</div>
						<div class="footer-card-footer">
							<div class="time">{{ item.times }}</div>
							<div class="from">{{ item.thinkTankName }}</div>
						</div>
					</div>
				</div>
				<div class="right-footer">
					<div class="info">
						共{{ total }}篇智库报告
					</div>
					<div class="page-box">
						<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
							@current-change="handleCurrentChange" :current-page="currentPage" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
// import Img1 from "./images/img1.png";
// import Img2 from "./images/img2.png";
// import Img3 from "./images/img3.png";
// import Img4 from "./images/img4.png";
// import Img5 from "./images/img5.png";
// import Img6 from "./images/img6.png";
// import Img7 from "./images/img7.png";
// import Img8 from "./images/img8.png";
// import Img9 from "./images/img9.png";
// import Img10 from "./images/img10.png";
// import Img11 from "./images/img11.png";
// import Img12 from "./images/img12.png";
//getThinkDynamicsReport
import {
	getThinkDynamicsReportType,
	getHylyList,
	getThinkDynamicsReport
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();

const searchReport = ref('')

const handleToReportDetail = (id) => {
	const route = router.resolve({
		name: 'ReportDetail',
		params: {
			id: id
		}
	});
	window.open(route.href, "_blank");
}

const reportTypeList = ref([
	{
		id: '研究报告',
		name: '研究报告',
	},
	{
		id: '简报',
		name: '简报',
	},
	{
		id: '会议记录',
		name: '会议记录',
	},
	{
		id: '期刊文章',
		name: '期刊文章',
	},
])
const selectedReportTypeList = ref([])

const researchTypeList = ref([
	{
		id: '研究报告',
		name: '研究报告',
	},
	{
		id: '简报',
		name: '简报',
	},
	{
		id: '会议记录',
		name: '会议记录',
	},
	{
		id: '期刊文章',
		name: '期刊文章',
	},
])
const selectedResearchTypeList = ref([])

const author = ref('')  // 作者

const curFooterList = ref([
	// {
	// 	title: "中国对AI的转型产业政策",
	// 	time: "2025年6月26日",
	// 	from: "兰德科技智库",
	// 	img: Img1
	// },
	// {
	// 	title: "中美对抗、竞争和合作跨越人工智能通用领域...",
	// 	time: "2025年6月26日",
	// 	from: "兰德科技智库",
	// 	img: Img2
	// },
	// {
	// 	title: "中国、智慧城市和中东：地区和美国的选择",
	// 	time: "2025年6月26日",
	// 	from: "兰德科技智库",
	// 	img: Img3
	// },
	// {
	// 	title: "中国对AI的转型产业政策",
	// 	time: "2025年6月26日",
	// 	from: "兰德科技智库",
	// 	img: Img4
	// },
	// {
	// 	title: "中美经济竞争：复杂经济和地缘政治关系中的...",
	// 	time: "2025年6月26日",
	// 	from: "兰德科技智库",
	// 	img: Img5
	// },
	// {
	// 	title: "中国、智慧城市和中东：留给地区和美国的选择",
	// 	time: "2025年6月26日",
	// 	from: "兰德科技智库",
	// 	img: Img6
	// },
	// {
	// 	title: "中国对AI的转型产业政策",
	// 	time: "2025年6月26日",
	// 	from: "兰德科技智库",
	// 	img: Img7
	// },
	// {
	// 	title: "中美对抗、竞争和合作跨越人工智能通用领域...",
	// 	time: "2025年6月26日",
	// 	from: "",
	// 	img: Img8
	// },
	// {
	// 	title: "中国、智慧城市和中东：地区和美国的选择",
	// 	time: "2025年6月26日",
	// 	from: "兰德科技智库",
	// 	img: Img9
	// },
	// {
	// 	title: "中国对AI的转型产业政策",
	// 	time: "2025年6月26日",
	// 	from: "兰德科技智库",
	// 	img: Img10
	// },
	// {
	// 	title: "中美对抗、竞争和合作跨越人工智能通用领域...",
	// 	time: "2025年6月26日",
	// 	from: "兰德科技智库",
	// 	img: Img11
	// },
	// {
	// 	title: "中国、智慧城市和中东：地区和美国的选择",
	// 	time: "2025年6月26日",
	// 	from: "兰德科技智库",
	// 	img: Img12
	// }
]);

const yearList = ref([
	{
		label: "近一年发布",
		value: 1
	},
	{
		label: "近两年发布",
		value: 2
	},
	{
		label: "近三年发布",
		value: 3
	}
]);

const selectedYear = ref(1);
const sort = ref(true)
//获取当前时间x年前的日期
function getDateYearsAgo(years) {
	// 获取当前日期
	const currentDate = new Date();
	// 计算指定年数之前的日期
	const pastDate = new Date(currentDate.getFullYear() - years, currentDate.getMonth(), currentDate.getDate());
	// 格式化日期为 "YYYY-MM-DD" 的形式
	const year = pastDate.getFullYear();
	const month = String(pastDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
	const day = String(pastDate.getDate()).padStart(2, "0");
	return `${year}-${month}-${day}`;
}
//获取智库研究类型
const handleGetThinkDynamicsReportType = async () => {
	try {
		const res = await getThinkDynamicsReportType();
		console.log("智库研究类型信息", res);
		if (res.code === 200 && res.data) {
			reportTypeList.value = res.data
		}
	} catch (error) {
		console.error("获取研究类型error", error);
	}
};


//获取行业领域字典
// getHylyList
const handleGetHylyList = async () => {
	try {
		const res = await getHylyList();
		console.log("行业领域字典", res);
		if (res.code === 200 && res.data) {
			researchTypeList.value = res.data;
		}
	} catch (error) {
		console.error("获取行业领域字典error", error);
	}
};


const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
	handleGetThinkDynamicsReport()
};

function arrayToString(arr) {
	return arr.reduce((acc, item) => {
		if (item !== null && item !== undefined && item !== "") {
			return acc === "" ? item : acc + "," + item;
		}
		return acc;
	}, "");
}

// 获取智库动态报告
const handleGetThinkDynamicsReport = async () => {

	try {
		const parmas = {
			id: router.currentRoute._value.params.id,
			startDate: getDateYearsAgo(selectedYear.value),
			parmas: {
				searchText: searchReport.value,
				authorName: author.name,
				sortFun: sort.value,
				authorName: author.value ? author.value : null,
				currentPage: currentPage.value - 1,
				pageSize: 12,
				reportTypeIds: arrayToString(selectedReportTypeList.value) === '' ? null : arrayToString(selectedResearchTypeList.value),
				researchTypeIds: arrayToString(selectedResearchTypeList.value) === '' ? null : arrayToString(selectedResearchTypeList.value)
			}

		}
		const res = await getThinkDynamicsReport(parmas);
		console.log("智库动态报告", res);
		if (res.code === 200 && res.data) {
			curFooterList.value = res.data.content
			total.value = res.data.totalElements
		} else if (res.code === 500 && res.message === '未找到对应筛选的报告') {
			curFooterList.value = []
			total.value = 0
		}
	} catch (error) {
		console.error("获取智库动态报告error", error);
	}
};

const total = ref(0)
onMounted(async () => {
	handleGetThinkDynamicsReportType()
	handleGetHylyList()
	handleGetThinkDynamicsReport()
});

</script>

<style lang="scss" scoped>
.main-header {
	height: 64px;
	width: 1600px;
	display: flex;
	justify-content: space-between;

	.search-box {
		margin-top: 16px;
		display: flex;
		width: 300px;
		height: 32px;
		box-sizing: border-box;
		border: 1px solid rgba(230, 231, 232, 1);
		border-radius: 4px;
		background: rgba(255, 255, 255, 1);

		.icon {
			width: 16px;
			height: 16px;
			margin: 8px 7px;
			cursor: pointer;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.select-box {
		margin-top: 16px;
		margin-right: 5px;
	}
}

.main-content {
	display: flex;
	gap: 16px;

	.left {
		width: 300px;
		height: 100%;
		padding-bottom: 36px;
		box-sizing: border-box;
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
		background: rgba(255, 255, 255, 1);
		position: relative;

		.select-box {
			margin-top: 21px;

			.select-box-header {
				display: flex;
				gap: 17px;

				.icon {
					margin-top: 4px;
					width: 8px;
					height: 16px;
					background: var(--color-main-active);
					border-radius: 0 4px 4px 0;
				}

				.title {
					height: 26px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: 700;
					line-height: 26px;
					letter-spacing: 1px;
					text-align: left;
				}
			}

			.select-main {
				margin-left: 25px;
			}

			.select-main1 {
				width: 100px;
			}

			.input-main {
				margin: 10px auto;
				width: 250px;
				height: 34px;
				border-radius: 10px;
				border: 1px solid rgba(230, 231, 232, 1);
			}
		}
	}

	.right {
		width: 1284px;
		height: 1377px;

		.card-box {
			width: 1284px;
			height: 1248px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.footer-card {
				width: 418px;
				height: 300px;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				background: rgba(255, 255, 255, 1);
				transition: transform 0.3s ease, box-shadow 0.3s ease;

				&:hover {
					transform: translateY(-3px);
					box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
				}

				cursor: pointer;

				.footer-card-top {
					width: 384px;
					height: 206px;
					margin: 0 auto;
					margin-top: 15px;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.footer-card-title {
					margin: 0 auto;
					margin-top: 13px;
					width: 376px;
					height: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 18px;
					font-weight: 700;
					line-height: 24px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.footer-card-footer {
					margin: 0 auto;
					margin-top: 5px;
					width: 376px;
					height: 22px;
					display: flex;
					justify-content: space-between;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
				}
			}
		}

		.right-footer {
			margin-top: 43px;
			display: flex;
			justify-content: space-between;

			.info {
				height: 19px;
				color: rgba(132, 136, 142, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 18px;
				letter-spacing: 0px;
				text-align: left;
			}
		}
	}
}

.filter-checkbox {
	width: 180px;
}


.page {
	width: 1600px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 36px 0 0 0;
	padding-left: 11px;

	.count {
		color: rgba(59, 65, 75, 1);

		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0px;
		text-align: left;
	}

}

:deep(.el-pagination) {
	display: flex;
	align-items: center;
}

:deep(.el-pagination.is-background .el-pager li) {
	min-width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 6px;
	margin: 0 6px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background-color: #fff;
	color: rgb(95, 101, 108);
	font-size: 16px;
	font-weight: 400;
	font-family: "Microsoft YaHei";


}



:deep(.el-pagination.is-background .el-pager li.is-active) {
	background-color: #fff;
	color: rgba(22, 119, 255, 1);
	border-color: rgba(22, 119, 255, 1);

}

:deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
	border: none;
	background-color: transparent;
	color: rgb(95, 101, 108);
	min-width: 16px;
	margin: 0 6px;
}

:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) {
	min-width: 32px;
	height: 32px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background-color: #fff;
	color: rgb(95, 101, 108);
	font-size: 16px;
	font-family: "Microsoft YaHei";
	margin: 0 6px;
}

:deep(.el-pagination.is-background .btn-prev.is-disabled),
:deep(.el-pagination.is-background .btn-next.is-disabled) {
	color: rgba(95, 101, 108, 0.45);
	border-color: rgb(235, 238, 242);
	background-color: #fff;
}
</style>