<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 class="report-btn-group">
				<div class="report-btn" v-for="type in choseTypeList" :key="type.id"
					:class="{ active: activeTypeId === type.id }" @click="handleChooseType(type)">
					<div class="text"> {{ type.name }}</div>
				</div>
			</div>
			<div>
				<div class="select-box">
					<div class="select-box-time">

						<el-select v-model="selectedYear" placeholder="近一年以来" style="width: 120px" :teleported="true"
							:placement="'bottom-start'" :popper-options="{
								modifiers: [
									{
										name: 'preventOverflow', // 禁用自动翻转逻辑
										options: {
											mainAxis: false, // 禁用垂直方向的自动调整
											altAxis: false, // 禁用水平方向的自动调整
										}
									},
									{
										name: 'flip', // 完全禁用翻转功能
										enabled: false
									}
								]
							}">

							<el-option @click="handleGetThinkDynamicsReport()" v-for="item in yearList" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</div>
					<div class="select-box-sort">
						<el-select v-model="sort" placeholder="倒序" style="width: 120px" :teleported="true"
							:placement="'bottom-start'" :popper-options="{
								modifiers: [
									{
										name: 'preventOverflow', // 禁用自动翻转逻辑
										options: {
											mainAxis: false, // 禁用垂直方向的自动调整
											altAxis: false, // 禁用水平方向的自动调整
										}
									},
									{
										name: 'flip', // 完全禁用翻转功能
										enabled: false
									}
								]
							}">
							<template #prefix>
								<img src="./images/image down.png" class="select-prefix-img" alt="" @click.stop="toggleSortAndFetch()"
									:key="true" label="正序" :value="true" v-if="!sort" />
								<img src="./images/image up.png" class="select-prefix-img" alt="" @click.stop="toggleSortAndFetch()"
									:key="true" label="正序" :value="true" v-if="sort" />
							</template>
							<el-option @click="handleGetThinkDynamicsReport()" :key="true" label="正序" :value="true" />
							<el-option @click="handleGetThinkDynamicsReport()" :key="false" label="倒序" :value="false" />
						</el-select>
					</div>
				</div>
			</div>
		</div>
		<div v-if="pageChange">
			<ThinkTankReport :research-type-list="researchTypeList" :research-time-list="researchTimeList"
				:selected-research-type-list="selectedResearchTypeList" :cur-footer-list="curFooterList" :total="total"
				:current-page="currentPage" @update:selected-research-type-list="val => (selectedResearchTypeList.value = val)"
				@filter-change="(payload) => handleGetThinkDynamicsReport(payload)" @page-change="handleCurrentChange"
				@report-click="handleToReportDetail" />
		</div>
		<div v-if="!pageChange">
			<CongressHearing :research-type-list="researchTypeList" :research-time-list="researchTimeList"
				:research-hearing-list="researchHearingList" :selected-research-type-list="selectedResearchTypeList"
				:cur-footer-list="curFooterList" :total="total" :current-page="currentPage" :hearing-data="hearingData"
				@update:selected-research-type-list="val => (selectedResearchTypeList.value = val)"
				@filter-change="(payload) => handleGetThinkDynamicsReport(payload)" @page-change="handleCurrentChange"
				@report-click="handleToReportDetail" />
		</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";
import ThinkTankReport from "./ThinkTankReport/index.vue";
import CongressHearing from "./CongressHearing/index.vue";
const router = useRouter();
const pageChange = ref(true)
const searchReport = ref('')

const handleToReportDetail = (item) => {
	window.sessionStorage.setItem('curTabName', item.name)
	const route = router.resolve({
		name: 'ReportDetail',
		params: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
}
const hearingData = ref([
	// 军事类（10条）
	{
		title: "2025财年美国国防部国防授权法案听证会：军事预算与战略部署",
		content: "参与美中经济与安全审查委员会听证会",
		category: "军事",
		time: "2025年7月8日"
	},
	{
		title: "美国国会众议院听证会：美军网络安全与军事信息系统防护",
		content: "参与美中经济与安全审查委员会听证会",
		category: "军事",
		time: "2025年6月15日"
	},
	{
		title: "俄乌冲突背景下美国对乌军事援助听证会：援助规模与后续规划",
		content: "参与美中经济与安全审查委员会听证会",
		category: "军事",
		time: "2025年5月22日"
	},
	{
		title: "美国海军舰艇建造与维护听证会：舰队规模目标与工业基础支撑",
		content: "参与美中经济与安全审查委员会听证会",
		category: "军事",
		time: "2025年4月10日"
	},
	{
		title: "美军太空军事能力建设听证会：太空军发展与反卫星武器管控",
		content: "参与美中经济与安全审查委员会听证会",
		category: "军事",
		time: "2025年3月5日"
	},
	{
		title: "美国国防工业基础听证会：军工供应链韧性与本土制造能力",
		content: "参与美中经济与安全审查委员会听证会",
		category: "军事",
		time: "2025年2月18日"
	},
	{
		title: "美军人工智能军事应用听证会：伦理规范与作战效能评估",
		content: "参与美中经济与安全审查委员会听证会",
		category: "军事",
		time: "2025年1月30日"
	},
	{
		title: "美国陆军未来作战系统听证会：下一代战车与单兵装备研发",
		content: "参与美中经济与安全审查委员会听证会",
		category: "军事",
		time: "2025年7月2日"
	},
	{
		title: "北约军事合作听证会：美国对北约防务开支承诺与兵力部署",
		content: "参与美中经济与安全审查委员会听证会",
		category: "军事",
		time: "2025年6月8日"
	},
	{
		title: "美军核力量现代化听证会：洲际导弹更新与核不扩散政策",
		content: "参与美中经济与安全审查委员会听证会",
		category: "军事",
		time: "2025年5月1日"
	},
	// 先进制造类（10条）
	{
		title: "美国国会听证会：先进制造业供应链重塑与本土产业回流",
		content: "参与美中经济与安全审查委员会听证会",
		category: "先进制造",
		time: "2025年7月15日"
	},
	{
		title: "先进制造中的人工智能应用听证会：智能制造与产业升级",
		content: "参与美中经济与安全审查委员会听证会",
		category: "先进制造",
		time: "2025年6月20日"
	},
	{
		title: "美国先进制造业研发法案听证会：资金分配与技术突破方向",
		content: "参与美中经济与安全审查委员会听证会",
		category: "先进制造",
		time: "2025年4月25日"
	},
	{
		title: "新能源装备先进制造听证会：动力电池与氢能装备产业化",
		content: "参与美中经济与安全审查委员会听证会",
		category: "先进制造",
		time: "2025年3月12日"
	},
	{
		title: "美国半导体先进制造听证会：芯片制造本土化与技术封锁",
		content: "参与美中经济与安全审查委员会听证会",
		category: "先进制造",
		time: "2025年2月8日"
	},
	{
		title: "先进制造劳动力培训听证会：技能匹配与产业人才供给",
		content: "参与美中经济与安全审查委员会听证会",
		category: "先进制造",
		time: "2025年1月15日"
	},
	{
		title: "航空航天先进制造听证会：民用飞机轻量化材料与智能制造",
		content: "参与美中经济与安全审查委员会听证会",
		category: "先进制造",
		time: "2025年7月20日"
	},
	{
		title: "先进制造中的可持续发展听证会：绿色制造与碳中和目标",
		content: "参与美中经济与安全审查委员会听证会",
		category: "先进制造",
		time: "2025年6月1日"
	},
	{
		title: "美国国防先进制造听证会：军工制造数字化与快速响应能力",
		content: "参与美中经济与安全审查委员会听证会",
		category: "先进制造",
		time: "2025年5月18日"
	},
	{
		title: "先进制造标准制定听证会：美国主导的全球制造标准体系构建",
		content: "参与美中经济与安全审查委员会听证会",
		category: "先进制造",
		time: "2025年4月8日"
	}
])
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 choseTypeList = ref([
	{
		id: '智库报告',
		name: '智库报告',
	},
	{
		id: '调查项目',
		name: '调查项目',
	},
	{
		id: '国会听证会',
		name: '国会听证会',
	},

])
const activeTypeId = ref(choseTypeList.value[0]?.id || null)
const handleChooseType = (type) => {
	activeTypeId.value = type.id
	if (type.id === '国会听证会') {
		pageChange.value = false
	} else {
		pageChange.value = true

	}

}
const researchTimeList = ref([
	{
		id: '2025年',
		name: '2025年',
	},
	{
		id: '2024年',
		name: '2024年',
	},
	{
		id: '2023年',
		name: '2023年',
	},
	{
		id: '2022年',
		name: '2022年',
	},
	{
		id: '2021年',
		name: '2021年',
	},
	{
		id: '更早以前',
		name: '更早以前',
	}
])
const researchHearingList = ref([
	{
		id: '美中经济与安全审查委员会',
		name: '美中经济与安全审查委员会',
	},
	{
		id: '国会-行政部门中国委员会',
		name: '国会-行政部门中国委员会',
	},
	{
		id: '美中战略竞争特设委员会',
		name: '美中战略竞争特设委员会',
	},
	{
		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(false);
//获取当前时间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 toggleSortAndFetch = async () => {
	sort.value = !sort.value
	await handleGetThinkDynamicsReport()
}
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;
	}, "");
}

// 获取智库动态报告，payload 为子组件筛选变更时传入的当前选中值，避免时序导致拿到旧值
const handleGetThinkDynamicsReport = async (payload) => {
	const selectedIds = Array.isArray(payload) ? payload : selectedResearchTypeList.value;
	if (Array.isArray(payload)) {
		selectedResearchTypeList.value = payload;
	}
	try {
		const parmas = {
			id: router.currentRoute._value.params.id,
			startDate: getDateYearsAgo(selectedYear.value ?? 1),
			parmas: {
				searchText: searchReport.value,
				authorName: author.value ? author.value : null,
				sortFun: sort.value ?? true,
				currentPage: currentPage.value - 1,
				pageSize: 12,
				researchTypeIds: arrayToString(selectedIds) === '' ? null : arrayToString(selectedIds)
			}

		}
		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;
	align-items: center;
	background: rgb(255, 255, 255);

	// 让右侧下拉框整体靠右
	>div:last-child {
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.report-btn-group {
		width: 384px;
		height: 32px;

		/* 定位参数：top:268px、left:536px（需基于定位父容器） */


		/* 布局分布：集中分布（水平+垂直居中） */
		display: flex;
		margin-top: 16px;
		margin-left: 16px;

		/* 图层模式：穿透（事件+视觉穿透） */

		background: rgb(255, 255, 255); // 与整体背景一致的纯白色

		/* 基础兼容：避免尺寸偏移 */
		box-sizing: border-box;
		gap: 12px;


		.report-btn {
			width: 120px; // 宽度：120px
			height: 32px; // 高度：32px

			border-radius: 21px; // 圆角半径：21px
			border: 1px solid rgb(230, 231, 232); // 描边：1px实线，颜色为rgb(230, 231, 232)
			background: rgb(255, 255, 255); // 背景色：白色

			box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
			// 布局分布：集中分布（水平+垂直居中）
			display: flex;
			align-items: center;
			justify-content: center;
			// 文字样式（匹配你项目的字体风格）
			color: rgba(59, 65, 75, 1); // 适配你项目的文字主色
			font-family: 'Source Han Sans CN';
			font-size: 16px;
			font-weight: 400;
			line-height: 1; // 消除行高对垂直居中的影响
			// 图层模式：穿透（即允许点击事件穿透，如需的话）

			box-sizing: border-box; // 确保描边/内边距不影响尺寸

			&.active {
				background: rgb(5, 95, 194); // 蓝色背景
				color: #fff; // 文字变白
				box-shadow: none; // 需要的话可以关掉灰描边
			}
		}
	}

	.search-box {
		margin-top: 16px;
		display: flex;
		width: 360px;
		height: 32px;
		box-sizing: border-box;
		border: 1px solid rgb(230, 231, 232);
		border-radius: 4px;
		background: rgb(255, 255, 255);
		box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);


		.icon {
			width: 16px;
			height: 16px;
			margin-top: 8px;
			margin-bottom: 8px;
			margin-left: 50px;
			cursor: pointer;

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

	.select-box {
		margin-top: 16px;
		display: flex;

		.select-box-time,
		.select-box-sort {
			background: rgb(255, 255, 255);
			box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
			border: 1px solid rgb(230, 231, 232);
			border-radius: 4px;
			height: 32px;
		}

		.select-prefix-img {
			width: 8px;
			height: 8px;
			margin-right: 4px;
		}

		:deep(.el-select-dropdown) {
			left: 0 !important;
			/* 强制下拉框左对齐选择框 */
			top: 100% !important;
			/* 强制下拉框在选择框正下方 */
			transform: none !important;
			/* 禁用默认的位移变换 */
		}
	}
}

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

	.left {
		width: 360px;
		height: 541px;
		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;


	}

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

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

			.footer-card {
				width: 398px;
				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: 364px;
					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>