<template>
	<div class="home-wrapper">
		<div class="home-main" ref="containerRef">
			<div class="home-top-bg"></div>
			<div class="home-main-header">
				<!-- <div class="home-main-header-top">
					<div class="header-left">
						<HeaderMenu></HeaderMenu>
					</div>
					<div class="header-right">
						<headerInfo curTitleName="科技智库"></headerInfo>
					</div>
				</div> -->

				<div class="home-main-header-center">
					<SearchContainer class="think-tank-search" style="margin-bottom: 0; margin-top: 51px; height: fit-content;"
						v-if="containerRef" placeholder="搜索智库、报告或政策建议" :containerRef="containerRef" areaName="智库" />
					<!-- <el-input v-model="searchThinktankText" @keyup.enter="handleSearch"
						style="width: 838px; height: 100%" placeholder="搜索智库报告" />
					<div class="search">
						<div class="search-icon">
							<img src="./assets/images/search-icon.png" alt="" />
						</div>
						<div class="search-text" @click="handleSearch">搜索</div>
					</div> -->
				</div>
				<!-- <div class="home-main-header-footer">
					<div class="home-main-header-footer-item">
						<div class="item-top">128</div>
						<div class="item-footer">追踪智库数量</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">42</div>
						<div class="item-footer">本月新增报告</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">18</div>
						<div class="item-footer">重点政策建议</div>
					</div>
					<div class="home-main-header-footer-item">
						<div class="item-top">12</div>
						<div class="item-footer">热点科技领域</div>
					</div>
				</div> -->
				<div class="title-info-bar">
					<div class="title-info">
						<div class="info">
							<img src="./assets/images/info.png" />
						</div>
						<div class="title">
							{{ "近期美国智库机构发布涉华报告数量汇总" }}
						</div>
					</div>
					<div class="time-tab-pane">
						<TimeTabPane @time-click="handleTimeClick" />
					</div>
				</div>
				<div class="home-main-header-card-box">
					<div class="card" v-for="(item, index) in sortedCardList" :key="index" @click="handleClick(item)">
						<div class="red-info" v-if="item.increaseReportNumber != 0 && item.increaseReportNumber != null">{{ "+" }}{{
							item.increaseReportNumber }}</div>
						<div class="card-header">
							<div class="icon">
								<img :src="item.logo" alt="" />
							</div>
							<!-- <div class="rank" :class="{ rank1: item.rank === 1, rank2: item.rank === 2, rank3: item.rank === 3 }">
								{{ "No." + (index + 1) }}
							</div> -->
							<div class="rank">
								<div class=" number">{{ item.reportNumber }} {{ "篇报告" }}</div>

							</div>
						</div>
						<div class="card-title">
							<div class="title-left">{{ item.name }}</div>

							<div class="title-right">{{ item.country }}</div>
						</div>

						<!-- <el-popover effect="dark" :content="item.desc" placement="top-start">
							<template #reference>
								<div class="content">{{ item.desc }}</div>
							</template>
</el-popover> -->
						<div class="content">{{ item.desc }}</div>
						<div class="tag-box">
							<AreaTag v-for="(val, idx) in item.tagList" :key="idx" :tagName="val.industryName"></AreaTag>
						</div>
					</div>
					<div class="card" @click="goToAllThinkTank()">
						<div class="more">
							{{ "查看全部智库" }}{{ "(" }}{{ totalAllItem }}{{ ")" }}{{ "家" }}
							<div class="blue-right">
								<img src="./assets/images/blue-right.png" alt="" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="home-main-center">
				<DivideHeader id="position1" class="divide-header" :titleText="'最新动态'"></DivideHeader>
				<div class="center-top">
					<div class="box1">
						<div class="box1-left" @click="handleSwithCurDecree('left')">
							<div class="icon">
								<img src="./assets/images/box1-left.svg" alt="" />
							</div>
						</div>
						<div class="box1-right" @click="handleSwithCurDecree('right')">
							<div class="icon">
								<img src="./assets/images/box1-right.svg" alt="" />
							</div>
						</div>
						<div class="box1-header">
							<div class="box1-header-left">
								<div class="icon">
									<img src="./assets/images/box1-header-icon.png" alt="" />
								</div>
								<div class="title-box">
									<div class="title">{{ "智库发布" }}</div>
								</div>
							</div>
							<div class="box1-header-right" @click="handleClickToDetail">查看详情 ></div>
						</div>
						<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
							indicator-position="none">
							<el-carousel-item v-for="(itemData, index) in box1Data" :key="index">
								<div class="box1-main">
									<div class="box1-main-left">
										<img :src="itemData?.imageUrl" alt="" />
									</div>
									<div class="box1-main-right">
										<div class="title">{{ itemData?.reportName }}</div>


										<div class="name">
											<div class="logo-title-box">
												<div class="logo">
													<img :src="itemData?.thinkTankImage" alt="" />
												</div>
												<div class="title">{{ itemData?.thinkTankName + " · " + "智库报告" }}</div>
											</div>
											<div class="time">{{ itemData?.reportDate }}</div>
										</div>
										<div class="content">{{ itemData?.summary }}</div>
										<div class="box1-right-footer">
											<div class="tag-box">
												<!-- <div class="tag" v-for="(item, index) in itemData?.industryVOList" :key="index">
												{{ item.industryName }}
											</div> -->
												<AreaTag v-for="(item, index) in itemData?.industryVOList" :key="index"
													:tagName="item.industryName">
												</AreaTag>
											</div>
										</div>
									</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
					<RiskSignal :list="warningList" @more-click="handleToMoreRiskSignal" postDate="time" name="title"
						@item-click="handleClickToDetail" />
				</div>
				<DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader>
				<div class="center-center">
					<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews"
						img="newsImage" title="newsTitle" content="newsContent" from="from" />
					<MessageBubble :messageList="messageList" imageUrl="personImage" @more-click="handleToSocialDetail"
						@person-click="handleClickPerson" name="personName" content="remarks" source="orgName" />
				</div>
				<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
				<div class="center-footer">
					<div class="box5">
						<div class="box5-header">
							<div class="box5-header-left">
								<div class="box5-header-icon">
									<img src="./assets/images/box3-header-icon.png" alt="" />
								</div>
								<div class="box5-header-title">{{ "数量变化趋势" }}</div>
							</div>
							<div class="box5-select-box">
								<el-select v-model="box5selectetedArea" placeholder="选择领域" style="width: 120px"
									@change="handleBox5AreaChange">
									<el-option label="全部领域" value="全部领域" />
									<el-option v-for="item in box5RawData.data" :key="item.name" :label="item.name" :value="item.name" />
								</el-select>
								<el-select v-model="box5selectetedYear" placeholder="选择年份" style="width: 120px"
									@change="changeBox5Data">
									<el-option v-for="item in box5YearList" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>

							</div>
						</div>
						<div class="box5-main" :class="{ 'box5-main--empty': !hasBox5ChartData }">
							<template v-if="!hasBox5ChartData">
								<el-empty class="box5-el-empty" description="暂无数据" :image-size="100" />
							</template>
							<template v-else>
								<div class="box5-chart-row">
									<div id="box5Chart" class="box5-chart-canvas"></div>
								</div>
								<div class="source">
									<TipTab :text="'智库报告数量变化趋势，数据来源:美国各智库官网'" />
								</div>
								<div class="chart-box">
									<div class="btn-box" v-if="!isShowAiContentBox5" @mouseenter="handleSwitchAiContentShowBox5(true)">
										<AiButton />
									</div>
									<div class="content-box" v-if="isShowAiContentBox5"
										@mouseleave="handleSwitchAiContentShowBox5(false)">
										<AiPane :aiContent="aiContentBox5" />
									</div>
								</div>
							</template>
						</div>
					</div>
					<div class="box6">
						<div class="box6-header">
							<div class="header-icon">
								<img src="./assets/images/box6-header-icon.png" alt="" />
							</div>
							<div class="header-title">{{ "领域分布情况" }}</div>
							<div class="box6-select-box">
								<el-select v-model="box6selectetedTank" placeholder="选择智库" style="width: 120px">
									<el-option label="全部智库" value="全部智库" />
									<el-option v-for="item in box6TankList" :key="item.value" :label="item.label" :value="item.value" />

								</el-select>

								<el-select v-model="box6selectetedYear" placeholder="选择时间" style="width: 120px">
									<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value"
										@click="handleBox6()" />
								</el-select>
							</div>
						</div>
						<div class="box6-main" :class="{ 'box6-main--empty': !hasBox6ChartData }">
							<template v-if="!hasBox6ChartData">
								<el-empty class="box6-el-empty" description="暂无数据" :image-size="100" />
							</template>
							<template v-else>
								<div id="box6Chart"></div>
								<div class="source">
									<TipTab :text="'智库报告领域分布情况，数据来源：美国各智库官网'" />
								</div>
								<div class="chart-box">
									<div class="btn-box" v-if="!isShowAiContentBox6" @mouseenter="handleSwitchAiContentShowBox6(true)">
										<AiButton />
									</div>
									<div class="content-box" v-if="isShowAiContentBox6"
										@mouseleave="handleSwitchAiContentShowBox6(false)">
										<AiPane :aiContent="aiContentBox6" />
									</div>
								</div>
							</template>
						</div>
					</div>
				</div>
				<div class="center-footer1">
					<div class="box7">
						<div class="box7-header">
							<div class="box7-header-left">
								<div class="box7-header-icon">
									<img src="./assets/images/box7-header-icon.png" alt="" />
								</div>
								<div class="box7-header-title">{{ "智库资金流向" }}</div>
							</div>
						</div>
						<div class="box7-main" :class="{ 'box7-main--empty': !hasBox7ChartData }">
							<template v-if="!hasBox7ChartData">
								<el-empty class="box7-el-empty" description="暂无数据" :image-size="100" />
							</template>
							<template v-else>
								<div id="box7Chart"></div>
								<div class="source">
									<TipTab :text="'美国科技智库与主要政府机构之间的资金往来，数据来源：美国各智库官网'" />
								</div>
								<div class="chart-box">
									<div class="btn-box" v-if="!isShowAiContentBox7" @mouseenter="handleSwitchAiContentShowBox7(true)">
										<AiButton />
									</div>
									<div class="content-box" v-if="isShowAiContentBox7"
										@mouseleave="handleSwitchAiContentShowBox7(false)">
										<AiPane :aiContent="aiContentBox7" />
									</div>
								</div>
							</template>
						</div>
					</div>
					<div class="box8">
						<div class="box8-header">
							<div class="box8-header-left">
								<div class="box8-header-icon">
									<img src="./assets/images/box8-header-icon.png" alt="" />
								</div>
								<div class="box8-header-title">{{ "智库研究热点" }}</div>
							</div>

						</div>
						<div class="box8-main">
							<div class="box8-main-item">
								<div class="box8-item" v-for="(item, index) in box8Data" :key="index">
									<div class="item-left"
										:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
										{{ index + 1 }}
									</div>
									<!-- <el-popover effect="dark" :content="item.clause" placement="top-start">
									<template #reference> -->
									<div class="item-center"
										:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
										{{ item.clause }}
									</div>
									<!-- </template>
								</el-popover> -->

									<!-- <div class="item-right">{{ `${item.count}份报告 >` }}</div> -->
									<div class="item-count">{{ item.count + "份报告 >" }}</div>
								</div>

							</div>

						</div>
					</div>
				</div>
			</div>

			<div class="home-main-footer">
				<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>

				<div class="home-main-footer-header">
					<div class="btn-box">
						<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
							:key="index" @click="handleClickCate(cate)">
							{{ cate }}
						</div>
					</div>
					<div class="select-box">
						<el-select v-model="resourceLibrarySortModel" class="resource-library-sort-select" placeholder="发布时间"
							style="width: 120px" :teleported="true" placement="bottom-start"
							:popper-options="resourceLibrarySortPopperOptions" @change="handleResourceLibrarySortChange">
							<template #prefix>
								<img v-if="resourceLibrarySortModel !== true"
									src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image down.png"
									class="resource-library-sort-prefix-img" alt="" @click.stop="toggleResourceLibrarySortPrefix" />
								<img v-else src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image up.png"
									class="resource-library-sort-prefix-img" alt="" @click.stop="toggleResourceLibrarySortPrefix" />
							</template>
							<el-option :key="'resource-lib-sort-asc'" label="正序" :value="true" />
							<el-option :key="'resource-lib-sort-desc'" label="倒序" :value="false" />
						</el-select>
					</div>
					<!-- <el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px">
						<el-option @click="handleGetetThinkTankReport()" :key="true" label="正序" :value="true" />
						<el-option @click="handleGetetThinkTankReport()" :key="false" label="倒序" :value="false" />
					</el-select> -->
				</div>
				<div class="resource-library-content">
					<HomeMainFooterMain v-if="activeCate === '智库报告'" :area-list="areaList"
						v-model:selectedAreaList="selectedAreaList" :pub-time-list="pubTimeList"
						v-model:selectedPubTimeList="selectedPubTimeList" @filter-change="handleThinkTankReportFilterChange"
						:cur-footer-list="curFooterList" :total="total" :current-page="currentPage"
						@report-click="handleToReportDetail" @page-change="handleCurrentChange" />

					<HomeMainFooterSurvey v-else-if="activeCate === '调查项目'" :area-list="areaList"
						v-model:selectedAreaList="surveySelectedAreaList" :pub-time-list="pubTimeList"
						v-model:selectedPubTimeList="surveySelectedPubTimeList" @filter-change="handleSurveyFilterChange"
						:cur-footer-list="surveyFooterList" :total="surveyTotal" :current-page="surveyCurrentPage"
						@report-click="handleToReportDetail" @page-change="handleSurveyCurrentChange" />

					<ThinkTankCongressHearingOverview v-else-if="activeCate === '国会听证会'" :key="`congress-${resourceTabResetKey}`"
						:research-type-list="areaList" :research-time-list="pubTimeList" @report-click="handleToReportDetail" />

					<ThinkTankPolicyAdviceOverview v-else :key="`policy-${resourceTabResetKey}`" :research-type-list="areaList"
						:research-time-list="pubTimeList" :list="policyFooterList" :total="policyTotal"
						:current-page="policyCurrentPage" :page-size="7" @filter-change="handlePolicyFilterChange"
						@page-change="handlePolicyCurrentChange" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import RiskSignal from "@/components/base/riskSignal/index.vue";
import NewsList from "@/components/base/newsList/index.vue";
import MessageBubble from "@/components/base/messageBubble/index.vue"
import { onMounted, ref, computed, reactive, nextTick } from "vue";
import scrollToTop from "@/utils/scrollToTop";
import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue";
import setChart from "@/utils/setChart";
import HomeMainFooterMain from "./components/HomeMainFooterMain.vue";
import HomeMainFooterSurvey from "./components/HomeMainFooterSurvey.vue";
import ThinkTankCongressHearingOverview from "./components/ThinkTankCongressHearingOverview.vue";
import ThinkTankPolicyAdviceOverview from "./components/ThinkTankPolicyAdviceOverview.vue";

import {
	getThinkTankList,
	getThinkTankRiskSignal,
	getThinkTankPolicyIndustryChange,
	getThinkTankPolicyIndustry,
	getThinkTankDonation,
	getAllThinkTankList,
	getThinkTankHot,
	getNewReport,
	getHylyList,
	getThinkTankReport,
	getThinkTankOverviewPolicy,
	getThinkTankReportNews,
	getThinkTankReportRemarks
} from "@/api/thinkTank/overview";
import { getPersonSummaryInfo } from "@/api/common/index";
import getMultiLineChart from "./utils/multiLineChart";
import getPieChart from "./utils/piechart";
import getSankeyChart from "./utils/sankey";
import { getChartAnalysis } from "@/api/aiAnalysis/index";
import defaultNewsIcon from "@/assets/icons/default-icon-news.png";
import defaultHeaderIcin from "@/assets/icons/default-icon1.png";
import News1 from "./assets/images/news1.png";
import News2 from "./assets/images/news2.png";
import News3 from "./assets/images/news3.png";
import News4 from "./assets/images/news4.png";
import News5 from "./assets/images/news5.png";
import AiButton from '@/components/base/Ai/AiButton/index.vue'
import AiPane from '@/components/base/Ai/AiPane/index.vue'
import TipTab from "./TipTab/index.vue";
import {
	RESOURCE_FILTER_ALL_AREA,
	RESOURCE_FILTER_ALL_TIME,
	RESOURCE_FILTER_EARLIER,
	stripAllAreaForRequest,
	stripAllTimeForRequest,
	buildNumericYearsQueryString,
	isSelectionCoveringAllOptions,
	getResourceLibraryReportDateRangeFromTimeSelection
} from "./utils/resourceLibraryFilters";

import Message1 from "./assets/images/message-icon1.png";
import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png";

import Logo1 from "./assets/images/logo1.png";
import Logo2 from "./assets/images/logo2.png";
import Logo3 from "./assets/images/logo3.png";
import Logo4 from "./assets/images/logo4.png";
import Logo5 from "./assets/images/logo5.png";

import Img1 from "./assets/images/img1.png";
import Img2 from "./assets/images/img2.png";
import Img3 from "./assets/images/img3.png";
import Img4 from "./assets/images/img4.png";
import Img5 from "./assets/images/img5.png";
import Img6 from "./assets/images/img6.png";
import Img7 from "./assets/images/img7.png";
import Img8 from "./assets/images/img8.png";
import Img9 from "./assets/images/img9.png";
import Img10 from "./assets/images/img10.png";
import Img11 from "./assets/images/img11.png";
import Img12 from "./assets/images/img12.png";

import Box1Img from "./assets/images/box1-img.png";
import Box1Logo from "./assets/images/box1-logo.png";
import { setCanvasCreator } from "echarts/core";
import { ElMessage } from "element-plus";
import { useRouter } from 'vue-router';
const containerRef = ref(null);
const statCountInfo = ref([]);
const pageSize = ref(15)
const totalAllItem = ref(0)
const isShowAiContentBox5 = ref(false);
const aiContentBox5 = ref("");
const isBox5InterpretLoading = ref(false);
const handleSwitchAiContentShowBox5 = (val) => {
	isShowAiContentBox5.value = val;
	if (val) {
		fetchBox5ChartInterpretation();
	}
};
const isShowAiContentBox6 = ref(false);
const aiContentBox6 = ref("");
const isBox6InterpretLoading = ref(false);
const handleSwitchAiContentShowBox6 = (val) => {
	isShowAiContentBox6.value = val;
	if (val) {
		fetchBox6ChartInterpretation();
	}
};
const isShowAiContentBox7 = ref(false);
const aiContentBox7 = ref("");
const isBox7InterpretLoading = ref(false);
const handleSwitchAiContentShowBox7 = (val) => {
	isShowAiContentBox7.value = val;
	if (val) {
		fetchBox7ChartInterpretation();
	}
};
const handleGetAllThinkTankList = async () => {
	try {
		const res = await getAllThinkTankList({
			// 后端通常是 0-based，这里做一次转换
			currentPage: currentPage.value - 1,
			pageSize: pageSize.value,
			timePeriod: timePeriod.value
		});
		console.log("智库列表", res);
		if (res.code === 200 && res.data) {
			totalAllItem.value = res.data.totalElements;

		}
	} catch (error) {
		console.error("获取智库列表error", error);
	}
};
const routerTo = useRouter()

// 跳转到全部智库页面
const goToAllThinkTank = () => {
	// 替换为你的实际路由路径
	routerTo.push('/thinkTank/allThinkTank');
};
const timePeriod = ref("WEEK")

const handleTimeClick = item => {
	const time = item?.time
	if (time === "近一周") {
		timePeriod.value = "WEEK"
	} else if (time === "近一月") {
		timePeriod.value = "MONTH"
	} else if (time === "近一年") {
		timePeriod.value = "YEAR"
	}
	// 切换时间范围后重新拉取（从第一页开始）
	currentPage.value = 1
	handleGetAllThinkTankList()
	// 同步刷新首页卡片数据（包含 increaseReportNumber）
	handleGetThinkTankList()
}
const getStatCountInfo = async () => {



	// console.log('----getStatCountInfo', res.data)
	statCountInfo.value = [
		{
			name: "追踪智库数量",
			count: "1"
		},
		{
			name: "本月新增报告",
			count: "2"
		},
		{
			name: "重点政策建议",
			count: "2"
		},
		{
			name: "热点科技领域",
			count: "2"
		}
	];


};
const searchThinktankText = ref(""); //搜索科技人物及观点
// 智库列表
const cardList = ref([
	// {
	// 	id: 1,
	// 	logo: Logo1,
	// 	rank: 1,
	// 	name: "兰德科技智库",
	// 	country: "美国",
	// 	desc: "全球顶尖政策研究机构，专注于国家安全、科技政策、医疗卫生、能源政策、公共安全等领域的研究。 ",
	// 	tagList: [
	// 		{
	// 			name: "国家安全",
	// 			status: 2
	// 		},
	// 		{
	// 			name: "科技政策",
	// 			status: 4
	// 		}
	// 	]
	// },
	// {
	// 	id: 2,
	// 	logo: Logo2,
	// 	rank: 2,
	// 	name: "布鲁金斯学会",
	// 	country: "美国",
	// 	desc: "专注于全球经济与发展、外交政策、都市政策、治理研究等领域，是美国最具影响力的智库之一。",
	// 	tagList: [
	// 		{
	// 			name: "经济政策",
	// 			status: 3
	// 		},
	// 		{
	// 			name: "公共政策",
	// 			status: 1
	// 		}
	// 	]
	// }
]);
const sortedCardList = computed(() => {
	return [...cardList.value].sort((a, b) => {
		const an = Number(a?.reportNumber ?? 0);
		const bn = Number(b?.reportNumber ?? 0);
		return bn - an;
	});
});
// 获取智库列表
const handleGetThinkTankList = async () => {
	try {
		const res = await getAllThinkTankList({
			// 后端通常是 0-based，这里做一次转换
			currentPage: currentPage.value - 1,
			pageSize: pageSize.value,

			timePeriod: timePeriod.value
		});
		console.log("智库列表", res);
		cardList.value = [];
		if (res.code === 200 && res.data) {
			// 兼容两种返回结构：
			// 1) data.content（分页）
			// 2) data 直接是数组（非分页）
			const list = Array.isArray(res.data) ? res.data : (res.data?.content || []);
			cardList.value = list.map(item => ({
				id: item.id,
				logo: item.imageUrl,
				name: item.name,
				tagList: item.tags,
				country: item.country,
				desc: item.describe,
				rank: item.id,
				reportNumber: item.reportNumber,
				increaseReportNumber: item.increaseReportNumber
			}));
		}
	} catch (error) {
		console.error("获取智库列表error", error);
	}
};

// 智库发布
const box1DataIndex = ref(0);
const box1Data = ref({
	// img: Box1Img,
	// title: "中美经济竞争：复杂经济和地缘政治关系中的收益和风险",
	// tagList: ["外交", "军事", "经济"],
	// content: `自2017年以来，美中竞争，包括经济竞争，已成为美国外交政策的定义。这两个经济体是世界上第一和第二大国家经济体，彼此紧密交织。无论多么必要的关系变化，都可能付出高昂代价。因此，美国面临着在双重战略竞争条件下确保其经济满足国家需求的挑战。为应对这一挑战，兰德研究人员对美中竞争进行了经济和制度分析，开展了参与式前瞻性研究，以理解确保美国经济健全发展`,
	// time: "2025年9月16日",
	// from: "兰德科技智库",
	// logo: Box1Logo
});
//获取智库发布
const handleGetNewReport = async () => {
	try {
		const res = await getNewReport();
		console.log("智库发布", res);
		if (res.code === 200 && res.data) {
			box1Data.value = res.data.map(item => {
				const formatDate = (dateStr) => {
					if (!dateStr) return ''; // 处理空值，避免报错
					const [year, month, day] = dateStr.split('-');
					return `${year}年${parseInt(month, 10)}月${parseInt(day, 10)}日`;
				};
				return {
					...item,
					reportDate: formatDate(item.reportDate)
				}
			})

		}
	} catch (error) {
		console.error("获取智库列表error", error);
	}
};

//前后切换智库发布
function changeBox1Data(type) {
	console.log(type, box1DataIndex.value);
	if (type === "previous") {
		box1DataIndex.value === 0 ? "" : (box1DataIndex.value = box1DataIndex.value - 1);
	} else {
		box1DataIndex.value === box1Data.value.length - 1 ? "" : (box1DataIndex.value = box1DataIndex.value + 1);
	}
}

const carouselRef = ref(null);

// 点击查看详情
const handleClickToDetail = () => {
	let activeIndex = 0;
	if (carouselRef.value) {
		activeIndex = carouselRef.value.activeIndex;
	}

	console.log("当前 Carousel 激活索引:", activeIndex);

	const id = box1Data.value[activeIndex].id;
	box1DataIndex.value = activeIndex;
	toDetaile();
};

const toDetaile = () => {
	window.sessionStorage.setItem("curTabName", box1Data.value[box1DataIndex.value].reportName);
	const route = router.resolve({
		name: "ReportDetail",
		params: {
			id: box1Data.value[box1DataIndex.value].reportId
		}
	});
	window.open(route.href, "_blank");
};

// 切换当前智库
const handleSwithCurDecree = name => {
	console.log(name, carouselRef.value);
	if (name === "left") {
		carouselRef.value.prev();
	} else {
		carouselRef.value.next();
	}
};
// 风险信号
const warningList = ref([
	{
		title: "关于对中华人民共和国合成阿片类药物供应链...",
		time: "一天前",
		status: "特别重大"
	},
	{
		title: "关于调整钢铁进口的公告",
		time: "一天前",
		status: "重大风险"
	},
	{
		title: "关于修订对中华人民共和国低价值进口商品适...",
		time: "一天前",
		status: "一般风险"
	}
]);
// 获取智库风险信号
const handleGetThinkTankRiskSignal = async () => {
	try {
		const res = await getThinkTankRiskSignal();
		console.log("智库风险信号", res);
		if (res.code === 200) {
			warningList.value = res.data.map(item => {
				return {
					title: item.name,
					time: item.times,
					id: item.reportId,
					status: item.riskLevel || "暂无数值"
				};
			});
		}
	} catch (error) {
		console.error("获取智库风险信号error", error);
	}
};

// 新闻资讯
const newsList = ref([
	{
		img: News1,
		title: "美政府停摆仍持续，拨款法案存缺陷，但两党磋商露曙光",
		content: `美国政府停摆已持续34天，距离历史上最长的停摆纪录仅差一天，参议院已先后13次尝试...`,
		from: "11-4 · 华盛顿邮报"
	},
	{
		img: News2,
		title: "美参议院通过决议，要求终止特朗普全球关税政策",
		content: `参议院以51票赞成、47票反对通过一项决议，旨在终止特朗普实施的全面关税政策，四名......`,
		from: "11-4 · 纽约时报"
	},
	{
		img: News3,
		title: "美众院通过950亿美元对外援助法案，包含对台军援",
		content: `国会众议院在4月通过了大规模对外援助法案，其中包括为“印太安全”提供资金的条款，......`,
		from: "11-3 · 洛杉矶时报"
	},
	{
		img: News4,
		title: "“大而美”法案在激烈争议中通过",
		content: `特朗普力推的大规模税收与支出法案在国会以微弱优势通过。该法案因大幅削减医疗补助和......`,
		from: "11-3 · 今日美国"
	},
	{
		img: News5,
		title: "美政府“停摆”追平历史最长纪录，民生多领域受重创",
		content: `联邦政府“停摆”进入第35天，追平历史纪录。食品救济项目资金中断，数百万低收入民......`,
		from: "11-2 ·  ​福克斯新闻网"
	}
]);

//获取新闻资讯
const handleGetThinkTankReportNews = async () => {
	try {
		const res = await getThinkTankReportNews();
		console.log("新闻资讯", res);
		if (res.code === 200 && res.data) {
			newsList.value = res.data.map(item => {
				return {
					...item,
					from: `${item.newsDate} · ${item.newsOrg}`
				};
			});
		}
	} catch (error) {
		console.error("获取新闻资讯error", error);
	}
};
// 智库人物动态
// const box4TagList = ref([
// 	{
// 		name: "新能源",
// 		status: 3
// 	},
// 	{
// 		name: "人工智能",
// 		status: 2
// 	},
// 	{
// 		name: "通信网络",
// 		status: 2
// 	},
// 	{
// 		name: "量子科技",
// 		status: 5
// 	},
// 	{
// 		name: "生物科技",
// 		status: 1
// 	},
// 	{
// 		name: "集成电路",
// 		status: 4
// 	}
// ]);

// const box4ActiveTag = ref("通信网络");
// const handleClickBox4Tag = tag => {
// 	box4ActiveTag.value = tag;
// };

const messageList = ref([
	{
		img: Message1,
		name: "唐纳德·特朗普",
		time: "15:23 · 发布于真实社交",
		content: `埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。`
	},
	{
		img: Message2,
		name: "埃隆·马斯克",
		time: "14:49 · 发布于X",
		content: `如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。`
	},
	{
		img: Message3,
		name: "塞巴斯蒂安·马拉比",
		time: "11:05 · 发布于X",
		content: `提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。`
	}
]);

//智库人物动态
const handleGetThinkTankReportRemarks = async () => {
	try {
		const res = await getThinkTankReportRemarks();
		console.log("智库人物动态", res);
		if (res.code === 200 && res.data) {
			// 只展示后端返回的前三条
			messageList.value = (res.data || []).slice(0, 3);
			messageList.value.forEach(item => {
				item.time = item.time.replace("T", " ");
			});
		}
	} catch (error) {
		console.error("获取智库人物动态error", error);
	}
};

// 政策建议趋势分布（接口全量，按领域筛选后用于绘图）
const box5RawData = ref({
	title: [],
	data: []
});
const hasBox5ChartData = computed(() => {
	const v = box5RawData.value;
	if (!v || typeof v !== "object") return false;
	return Array.isArray(v.title) && v.title.length > 0 && Array.isArray(v.data) && v.data.length > 0;
});

//获取当前时间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}`;
}
function getDateMonthsAgo(months) {
	// 获取当前日期
	const currentDate = new Date();
	// 计算指定月数之前的日期
	const pastDate = new Date(currentDate);
	pastDate.setMonth(currentDate.getMonth() - months); // 减去指定的月数
	// 格式化日期为 "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}`;
}

/** 自然年日期范围（传给 policyIndustryChange） */
const getBox5YearDateRange = year => {
	const y = Number(year);
	return {
		startDate: `${y}-01-01`,
		endDate: `${y}-12-31`
	};
};

const box5selectetedYear = ref(2025);
const box5YearList = ref([
	{ label: "2026", value: 2026 },
	{ label: "2025", value: 2025 },
	{ label: "2024", value: 2024 },
	{ label: "2023", value: 2023 },
	{ label: "2022", value: 2022 }
]);

const box5selectetedArea = ref("全部领域");

const changeBox5Data = year => {
	handleBox5(year);
};
// 政策建议趋势分布
const handleGetThinkTankPolicyIndustryChange = async range => {
	try {
		const res = await getThinkTankPolicyIndustryChange(range);
		console.log("政策建议趋势分布", res);
		if (res.code === 200 && res.data) {
			const originalData = res.data;
			// 提取年份
			const years = originalData.map(item => item.year);
			// 提取所有行业名称
			const industries = new Set();
			originalData.forEach(item => {
				item.industryList.forEach(industry => {
					industries.add(industry.industry);
				});
			});

			// 初始化目标数据结构
			const result = {
				title: years,
				data: []
			};

			// 遍历每个行业，生成对应的 value 数组
			industries.forEach(industry => {
				const industryData = {
					name: industry,
					value: []
				};
				originalData.forEach(yearData => {
					const amount = yearData.industryList.find(i => i.industry === industry)?.amount || 0;
					industryData.value.push(amount);
				});
				result.data.push(industryData);
			});
			box5RawData.value = result;
			console.log(box5RawData.value.data, "box5RawData");
			box5RawData.value.data.forEach(item => {
				console.log(item.name);
			});
		} else {
			box5RawData.value = { title: [], data: [] };
		}
	} catch (error) {
		console.error("获取政策建议趋势分布error", error);
		box5RawData.value = { title: [], data: [] };
	}
};
/** 按所选领域得到折线图数据（全部领域 = 全量序列） */
const box5ChartDisplayData = computed(() => {
	const raw = box5RawData.value;
	if (!raw || !Array.isArray(raw.title) || !Array.isArray(raw.data)) {
		return { title: [], data: [] };
	}
	if (box5selectetedArea.value === "全部领域") {
		return { title: raw.title, data: [...raw.data] };
	}
	const series = raw.data.filter(d => d.name === box5selectetedArea.value);
	return {
		title: raw.title,
		data: series.length ? series : [...raw.data]
	};
});

const renderBox5Chart = () => {
	const chartInput = box5ChartDisplayData.value;
	if (!chartInput.title.length || !chartInput.data.length) {
		return;
	}
	const box5Chart = getMultiLineChart(chartInput);
	setChart(box5Chart, "box5Chart");
};

const handleBox5AreaChange = () => {
	aiContentBox5.value = "";
	renderBox5Chart();
};

const handleBox5 = async year => {
	const y = year != null ? Number(year) : box5selectetedYear.value;
	box5selectetedYear.value = y;
	box5selectetedArea.value = "全部领域";
	await handleGetThinkTankPolicyIndustryChange(getBox5YearDateRange(y));
	renderBox5Chart();
	aiContentBox5.value = "";
};

/** 兼容 getChartAnalysis 返回对象：从 data[0] 提取「解读」文本 */
const getInterpretationTextFromChartResponse = (res) => {
	const list = res?.data;
	const first = Array.isArray(list) ? list[0] : null;
	return (
		first?.["解读"] ||
		first?.["interpretation"] ||
		first?.["analysis"] ||
		first?.["content"] ||
		""
	);
};

/** 参考科技法案数量变化趋势：按 chunk 增量拼接展示 */
const appendAiInterpretationChunk = (targetRef, chunk, loadingText = "解读生成中…") => {
	if (!chunk) {
		return;
	}
	const current = String(targetRef.value || "");
	const base = current === loadingText ? "" : current;
	targetRef.value = base + String(chunk);
};

/** 请求 box5 折线图解读并更新 aiContentBox5（支持流式 SSE） */
const fetchBox5ChartInterpretation = async () => {
	const v = box5ChartDisplayData.value;
	if (!v || !Array.isArray(v.title) || v.title.length === 0 || !Array.isArray(v.data) || v.data.length === 0) {
		aiContentBox5.value = "暂无图表数据";
		return;
	}
	const hasValidContent =
		aiContentBox5.value &&
		aiContentBox5.value !== "解读生成中…" &&
		aiContentBox5.value !== "解读加载失败" &&
		aiContentBox5.value !== "暂无图表数据";
	if (hasValidContent || isBox5InterpretLoading.value) {
		return;
	}
	isBox5InterpretLoading.value = true;
	aiContentBox5.value = "解读生成中…";
	const chartPayload = {
		type: "折线图",
		name: "数量变化趋势",
		data: v.title.map((label, i) => {
			const point = { period: label };
			v.data.forEach((s) => {
				point[s.name] = s.value[i] ?? 0;
			});
			return point;
		})
	};
	try {
		const res = await getChartAnalysis(
			{ text: JSON.stringify(chartPayload) },
			{
				onChunk: chunk => {
					appendAiInterpretationChunk(aiContentBox5, chunk);
				}
			}
		);
		const text = getInterpretationTextFromChartResponse(res);
		aiContentBox5.value = text || aiContentBox5.value || "未返回有效解读内容";
	} catch (error) {
		console.error("图表解读请求失败", error);
		aiContentBox5.value = "解读加载失败";
	} finally {
		isBox5InterpretLoading.value = false;
	}
};

// 政策建议领域分布
const box6Data = ref([
	{
		name: "半导体",
		value: 50,
		color: "#4096FF"
	},
	{
		name: "电子设备",
		value: 46,
		color: "#FFA39E"
	},
	{
		name: "显示技术",
		value: 40,
		color: "#ADC6FF"
	},
	{
		name: "新能源",
		value: 32,
		color: "#FFC069"
	},
	{
		name: "通信设备",
		value: 31,
		color: "#B5F5EC"
	},
	{
		name: "汽车",
		value: 30,
		color: "#B37FEB"
	},
	{
		name: "其他",
		value: 24,
		color: "#D6E4FF"
	}
]);
const box6selectetedYear = ref("2025");
const box6YearList = ref([
	{
		label: "2026",
		value: "2026"
	},
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	}
]);
const box6selectetedArea = ref("全部领域");

/** 领域分布：有接口返回的有效分项时才展示图表（与 box5 空态一致） */
const hasBox6ChartData = computed(() => {
	const list = Array.isArray(box6Data.value) ? box6Data.value : [];
	return list.length > 0;
});

/** 按所选领域得到饼图数据（全部领域 = 全部分块） */
const box6PieDisplayData = computed(() => {
	const list = Array.isArray(box6Data.value) ? box6Data.value : [];
	if (!list.length) {
		return [];
	}
	if (box6selectetedArea.value === "全部领域") {
		return list;
	}
	const filtered = list.filter(item => item.name === box6selectetedArea.value);
	if (filtered.length) {
		return filtered;
	}
	return [{ name: "暂无该领域数据", value: 1, color: "#E0E0E0" }];
});

/** 饼图解读用数据：排除占位项 */
const getBox6InterpretationSeries = () => {
	const pie = box6PieDisplayData.value;
	return pie.filter(
		item => item.name !== "暂无数据" && item.name !== "暂无该领域数据"
	);
};

/** 请求 box6 领域分布饼图解读（入参：{ text: JSON.stringify({ type, name, data }) }，与柱状图示例同结构） */
const fetchBox6ChartInterpretation = async () => {
	const series = getBox6InterpretationSeries();
	if (!series.length) {
		aiContentBox6.value = "暂无图表数据";
		return;
	}
	const hasValidContent =
		aiContentBox6.value &&
		aiContentBox6.value !== "解读生成中…" &&
		aiContentBox6.value !== "解读加载失败" &&
		aiContentBox6.value !== "暂无图表数据";
	if (hasValidContent || isBox6InterpretLoading.value) {
		return;
	}
	isBox6InterpretLoading.value = true;
	aiContentBox6.value = "解读生成中…";
	const chartPayload = {
		type: "饼图",
		name: "领域分布情况",
		year: box6selectetedYear.value,
		data: series.map(item => ({
			name: item.name,
			value: item.value
		}))
	};
	try {
		const res = await getChartAnalysis(
			{ text: JSON.stringify(chartPayload) },
			{
				onChunk: chunk => {
					appendAiInterpretationChunk(aiContentBox6, chunk);
				}
			}
		);
		const text = getInterpretationTextFromChartResponse(res);
		aiContentBox6.value = text || aiContentBox6.value || "未返回有效解读内容";
	} catch (error) {
		console.error("领域分布图表解读请求失败", error);
		aiContentBox6.value = "解读加载失败";
	} finally {
		isBox6InterpretLoading.value = false;
	}
};

const box6AreaList = ref([

]);
const box6selectetedTank = ref("全部智库");
const box6TankList = ref([
	{
		label: "兰德公司",
		value: "兰德公司"
	}
]);
function transformToChartFormat(data) {
	// 预设颜色池（可按需修改或扩展）
	const colorPalette = ["#4096FF", "#FFA39E", "#ADC6FF", "#FFC069", "#B5F5EC", "#B37FEB", "#D6E4FF", "#FF8C8C", "#87E8DE"];

	const list = Array.isArray(data) ? data.slice(0, 7) : [];
	return list.map((item, index) => ({
		name: item.industry,
		value: item.amount,
		color: colorPalette[index % colorPalette.length]
	}));
}
// 政策建议领域分布
const handleGetThinkTankPolicyIndustry = async () => {
	const params = {
		year: box6selectetedYear.value
	};
	try {
		const res = await getThinkTankPolicyIndustry(params);

		console.log("政策建议领域分布", res);
		if (res.code === 200 && res.data) {
			box6Data.value = transformToChartFormat(res.data);
			console.log(transformToChartFormat(res.data), "datadatadata");
		} else {
			box6Data.value = [];
		}
	} catch (error) {
		console.error("获取政策建议领域分布error", error);
		box6Data.value = [];
	}
};

const renderBox6Chart = () => {
	if (!hasBox6ChartData.value) {
		return;
	}
	const pieData = box6PieDisplayData.value;
	if (!pieData.length) {
		return;
	}
	const box6Chart = getPieChart(pieData);
	setChart(box6Chart, "box6Chart");
};

const handleBox6AreaChange = () => {
	aiContentBox6.value = "";
	renderBox6Chart();
};

const handleBox6 = async () => {
	box6selectetedArea.value = "全部领域";
	aiContentBox6.value = "";
	await handleGetThinkTankPolicyIndustry();
	renderBox6Chart();
};

// 智库资金流向
const box7Data = ref({
	nodes: [],
	links: []
});

/** 资金流向：有节点与连线时才展示桑基图 */
const hasBox7ChartData = computed(() => {
	const raw = box7Data.value;
	if (!raw || typeof raw !== "object") {
		return false;
	}
	const nodes = Array.isArray(raw.nodes) ? raw.nodes : [];
	const links = Array.isArray(raw.links) ? raw.links : [];
	return nodes.length > 0 && links.length > 0;
});

// 遍历每个智库
function transformDataToSankey(inputData) {
	const nodes = [];
	const links = [];

	// 遍历输入数据
	inputData.forEach(item => {
		const thinkTankName = item.thinkTankName;

		// 添加智库节点（如果尚未添加）
		if (!nodes.some(node => node.name === thinkTankName)) {
			nodes.push({ name: thinkTankName });
		}

		// 遍历捐赠来源
		item.thinkTankDonationSourceVOList.forEach(donation => {
			const institution = donation.institution;
			const secondInstitution = donation.secondInstitution;
			const amount = donation.amount;

			// 添加捐赠机构节点（如果尚未添加）
			if (!nodes.some(node => node.name === institution)) {
				nodes.push({ name: institution });
			}

			// 如果存在二级机构，也添加二级机构节点（如果尚未添加）
			if (secondInstitution && !nodes.some(node => node.name === secondInstitution)) {
				nodes.push({ name: secondInstitution });
			}

			// 添加链接
			if (secondInstitution) {
				// 如果存在二级机构，先从捐赠机构到二级机构
				if (institution !== secondInstitution) {
					// 检查自引用
					links.push({
						source: institution,
						target: secondInstitution,
						value: amount
					});
				}
				// 再从二级机构到智库
				if (secondInstitution !== thinkTankName) {
					// 检查自引用
					links.push({
						source: secondInstitution,
						target: thinkTankName,
						value: amount
					});
				}
			} else {
				// 如果没有二级机构，直接从捐赠机构到智库
				if (institution !== thinkTankName) {
					// 检查自引用
					links.push({
						source: institution,
						target: thinkTankName,
						value: amount
					});
				}
			}
		});
	});

	return { nodes, links };
}

// 智库资金流向
const handleGetThinkTankDonation = async () => {
	try {
		const res = await getThinkTankDonation();
		console.log("智库资金流向", res.data, transformDataToSankey(res.data));
		if (res.code === 200 && Array.isArray(res.data)) {
			box7Data.value = transformDataToSankey(res.data);
		} else {
			box7Data.value = { nodes: [], links: [] };
		}
	} catch (error) {
		console.error("获取智库资金流向error", error);
		box7Data.value = { nodes: [], links: [] };
	}
};
const handleBox7 = async () => {
	aiContentBox7.value = "";
	await handleGetThinkTankDonation();
	if (!hasBox7ChartData.value) {
		return;
	}
	const nodes = box7Data.value?.nodes ?? [];
	const links = box7Data.value?.links ?? [];
	const box7Chart = getSankeyChart(nodes, links);
	setChart(box7Chart, "box7Chart");
};

/** 请求 box7 智库资金流向桑基图解读（入参：{ text: JSON.stringify({ type, name, nodes, links }) }） */
const fetchBox7ChartInterpretation = async () => {
	const raw = box7Data.value;
	const nodes = Array.isArray(raw?.nodes) ? raw.nodes : [];
	const links = Array.isArray(raw?.links) ? raw.links : [];
	if (!nodes.length && !links.length) {
		aiContentBox7.value = "暂无图表数据";
		return;
	}
	const hasValidContent =
		aiContentBox7.value &&
		aiContentBox7.value !== "解读生成中…" &&
		aiContentBox7.value !== "解读加载失败" &&
		aiContentBox7.value !== "暂无图表数据";
	if (hasValidContent || isBox7InterpretLoading.value) {
		return;
	}
	isBox7InterpretLoading.value = true;
	aiContentBox7.value = "解读生成中…";
	const chartPayload = {
		type: "桑基图",
		name: "智库资金流向",
		nodes: nodes.map(n => ({ name: n.name })),
		links: links.map(l => ({
			source: l.source,
			target: l.target,
			value: l.value
		}))
	};
	try {
		const res = await getChartAnalysis(
			{ text: JSON.stringify(chartPayload) },
			{
				onChunk: chunk => {
					appendAiInterpretationChunk(aiContentBox7, chunk);
				}
			}
		);
		const text = getInterpretationTextFromChartResponse(res);
		aiContentBox7.value = text || aiContentBox7.value || "未返回有效解读内容";
	} catch (error) {
		console.error("智库资金流向图表解读请求失败", error);
		aiContentBox7.value = "解读加载失败";
	} finally {
		isBox7InterpretLoading.value = false;
	}
};

// 智库研究热点
const box8Data = ref([
	// {
	// 	title: "人工智能领域竞争发展",
	// 	report: "11份报告"
	// },
	// {
	// 	title: "美元未来与能源出口挂钩",
	// 	report: "7份报告"
	// },
	// {
	// 	title: "量子领域国家合作",
	// 	report: "5份报告"
	// },
	// {
	// 	title: "限制中国产燃油进口",
	// 	report: "5份报告"
	// },
	// {
	// 	title: "禁止政府部门采购受控半导体或服务",
	// 	report: "4份报告"
	// },
	// {
	// 	title: "禁止向部分中国实体提供资金",
	// 	report: "3份报告"
	// },
	// {
	// 	title: "中国生产电池",
	// 	report: "2份报告"
	// },
	// {
	// 	title: "重视新兴中国技术公司威胁",
	// 	report: "2份报告"
	// },
	// {
	// 	title: "禁止卫星出口至中国",
	// 	report: "1份报告"
	// },
	// {
	// 	title: "华为设备",
	// 	report: "1份报告"
	// }
]);

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

function changeBox8Data(value) {
	handleGetThinkTankHot(getDateYearsAgo(value));
}

//智库研究热点
const handleGetThinkTankHot = async date => {
	try {
		const res = await getThinkTankHot(date);
		console.log("智库研究热点", res);
		if (res.code === 200 && res.data) {
			box8Data.value = res.data;
		} else {
			box8Data.value = [];
		}
	} catch (error) {
		console.error("获取智库研究热点error", error);
	}
};

// 资源库
const categoryList = ref(["智库报告", "调查项目", "国会听证会", "政策建议"]);
const activeCate = ref("智库报告");
const resourceTabResetKey = ref(0)

const resetResourceTabCommon = () => {
	// 统一回到“刷新后刚加载出来的状态”
	// 分页归 1，排序占位「发布时间」且默认倒序（null），与智库动态一致
	currentPage.value = 1
	sort.value = null

	surveyCurrentPage.value = 1
	surveySort.value = null

	policyCurrentPage.value = 1
	policySort.value = null

	congressResourceSort.value = null

	// 强制重置那些在子组件内部维护状态的组件（国会听证会/政策建议筛选）
	resourceTabResetKey.value += 1
}

const resetThinkTankReportFilters = () => {
	selectedAreaList.value = [RESOURCE_FILTER_ALL_AREA];
	selectedPubTimeList.value = [RESOURCE_FILTER_ALL_TIME];
};

const resetSurveyFilters = () => {
	surveySelectedAreaList.value = [RESOURCE_FILTER_ALL_AREA];
	surveySelectedPubTimeList.value = [RESOURCE_FILTER_ALL_TIME];
};

const resetPolicyFilters = () => {
	// 与资源库勾选一致：子组件 remount 后为「全部领域 + 全部时间」，此处用空数组表示不按具体 id 过滤（接口侧走全量/默认年）
	policySelectedTypeIds.value = [];
	policySelectedYearIds.value = [];
};

const handleClickCate = cate => {
	activeCate.value = cate;
	// 切换到不同分类时，触发对应数据加载，且互不影响
	if (cate === "智库报告") {
		resetResourceTabCommon()
		resetThinkTankReportFilters()
		handleGetetThinkTankReport();
	} else if (cate === "调查项目") {
		resetResourceTabCommon()
		resetSurveyFilters()
		handleGetThinkTankSurvey();
	} else if (cate === "政策建议") {
		resetResourceTabCommon()
		resetPolicyFilters()
		handleGetThinkTankPolicyAdvice();
	} else if (cate === "国会听证会") {
		resetResourceTabCommon()
	}
};

const areaList = ref([
	// {
	// 	id: "全部领域",
	// 	name: "全部领域"
	// },
	// "通信网络",
	// "量子科技",
	// "能源"
]);

//获取行业领域字典
// getHylyList
const handleGetHylyList = async () => {
	try {
		const res = await getHylyList();
		console.log("行业领域字典", res);
		if (res.code === 200 && res.data) {
			areaList.value = res.data;
		}
	} catch (error) {
		console.error("获取行业领域字典error", error);
	}
};
// 查看社交媒体详情
const handleToSocialDetail = item => {
	const route = router.resolve({
		path: "/characterPage",
		query: {
			personId: item.id
		}
	});
	window.open(route.href, "_blank");
};
const selectedAreaList = ref([RESOURCE_FILTER_ALL_AREA]);

/** 资源库-智库报告：筛选变更（与政策追踪相同的「全部」互斥后）重置页码并请求 */
const handleThinkTankReportFilterChange = () => {
	currentPage.value = 1;
	handleGetetThinkTankReport();
};

const pubTimeList = ref([
	{
		id: 2025,
		name: "2025"
	},
	{
		id: 2024,
		name: "2024"
	},
	{
		id: 2023,
		name: "2023"
	},
	{
		id: 2022,
		name: "2022"
	},
	{
		id: 2021,
		name: "2021"
	},
	{
		id: RESOURCE_FILTER_EARLIER,
		name: RESOURCE_FILTER_EARLIER
	}
]);
const selectedPubTimeList = ref([RESOURCE_FILTER_ALL_TIME]);
/** null：占位「发布时间」且默认倒序；true 正序；false 倒序（显式），与智库动态一致 */
const sort = ref(null);

/** 国会听证会无列表接口排序，仅保持与动态相同的排序控件展示与交互 */
const congressResourceSort = ref(null);

const resourceLibrarySortPopperOptions = {
	modifiers: [
		{ name: "preventOverflow", options: { mainAxis: false, altAxis: false } },
		{ name: "flip", enabled: false }
	]
};

const resourceLibrarySortModel = computed({
	get() {
		if (activeCate.value === "调查项目") {
			return surveySort.value;
		}
		if (activeCate.value === "政策建议") {
			return policySort.value;
		}
		if (activeCate.value === "国会听证会") {
			return congressResourceSort.value;
		}
		return sort.value;
	},
	set(v) {
		if (activeCate.value === "调查项目") {
			surveySort.value = v;
		} else if (activeCate.value === "政策建议") {
			policySort.value = v;
		} else if (activeCate.value === "国会听证会") {
			congressResourceSort.value = v;
		} else {
			sort.value = v;
		}
	}
});

const handleResourceLibrarySortChange = () => {
	if (activeCate.value === "调查项目") {
		handleGetThinkTankSurvey();
	} else if (activeCate.value === "政策建议") {
		handleGetThinkTankPolicyAdvice();
	} else if (activeCate.value === "国会听证会") {
		return;
	} else {
		handleGetetThinkTankReport();
	}
};

const toggleResourceLibrarySortPrefix = () => {
	if (activeCate.value === "调查项目") {
		surveySort.value = surveySort.value === true ? false : true;
		handleGetThinkTankSurvey();
	} else if (activeCate.value === "政策建议") {
		policySort.value = policySort.value === true ? false : true;
		handleGetThinkTankPolicyAdvice();
	} else if (activeCate.value === "国会听证会") {
		congressResourceSort.value = congressResourceSort.value === true ? false : true;
	} else {
		sort.value = sort.value === true ? false : true;
		handleGetetThinkTankReport();
	}
};

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 currentPage = ref(1);
const total = ref(0);

// ===== 调查项目：独立状态（不影响智库报告）=====
const surveySelectedAreaList = ref([RESOURCE_FILTER_ALL_AREA]);
const surveySelectedPubTimeList = ref([RESOURCE_FILTER_ALL_TIME]);
const surveySort = ref(null);
const surveyFooterList = ref([]);
const surveyCurrentPage = ref(1);
const surveyTotal = ref(0);

const handleSurveyFilterChange = () => {
	surveyCurrentPage.value = 1;
	handleGetThinkTankSurvey();
};

const handleSurveyCurrentChange = page => {
	surveyCurrentPage.value = page;
	handleGetThinkTankSurvey();
};

const handleGetThinkTankSurvey = async () => {
	const { startDate, endDate } = getResourceLibraryReportDateRangeFromTimeSelection(
		stripAllTimeForRequest(surveySelectedPubTimeList.value),
		(pubTimeList.value || []).map((x) => x.id)
	);
	const params = {
		pageNum: surveyCurrentPage.value,
		pageSize: 12,
		sortFun: surveySort.value === true,
		domainIds: (() => {
			const areas = stripAllAreaForRequest(surveySelectedAreaList.value);
			const allAreaIds = (areaList.value || []).map((a) => a.id);
			if (isSelectionCoveringAllOptions(areas, allAreaIds)) {
				return "";
			}
			return arrayToString(areas);
		})(),
		startDate,
		endDate,
		category: "调查项目"
	};
	try {
		const res = await getThinkTankReport(params);
		if (res.code === 200 && res.data) {
			surveyFooterList.value = res.data.content;
			surveyTotal.value = res.data.totalElements;
		} else {
			surveyFooterList.value = [];
			surveyTotal.value = 0;
		}
	} catch (error) {
		console.error("获取调查项目 error", error);
	}
};

// ===== 政策建议：独立状态（不影响智库报告/调查项目）=====
const policyFooterList = ref([]);
const policyCurrentPage = ref(1);
const policyTotal = ref(0);
const policySort = ref(null);
const policySelectedTypeIds = ref([]);
const policySelectedYearIds = ref([]);

const handlePolicyFilterChange = payload => {
	// 子组件 ThinkTankPolicyAdviceOverview 传 researchTypeIds（与智库报告筛选一致）
	const typeIds = payload?.researchTypeIds ?? payload?.domainIds;
	policySelectedTypeIds.value = Array.isArray(typeIds) ? [...typeIds] : [];
	policySelectedYearIds.value = payload?.researchTimeIds ? [...payload.researchTimeIds] : [];
	policyCurrentPage.value = 1;
	handleGetThinkTankPolicyAdvice();
};

const handlePolicyCurrentChange = page => {
	policyCurrentPage.value = page;
	handleGetThinkTankPolicyAdvice();
};

const handleGetThinkTankPolicyAdvice = async () => {
	const mockPolicyAdviceList = () => ([
		{
			id: 23702,
			content: "研究未来AI数据中心电力需求与供应",
			imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg",
			name: "指数级增长下AI的电力需求：外推AI数据中心的电力需求并评估其对美国竞争力的潜在影响",
			reportId: "Rand_RRA3572-1",
			tagList: ["新能源", "人工智能"],
			thinkTankName: null,
			times: "2025-12-28"
		},
		{ id: 23703, content: "构建可信任的AI治理框架：监管与创新的平衡", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "AI治理路线图：从风险评估到合规落地的实践建议", reportId: "Rand_RRA3572-2", tagList: ["人工智能", "网络安全"], thinkTankName: null, times: "2025-12-21" },
		{ id: 23704, content: "先进制造供应链韧性评估与关键节点识别", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "供应链韧性：关键材料、关键设备与关键人才的系统性策略", reportId: "Rand_RRA3572-3", tagList: ["先进制造", "新材料"], thinkTankName: null, times: "2025-12-14" },
		{ id: 23705, content: "半导体出口管制对产业生态的中长期影响", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "出口管制与产业政策：如何降低对关键环节的外部依赖", reportId: "Rand_RRA3572-4", tagList: ["集成电路", "先进制造"], thinkTankName: null, times: "2025-12-07" },
		{ id: 23706, content: "量子信息技术发展态势与应用落地路径", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "量子科技：从基础研究到产业化的阶段性里程碑", reportId: "Rand_RRA3572-5", tagList: ["量子科技", "前沿基础"], thinkTankName: null, times: "2025-11-30" },
		{ id: 23707, content: "网络安全威胁图谱：关键基础设施的攻击面", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "关键基础设施安全：供应链、身份与数据的三重防护", reportId: "Rand_RRA3572-6", tagList: ["网络安全", "数据安全"], thinkTankName: null, times: "2025-11-23" },
		{ id: 23708, content: "生物技术与医疗创新的监管协同机制", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "生物科技创新：试验、审批与产业化的全流程政策工具箱", reportId: "Rand_RRA3572-7", tagList: ["生物科技", "医疗健康"], thinkTankName: null, times: "2025-11-16" },
		{ id: 23709, content: "清洁能源转型下的电网规划与储能配置", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "能源系统转型：电网升级、储能布局与成本测算", reportId: "Rand_RRA3572-8", tagList: ["新能源", "储能"], thinkTankName: null, times: "2025-11-09" },
		{ id: 23710, content: "新材料在国防与先进制造中的应用瓶颈", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "关键新材料：验证体系、规模化与供应链安全", reportId: "Rand_RRA3572-9", tagList: ["新材料", "先进制造"], thinkTankName: null, times: "2025-11-02" },
		{ id: 23711, content: "通信网络演进：6G 与卫星互联网的融合", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "下一代通信：频谱、标准与产业联盟策略", reportId: "Rand_RRA3572-10", tagList: ["通信网络", "卫星互联网"], thinkTankName: null, times: "2025-10-26" },
		{ id: 23712, content: "数据要素市场建设与跨境数据合规路径", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "数据治理与合规：分类分级、出境评估与执法协同", reportId: "Rand_RRA3572-11", tagList: ["数据安全", "数字治理"], thinkTankName: null, times: "2025-10-19" },
		{ id: 23713, content: "AI 研发人才供需缺口与教育体系对接", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "AI 人才战略：培养、引进与留用的组合政策", reportId: "Rand_RRA3572-12", tagList: ["人工智能", "人才政策"], thinkTankName: null, times: "2025-10-12" },
		{ id: 23714, content: "自动驾驶安全监管与测试评价体系", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "自动驾驶：安全标准、责任划分与道路试点机制", reportId: "Rand_RRA3572-13", tagList: ["智能网联", "交通出行"], thinkTankName: null, times: "2025-10-05" },
		{ id: 23715, content: "关键基础设施数字化升级的投融资机制", imageUrl: "https://www.rand.org/content/rand/pubs/research_reports/RRA3572-1/jcr:content/par/teaser.crop.1200x900.cm.jpeg/1738160125961.jpeg", name: "基础设施升级：公共资金撬动与绩效评估体系", reportId: "Rand_RRA3572-14", tagList: ["数字化转型", "基础设施"], thinkTankName: null, times: "2025-09-28" }
	]);
	const applyMockPolicyAdvice = () => {
		const mock = mockPolicyAdviceList();
		policyTotal.value = mock.length;
		const pageSize = 7;
		const page = Math.max(1, Number(policyCurrentPage.value) || 1);
		const start = (page - 1) * pageSize;
		policyFooterList.value = mock.slice(start, start + pageSize);
	};

	const strippedPolicyYears = stripAllTimeForRequest(policySelectedYearIds.value);
	const allPubTimeIds = (pubTimeList.value || []).map((x) => x.id);
	/** 与智库报告一致：仅「全部时间」或选满所有具体年份 → 不按 years 狭义过滤 */
	const isPolicyAllTime =
		strippedPolicyYears.length === 0 ||
		(allPubTimeIds.length > 0 && isSelectionCoveringAllOptions(strippedPolicyYears, allPubTimeIds));
	const typeIdsForApi = stripAllAreaForRequest(policySelectedTypeIds.value);
	// 领域：未选具体领域（仅「全部领域」）时传全量 id 串
	const effectiveDomainIds = typeIdsForApi.length
		? typeIdsForApi
		: (areaList.value || []).map(obj => obj.id);
	const domainIdsStr = arrayToString(effectiveDomainIds);
	const params = {
		currentPage: policyCurrentPage.value - 1,
		pageSize: 7,
		sortFun: policySort.value === true
	};
	// 全部时间：不传 years，避免误用首项年份（如仅查 2025）
	if (!isPolicyAllTime) {
		const yearsStr = buildNumericYearsQueryString(strippedPolicyYears);
		if (yearsStr) {
			params.years = yearsStr;
		}
	}
	// 领域：始终传 domainIds；如果用户没选，就传“全部领域”的 id 串
	params.domainIds = domainIdsStr || null;
	try {
		const res = await getThinkTankOverviewPolicy(params);
		if (res.code === 200 && res.data) {
			// /thinkTankOverview/policy 返回：data.content[{id,title,content,date,coverImage,domains,...}]
			const mapped = (res.data.content || []).map(item => ({
				// 兼容你需要的结构（更接近政策追踪）
				id: item.id,
				content: item.content,
				name: item.title,
				reportName: item.reportName,
				times: item.date,
				imageUrl: item.coverImage,
				tagList: item.domains || [],
				thinkTankName: item.thinkTankName ?? null,
				reportId: item.reportId ?? item.id,
				// 保留原字段备用
				billInfoList: item.billInfoList,
				administrativeOrderInfoVOList: item.administrativeOrderInfoVOList
			}));

			if (!mapped.length) {
				applyMockPolicyAdvice();
				return;
			}

			policyFooterList.value = mapped;
			policyTotal.value = res.data.totalElements || mapped.length;
		} else {
			applyMockPolicyAdvice();
		}
	} catch (error) {
		applyMockPolicyAdvice();
		console.error("获取政策建议 error", error);
	}
};
// 处理页码改变事件
const handleCurrentChange = page => {
	console.log(page, "pagepagepage");
	currentPage.value = page;
	handleGetetThinkTankReport();
};
function arrayToString(arr) {
	return arr.reduce((acc, item) => {
		if (item !== null && item !== undefined && item !== "") {
			return acc === "" ? item : acc + "," + item;
		}
		return acc;
	}, "");
}

//获取智库报告
const handleGetetThinkTankReport = async () => {
	const { startDate, endDate } = getResourceLibraryReportDateRangeFromTimeSelection(
		stripAllTimeForRequest(selectedPubTimeList.value),
		(pubTimeList.value || []).map((x) => x.id)
	);
	const params = {
		pageNum: currentPage.value,
		pageSize: 12,
		sortFun: sort.value === true,
		domainIds: (() => {
			const areas = stripAllAreaForRequest(selectedAreaList.value);
			const allAreaIds = (areaList.value || []).map((a) => a.id);
			if (isSelectionCoveringAllOptions(areas, allAreaIds)) {
				return "";
			}
			return arrayToString(areas);
		})(),
		startDate,
		endDate
	};
	try {
		const res = await getThinkTankReport(params);
		console.log("智库报告", res);
		if (res.code === 200 && res.data) {
			curFooterList.value = res.data.content;
			total.value = res.data.totalElements;
		}
	} catch (error) {
		console.error("获取智库报告error", error);
	}
};

const handleClick = tank => {
	console.log(tank);
	window.sessionStorage.setItem("curTabName", tank.name + "概览");
	// router.push({ name: "ThinkTankDetail", params: { id: tank.id } });
	if (!tank.id) {
		ElMessage.warning("当前智库id为空,无法进入详情页");
		return;
	}
	const curRoute = router.resolve({ name: "ThinkTankDetail", params: { id: tank.id, name: tank.name } });
	window.open(curRoute.href, "_blank");
};

// 查看更多风险信号
const handleToMoreRiskSignal = () => {
	const route = router.resolve("/viewRiskSignal");
	window.open(route.href, "_blank");
};

// 查看更多新闻资讯
const handleToMoreNews = () => {
	const route = router.resolve("/newsBrief");
	window.open(route.href, "_blank");
};

// 点击人物头像，跳转到人物主页
const handleClickPerson = async item => {
	console.log("person", item);
	const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));
	console.log("personTypeList", personTypeList);

	let type = 0;
	let personTypeName = "";

	const params = {
		personId: item.personId
	};
	try {
		const res = await getPersonSummaryInfo(params);
		console.log("人物全局信息", res);
		if (res.code === 200 && res.data) {
			const arr = personTypeList.filter(item => {
				return item.typeId === res.data.personType;
			});
			console.log("arr", arr);

			if (arr && arr.length > 0) {
				personTypeName = arr[0].typeName;
				console.log("personTypeName", personTypeName);

				if (personTypeName === "科技企业领袖") {
					type = 1;
				} else if (personTypeName === "国会议员") {
					type = 2;
				} else if (personTypeName === "智库研究人员") {
					type = 3;
				} else {
					personTypeName = "";
					ElMessage.warning("找不到当前人员的类型值！");
					return;
				}
				window.sessionStorage.setItem("curTabName", item.personName);
				const route = router.resolve({
					path: "/characterPage",
					query: {
						type: type, // type=1为科技企业领袖，2为国会议员，3为智库研究人员
						personId: item.personId
					}
				});
				window.open(route.href, "_blank");
			} else {
				personTypeName = "";
				ElMessage.warning("找不到当前人员的类型值！");
				return;
			}
		} else {
			ElMessage.warning("找不到当前人员的类型值！");
			return;
		}
	} catch (error) { }
};

// 点击新闻条目，跳转到新闻分析页
const handleToNewsAnalysis = news => {
	const route = router.resolve({
		path: "/newsAnalysis",
		query: {
			newsId: news.newsId
		}
	});
	window.open(route.href, "_blank");
};

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 handleSearch = () => {
	window.sessionStorage.setItem("curTabName", `搜索-${searchThinktankText.value}`);
	const curRoute = router.resolve({
		path: "/searchResults",
		query: {
			searchText: searchThinktankText.value,
			areaName: "智库"
		}
	});
	window.open(curRoute.href, "_blank");
};

onMounted(async () => {
	handleGetThinkTankList();
	handleGetAllThinkTankList()
	await getStatCountInfo();
	// 定义一个定时器，每隔2秒轮播一次
	setInterval(() => {
		// 索引加1
		box1DataIndex.value++;
		// 如果索引大于等于数组长度，重置为0，实现循环轮播
		if (box1DataIndex.value >= box1Data.value.length) {
			box1DataIndex.value = 0;
		}
	}, 3000); // 2000毫秒，即2秒
	handleGetNewReport();
	handleGetThinkTankRiskSignal();

	handleBox5(box5selectetedYear.value);
	handleBox6();
	handleBox7();
	handleGetHylyList();
	handleGetThinkTankHot(getDateYearsAgo(1));
	handleGetetThinkTankReport();
	handleGetThinkTankReportNews();
	handleGetThinkTankReportRemarks();
});
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
	box-shadow: none;
}

.home-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	overflow-y: hidden;

	.search-header {
		width: 100%;
		background: #fff;
		overflow: hidden;
		box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);

		.search-header-container {
			width: 1600px;
			margin: 0 auto;
			padding: 16px 0px 16px 0px;
		}

		.home-main-header-center {
			width: 800px;
			height: 48px;
			border-radius: 10px;
			// box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
			border: 1px solid var(--color-primary-35);
			background: rgba(255, 255, 255, 1);
			box-sizing: border-box;
			padding: 1px;
			position: relative;

			.think-tank-search :deep(::placeholder) {
				font-size: 20px !important;
				/* !important 确保优先级高于子组件原有样式 */
			}

			&:hover {
				border: 1px solid var(--color-main-active);
			}

			.search {
				position: absolute;
				right: -1px;
				top: 0px;
				width: 120px;
				height: 46px;
				border-radius: 10px;
				background: var(--color-main-active);
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;

				.search-icon {
					width: 18px;
					height: 18px;

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

				.search-text {
					margin-left: 8px;
					height: 22px;
					color: #fff;
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 22px;
				}
			}
		}

		.home-main-header-btn-box {
			margin-top: 16px;
			// margin-left: 200px;
			display: flex;
			gap: 16px;

			.btn {
				display: flex;
				align-items: center;
				gap: 9px;
				width: 140px;
				height: 36px;
				border: 1px solid #aed6ff;
				box-sizing: border-box;
				border-radius: 24px;
				background: #e7f3ff;
				cursor: pointer;
				position: relative;

				&:hover {
					background: #cae3fc;
				}

				.btn-text {
					width: 80px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: 400;
					line-height: 48px;
					margin-left: 24px;
					text-align: center;
				}

				.btn-icon {
					position: absolute;
					top: 10px;
					right: 19px;
					width: 6px;
					height: 12px;

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

	.home-main {
		position: relative;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		// background: url("./assets/images/background.png");
		background-size: 100% 100%;

		.home-top-bg {
			background:
				url("./assets/images/background.png"),
				linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
			background-size: 100% 100%;
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: -100;
			top: -64px;
		}

		.home-main-header {
			display: flex;
			flex-direction: column;
			align-items: center;

			.home-main-header-top {
				box-sizing: border-box;
				width: 100%;
				height: 64px;
				background: url("./assets/images/header-bg.png");
				display: flex;
				justify-content: space-between;
				padding: 0 160px;
			}

			.home-main-header-footer {
				margin-top: 38px;
				width: 688px;
				height: 64px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.home-main-header-footer-item {
					padding: 0 10px;
					text-align: center;

					.item-top {
						height: 22px;
						color: rgba(20, 89, 187, 1);
						font-family: Microsoft YaHei;
						font-size: 36px;
						font-weight: 700;
						line-height: 22px;
					}

					.item-footer {
						margin-top: 10px;
						height: 30px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
					}
				}
			}

			.home-main-header-btn-box {
				width: 688px;
				margin: 0 auto;
				margin-top: 39px;
				display: flex;
				justify-content: space-between;

				.btn {
					display: flex;
					align-items: center;
					gap: 9px;
					width: 160px;
					height: 48px;
					border: 1px solid #aed6ff;
					box-sizing: border-box;
					border-radius: 24px;
					background: #e7f3ff;
					cursor: pointer;
					position: relative;

					&:hover {
						background: #cae3fc;
					}

					.btn-text {
						width: 80px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 400;
						line-height: 48px;
						margin-left: 36px;
						text-align: center;
					}

					.btn-icon {
						position: absolute;
						top: 16px;
						right: 19px;
						width: 6px;
						height: 12px;

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

			.title-info-bar {
				width: 1600px;
				height: 36px;
				margin-top: 64px;
				display: flex;
				justify-content: space-between;

				.time-tab-pane {
					width: 248px;
					height: 36px;
				}

				.title-info {
					height: 24px;
					margin-top: 6px;
					display: flex;

					.info {
						width: 16px;
						height: 16px;
						margin-top: 4px;
						margin-right: 8px;

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

					.title {
						font-family: "Source Han Sans CN";
						font-weight: 400;
						font-size: 18px;
						line-height: 24px;
						letter-spacing: 0;
						text-align: left;
						color: rgb(59, 65, 75);
					}
				}
			}

			.home-main-header-card-box {
				margin-top: 30px;

				display: flex;
				justify-content: space-between;
				gap: 16px;
				position: relative;

				overflow: visible;

				.card {
					width: 253px;
					height: 228px;
					box-sizing: border-box;
					border: 1px solid rgba(255, 255, 255, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 0.65);
					transition: all 0.3s;
					cursor: pointer;
					position: relative; // 让 red-info 按当前 card 自身定位


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

					.red-info {
						color: rgb(255, 255, 255);
						display: inline-flex;

						position: absolute;
						left: 233px;
						bottom: 208px;
						background-color: rgba(255, 77, 79, 1);
						align-items: center;
						justify-content: center;
						border-radius: 50px;
						border: 1px solid rgb(255, 255, 255);
						width: auto;
						font-family: "Source Han Sans CN";
						font-weight: 700;
						font-size: 18px;
						line-height: 24px;
						letter-spacing: 0px;

						padding: 2px 8px;
						/* 左右留空隙，更美观 */
						white-space: nowrap;
						z-index: 10;
					}

					.card-header {
						display: flex;
						height: 32px;
						margin-top: 19px;
						margin-left: 20px;
						justify-content: space-between;

						.icon {
							width: 32px;
							height: 32px;

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

						.rank {
							width: 180px;
							height: 32px;
							background: linear-gradient(270deg, rgba(5, 95, 194, 0.1), rgba(5, 95, 194, 0) 100%);

							.number {
								font-family: "Source Han Sans CN";
								font-weight: 700;
								font-size: 18px;
								line-height: 24px;
								letter-spacing: 0;
								text-align: right;
								width: 136px;
								margin-top: 4px;
								margin-left: 26px;
								color: rgb(5, 95, 194);
							}
						}



					}

					.card-title {
						margin-top: 13px;
						display: flex;
						margin-left: 20px;
						margin-right: 21px;
						justify-content: space-between;

						.title-left {

							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: "Source Han Sans CN";
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}

						.title-right {
							height: 22px;
							color: rgba(132, 136, 142, 1);
							font-family: "Source Han Sans CN";
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
							letter-spacing: 0px;
							text-align: right;
							margin-top: 1px;
						}
					}

					.content {
						margin-left: 20px;
						margin-top: 13px;
						margin-bottom: 18px;
						width: 212px;
						height: 66px;
						color: rgba(95, 101, 108, 1);
						font-family: "Source Han Sans CN";
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: justify;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.tag-box {
						margin-left: 20px;
						margin-right: 21px;
						margin-bottom: 21px;
						display: flex;
						gap: 8px;
						height: 24px;
						display: flex;
						flex-wrap: wrap;
						/* 允许换行 */
						gap: 8px;
						overflow: auto;
						/* 根据内容自动调整高度 */
						// max-width: calc(3 * 40px + 2 * 8px);
						/* 每行 3 列，每个 tag 最大宽度 200px，gap 8px */

						.tag {
							// width: auto; /* 根据内容自动调整宽度 */
							height: 22px;
							padding: 0 8px;
							box-sizing: border-box;
							border-radius: 4px;
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 20px;
							white-space: nowrap;
							/* 不换行 */
							box-sizing: border-box;
							border: 1px solid rgba(186, 224, 255, 1);
							border-radius: 4px;
							background: rgba(230, 244, 255, 1);
							color: rgba(22, 119, 255, 1);
							font-family: Microsoft YaHei;
							font-style: Regular;
							font-size: 14px;
							font-weight: 400;
							line-height: 20px;
							letter-spacing: 0px;
							text-align: left;
						}

						.tag1 {
							box-sizing: border-box;
							border: 1px solid rgba(135, 232, 222, 1);
							border-radius: 4px;
							background: rgba(230, 255, 251, 1);
							color: rgba(19, 168, 168, 1);
						}

						.tag2 {
							box-sizing: border-box;
							border: 1px solid rgba(186, 224, 255, 1);
							border-radius: 4px;
							background: rgba(230, 244, 255, 1);
							color: rgba(22, 119, 255, 1);
						}

						.tag3 {
							box-sizing: border-box;
							border: 1px solid rgba(255, 229, 143, 1);
							border-radius: 4px;
							background: rgba(255, 251, 230, 1);
							color: rgba(250, 173, 20, 1);
						}

						.tag4 {
							box-sizing: border-box;
							border: 1px solid rgba(255, 163, 158, 1);
							border-radius: 4px;
							background: rgba(255, 241, 240, 1);
							color: rgba(245, 34, 45, 1);
						}
					}

					.more {
						margin: 103px auto;
						height: 24px;
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 1px;
						text-align: center;
						cursor: pointer;
						display: flex;
						justify-content: center;
						/* 👈 水平居中 */

						.blue-right {
							width: 16px;
							height: 16px;
							margin-top: 5px;
							margin-left: 8px;

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

		.home-main-center {

			.center-top {
				height: 450px;
				display: flex;
				justify-content: center;
				gap: 16px;

				.box1 {
					width: 1063px;
					height: 450px;
					box-shadow: 0px 0px 20px 0px rgba(22, 69, 130, 0.1);
					background: #fff;
					box-sizing: border-box;
					border-radius: 10px;
					position: relative;
					border: 1px solid rgb(234, 236, 238);

					.box1-left {
						position: absolute;
						left: 0;
						top: 220px;
						width: 24px;
						height: 48px;
						cursor: pointer;
						z-index: 10000;

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

					.box1-right {
						position: absolute;
						right: 0;
						top: 220px;
						width: 24px;
						height: 48px;
						cursor: pointer;
						z-index: 10000;

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

					.box1-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						justify-content: space-between;

						.box1-header-left {
							display: flex;

							.icon {
								width: 24px;
								height: 24px;
								margin-left: 17px;
								margin-top: 11px;

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

							.title-box {
								width: 112px;
								height: 48px;
								margin-left: 19px;

								background: var(--color-main-active);
								display: flex;
								align-items: center;
								justify-content: center;


								.title {
									color: rgb(255, 255, 255);
									font-family: "Source Han Sans CN";
									font-size: 20px;
									font-weight: 700;
									line-height: 26px;
									text-align: left;
									letter-spacing: 0;
									width: 80px;
									height: 26px;

								}
							}
						}

						.box1-header-right {
							margin-top: 12px;
							height: 16px;
							color: var(--color-main-active);
							font-family: "Source Han Sans CN";
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
							margin-right: 27px;
							letter-spacing: 0;
						}
					}

					.box1-main {
						margin-top: 24px;
						margin-left: 62px;
						width: 948px;
						height: 353px;
						display: flex;
						gap: 28px;

						.box1-main-left {
							width: 458px;
							height: 353px;
							border-radius: 4px;

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

						.box1-main-right {
							width: 462px;

							.title {
								width: 462px;
								max-height: 52px;
								height: 52px;
								overflow: hidden;
								color: rgba(59, 65, 75, 1);
								font-family: "Source Han Sans CN";
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
								letter-spacing: 0px;
								text-align: justify;
							}

							.tag-box {
								width: 462px;
								height: 26px;
								overflow: hidden;
								margin-top: 16px;
								display: flex;
								gap: 8px;

								.tag {
									height: 26px;
									padding: 0 8px;
									box-sizing: border-box;
									border: 1px solid rgba(231, 243, 255, 1);
									border-radius: 4px;
									background: rgba(246, 250, 255, 1);
									color: var(--color-main-active);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
								}
							}

							.name {
								display: flex;


								height: 24px;
								margin-top: 22px;
								justify-content: space-between;

								.logo-title-box {
									display: flex;
									height: 24px;
									width: 211px;


									.logo {
										width: 16px;
										height: 16px;
										margin-top: 5px;
										flex: 0 0 16px;
										margin-right: 6px;


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

										}
									}

									.title {
										color: rgb(59, 65, 75);
										font-family: "Source Han Sans CN";
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										letter-spacing: 0px;
										text-align: left;
									}
								}




								.time {
									height: 24px;
									color: rgb(59, 65, 75);
									font-family: "Source Han Sans CN";
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
								}

							}

							.content {
								width: 462px;
								height: 187px;
								margin-top: 22px;
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 6;
								line-height: 30px;
								word-break: break-all;
								color: rgb(59, 65, 75);
								font-family: "Source Han Sans CN";
								font-size: 16px;
								font-weight: 400;
								letter-spacing: 0px;
								text-align: left;

							}
						}
					}
				}

				.box2 {
					width: 521px;
					height: 450px;
					box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
					background: rgba(255, 255, 255, 1);
					position: relative;
					border-radius: 10px;

					.box2-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;

						.icon {
							width: 24px;
							height: 22px;
							margin-left: 18px;
							margin-top: 14px;

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

						.title {
							display: flex;
							width: 148px;
							height: 48px;
							background: rgba(206, 79, 81, 1);
							margin-left: 18px;

							.text {
								margin-left: 15px;
								margin-top: 13px;
								height: 22px;
								color: #fff;
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 22px;
							}

							.num {
								width: 24px;
								height: 20px;
								line-height: 20px;
								text-align: center;
								color: rgba(255, 255, 255, 1);
								font-family: Microsoft YaHei;
								font-size: 12px;
								margin-left: 15px;
								margin-top: 14px;
								border-radius: 100px;
								background: rgba(255, 255, 255, 0.3);
							}
						}

						.more {
							margin-top: 16px;
							margin-left: 200px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 16px;
							cursor: pointer;
						}
					}

					.box2-main {
						margin-top: 2px;
						height: 330px;
						overflow-y: auto;

						.box2-main-item {
							margin-left: 23px;
							height: 47px;
							width: 464px;
							display: flex;
							cursor: pointer;

							&:hover {
								background: var(--color-bg-hover);
							}

							.item-left {
								margin-top: 4px;
								margin-left: 2px;
								width: 40px;
								height: 40px;
								border-radius: 20px;
								font-family: Microsoft YaHei;
								font-size: 12px;
								font-weight: 400;
								line-height: 14px;
								box-sizing: border-box;
								padding: 6px 4px;
								text-align: center;
							}

							.itemLeftStatus1 {
								color: rgba(82, 196, 26, 1) !important;
								background: rgba(246, 255, 237, 1) !important;
							}

							.itemLeftStatus2 {
								color: rgba(250, 140, 22, 1) !important;
								background: rgba(255, 247, 230, 1) !important;
							}

							.itemLeftStatus3 {
								color: rgba(245, 34, 45, 1);
								background: rgba(255, 241, 240);
							}

							.item-right {
								margin-left: 13px;
								width: 408px;
								height: 47px;
								border-bottom: 1px solid rgba(240, 242, 244, 1);
								display: flex;

								.text {
									width: 315px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 47px;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.time {
									width: 90px;
									margin-left: 10px;
									line-height: 47px;
									color: rgba(132, 136, 142, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
								}
							}
						}
					}

					.box2-footer {
						position: absolute;
						left: 30px;
						bottom: 20px;
						width: 460px;
						height: 42px;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						border-radius: 6px;
						background: var(--color-main-active);
						gap: 8px;
						cursor: pointer;

						.icon {
							width: 16px;
							height: 16px;

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

						.text {
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 22px;
						}
					}
				}
			}

			.center-center {
				margin-top: 21px;
				gap: 20px;
				height: 450px;
				display: flex;
				justify-content: center;

				.box3 {
					width: 792px;
					height: 450px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
					background: rgba(255, 255, 255, 1);

					.box3-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;

						.box3-header-left {
							display: flex;

							.box3-header-icon {
								margin-top: 16px;
								width: 19px;
								height: 19px;

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

							.box3-header-title {
								margin-top: 16px;
								margin-left: 19px;
								height: 22px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 20px;
								font-weight: 700;
								line-height: 22px;
							}

							.more {
								width: 49px;
								height: 24px;
								position: absolute;
								top: 14px;
								right: 27px;
								color: rgba(20, 89, 187, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								cursor: pointer;
							}
						}
					}

					.box3-main {
						height: 402px;
						overflow-y: auto;
						overflow-x: hidden;
						padding-top: 6px;

						.box3-item {
							display: flex;
							height: 77px;
							width: 749px;
							margin-left: 21px;
							border-bottom: 1px solid rgba(240, 242, 244, 1);

							.left {
								width: 72px;
								height: 48px;
								margin-top: 15px;

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

							.right {
								width: 657px;
								margin-left: 20px;

								.right-top {
									width: 657px;
									display: flex;
									justify-content: space-between;

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

									.time {
										flex: 1;
										text-align: right;
										height: 22px;
										margin-top: 19px;
										color: rgba(95, 101, 108, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 22px;
									}
								}

								.right-footer {
									width: 657px;
									height: 24px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									cursor: pointer;
								}
							}
						}
					}
				}

				.box4 {
					margin-left: 16px;
					width: 792px;
					height: 450px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
					background: rgba(255, 255, 255, 1);

					.box4-header {
						width: 792px;
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						box-sizing: border-box;
						padding-left: 22px;
						position: relative;

						.header-icon {
							margin-top: 15px;
							width: 20px;
							height: 20px;

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

						.header-title {
							margin-top: 16px;
							margin-left: 18px;
							height: 22px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 22px;
						}

						.more {
							width: 49px;
							height: 24px;
							position: absolute;
							top: 14px;
							right: 27px;
							color: rgba(20, 89, 187, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							cursor: pointer;
						}
					}

					.box4-tag-box {
						height: 60px;
						display: flex;
						padding: 0 10px;
						align-items: center;
						gap: 8px;

						.tag {
							height: 28px;
							line-height: 28px;
							padding: 0 4px;
							box-sizing: border-box;
							border-radius: 4px;
							cursor: pointer;
						}

						.tagActive {
							height: 36px;
							line-height: 36px;
							box-sizing: border-box;
							border: 1px solid rgba(114, 46, 209, 1) !important;
							border-radius: 4px;
							background: rgba(114, 46, 209, 1) !important;
							color: rgba(249, 240, 255, 1) !important;
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 36px;
							letter-spacing: 1px;
						}

						.tag1 {
							border: 1px solid rgba(135, 232, 222, 1);
							background: rgba(230, 255, 251, 1);
							color: rgba(19, 168, 168, 1);
						}

						.tag2 {
							border: 1px solid rgba(145, 202, 255, 1);
							background: rgba(230, 244, 255, 1);
							color: rgba(22, 119, 255, 1);
						}

						.tag3 {
							border: 1px solid rgba(255, 213, 145, 1);
							background: rgba(255, 247, 230, 1);
							color: rgba(250, 140, 22, 1);
						}

						.tag4 {
							border: 1px solid rgba(255, 187, 150, 1);
							background: rgba(255, 242, 232, 1);
							color: rgba(250, 84, 28, 1);
						}

						.tag5 {
							border: 1px solid rgba(255, 163, 158, 1);
							background: rgba(255, 241, 240, 1);
							color: rgba(206, 79, 81, 1);
						}
					}

					.box4-main {
						height: 380px;
						overflow-y: auto;
						box-sizing: border-box;
						padding: 8px 0;
						padding-left: 24px;
						// .box4-main-item {
						// 	margin-top: 16px;
						// 	display: flex;
						// 	margin-left: 21px;

						// 	.left {
						// 		margin-top: 5px;
						// 		width: 36px;
						// 		height: 36px;
						// 		border-radius: 18px;
						// 		overflow: hidden;
						// 		cursor: pointer;

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

						// 	.right {
						// 		margin-left: 10px;
						// 		width: 690px;
						// 		box-sizing: border-box;
						// 		border: 1px solid rgba(231, 243, 255, 1);
						// 		background: rgba(246, 250, 255, 1);
						// 		padding: 10px 15px;
						// 		border-radius: 4px;

						// 		.right-top {
						// 			display: flex;
						// 			justify-content: space-between;

						// 			.name {
						// 				height: 24px;
						// 				color: rgba(59, 65, 75, 1);
						// 				font-family: Microsoft YaHei;
						// 				font-size: 16px;
						// 				font-weight: 700;
						// 				line-height: 24px;
						// 			}

						// 			.time {
						// 				height: 30px;
						// 				color: rgba(95, 101, 108, 1);
						// 				font-family: Microsoft YaHei;
						// 				font-size: 16px;
						// 				font-weight: 400;
						// 				line-height: 30px;
						// 			}
						// 		}

						// 		.content {
						// 			color: rgba(59, 65, 75, 1);
						// 			font-family: Microsoft YaHei;
						// 			font-size: 16px;
						// 			font-weight: 400;
						// 			line-height: 24px;
						// 		}
						// 	}
						// }
					}
				}
			}

			.center-footer {

				height: 460px;
				display: flex;
				justify-content: center;
				gap: 15px;

				.box5 {
					width: 1064px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);

					.box5-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;

						.box5-header-left {
							display: flex;

							.box5-header-icon {
								margin-top: 15px;
								margin-left: 3px;

								width: 19px;
								height: 19px;

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

							.box5-header-title {
								margin-top: 11px;
								margin-left: 18px;
								height: 26px;
								color: rgba(20, 89, 187, 1);
								font-family: "Source Han Sans CN";
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}

						.box5-select-box {
							width: 240px;
							height: 28px;
							position: absolute;
							top: 11px;
							right: 31px;
							display: flex;
							gap: 2px;
						}
					}

					.box5-main {
						height: 412px;
						width: 1063px;
						box-sizing: border-box;
						position: relative;
						padding: 24px 24px 64px 24px;

						&.box5-main--empty {
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 24px;

							:deep(.el-empty__image) {
								margin-bottom: 0;
							}
						}

						.box5-el-empty {
							padding: 0;
							margin: 0;
						}

						.box5-chart-row {
							display: flex;
							flex-direction: row;
							align-items: flex-start;
							width: 100%;
							box-sizing: border-box;
						}

						.box5-chart-canvas {
							flex: 1;
							min-width: 0;
							height: 324px;
						}

						.source {

							position: absolute;
							bottom: 21px;
							left: 50%;
							/* 让元素左边对齐父级中线 */
							transform: translateX(-50%);

							/* 上下0，左右自动居中 */
							width: 370px;
							height: 22px;
							display: flex;

							.info {
								width: 16px;
								height: 16px;
								margin-top: 3px;

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

								}


							}

							.text {
								font-family: "Source Han Sans CN";
								font-weight: 400;
								font-size: 14px;
								line-height: 22px;
								letter-spacing: 0px;
								text-align: left;
								color: rgb(132, 136, 142);
								margin-left: 8px;
							}
						}

						.chart-box {
							position: absolute;
							right: 0;
							bottom: 18px;

							.btn-box {
								width: 74px;
								height: 28px;
							}

							.content-box {
								width: 1063px;
								position: absolute;
								right: 0;
								bottom: -18px;

							}
						}
					}
				}

				.box6 {
					width: 521px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);

					.box6-header {
						width: 521px;
						height: 48px;
						box-sizing: border-box;
						padding: 0 20px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						display: flex;
						position: relative;

						.header-icon {
							margin-top: 15px;
							margin-left: 3px;
							width: 19px;
							height: 19px;

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

						.header-title {
							margin-top: 11px;
							margin-left: 19px;
							height: 22px;
							color: rgba(20, 89, 187, 1);
							font-family: "Source Han Sans CN";
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}

						.box6-select-box {
							width: 240px;
							height: 28px;
							position: absolute;
							top: 12px;
							right: 25px;
							display: flex;
							gap: 2px
						}
					}

					.box6-main {
						width: 520px;
						height: 412px;
						box-sizing: border-box;
						padding: 24px 24px 64px 24px;
						position: relative;

						&.box6-main--empty {
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 24px;

							:deep(.el-empty__image) {
								margin-bottom: 0;
							}
						}

						.box6-el-empty {
							padding: 0;
							margin: 0;
						}

						#box6Chart {
							width: 472px;
							height: 324px;
						}

						.source {

							position: absolute;
							bottom: 21px;
							left: 50%;
							/* 让元素左边对齐父级中线 */
							transform: translateX(-50%);
							/* 让元素自身向左回退一半宽度 */

							/* 上下0，左右自动居中 */
							width: 370px;
							height: 22px;
							display: flex;

							.info {
								width: 16px;
								height: 16px;
								margin-top: 3px;

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

								}


							}

							.text {
								font-family: "Source Han Sans CN";
								font-weight: 400;
								font-size: 14px;
								line-height: 22px;
								letter-spacing: 0px;
								text-align: left;
								color: rgb(132, 136, 142);
								margin-left: 8px;
							}
						}

						.chart-box {
							position: absolute;
							right: 0;
							bottom: 18px;

							.btn-box {
								width: 74px;
								height: 28px;
							}

							.content-box {
								width: 520px;
								position: absolute;
								right: 0;
								bottom: -18px;

							}
						}
					}


				}
			}

			.center-footer1 {
				margin-top: 16px;
				display: flex;
				justify-content: center;
				gap: 15px;
				margin-bottom: 36px;

				.box7 {
					width: 1064px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);

					.box7-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;

						.box7-header-left {
							display: flex;

							.box7-header-icon {
								margin-top: 15px;
								margin-left: 3px;
								width: 19px;
								height: 19px;

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

							.box7-header-title {
								margin-top: 11px;
								margin-left: 19px;
								height: 26px;
								color: rgba(20, 89, 187, 1);
								font-family: "Source Han Sans CN";
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}

						.box-header-right {
							position: absolute;
							height: 24px;
							top: 12px;
							right: 17px;
							display: flex;
							justify-content: flex-end;
							align-items: center;
							gap: 8px;

							.icon {
								width: 14px;
								height: 16px;

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

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

					.box7-main {
						width: 1064px;
						height: 412px;
						box-sizing: border-box;
						padding: 24px 24px 64px 24px;
						position: relative;

						&.box7-main--empty {
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 24px;

							:deep(.el-empty__image) {
								margin-bottom: 0;
							}
						}

						.box7-el-empty {
							padding: 0;
							margin: 0;
						}

						#box7Chart {
							width: 1016px;
							/* 填满宽度 */
							height: 324px;
							/* 填满高度 */
						}

						.source {

							position: absolute;
							bottom: 21px;
							left: 50%;
							/* 让元素左边对齐父级中线 */
							transform: translateX(-50%);

							/* 上下0，左右自动居中 */

							height: 22px;
							display: flex;

							.info {
								width: 16px;
								height: 16px;
								margin-top: 3px;

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

								}


							}

							.text {
								font-family: "Source Han Sans CN";
								font-weight: 400;
								font-size: 14px;
								line-height: 22px;
								letter-spacing: 0px;
								text-align: left;
								color: rgb(132, 136, 142);
								margin-left: 8px;
							}
						}

						.chart-box {
							position: absolute;
							right: 0;
							bottom: 18px;

							.btn-box {
								width: 74px;
								height: 28px;
							}

							.content-box {
								width: 1063px;
								position: absolute;
								right: 0;
								bottom: -18px;

							}
						}
					}
				}

				.box8 {
					width: 521px;
					height: 460px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);

					.box8-header {
						height: 48px;
						border-bottom: 1px solid rgba(240, 242, 244, 1);
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						padding: 0 20px;
						position: relative;

						.box8-header-left {
							display: flex;

							.box8-header-icon {
								margin-top: 15px;
								margin-left: 3px;
								width: 19px;
								height: 19px;

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

							.box8-header-title {
								margin-top: 11px;
								margin-left: 19px;
								height: 26px;
								color: rgba(20, 89, 187, 1);
								font-family: "Source Han Sans CN";
								font-size: 20px;
								font-weight: 700;
								line-height: 26px;
							}
						}

						.box8-select-box {
							width: 120px;
							height: 28px;
							position: absolute;
							top: 12px;
							right: 25px;
						}
					}

					.box8-main {

						height: 412px;

						.box8-main-item {
							margin: 0 auto;
							margin-top: 5px;
							width: 452px;
							height: 382px;
							overflow: hidden;

							.box8-item {
								margin-top: 14px;
								width: 452px;
								height: 24px;
								display: flex;

								.item-left {
									width: 20px;
									height: 24px;
									color: rgb(95, 101, 108);
									font-family: "Source Han Sans CN";
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: center;
								}

								.item-center {
									margin-left: 20px;
									width: 425px;
									height: 24px;
									color: rgb(59, 65, 75);
									font-family: "Source Han Sans CN";
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.item-count {
									height: 24px;
									width: 92px;
									text-align: right;
									font-family: "Source Han Sans CN";
									color: rgb(95, 101, 108)
								}

								.itemBold1 {
									color: rgba(206, 79, 81, 1);
									font-weight: 700;
								}

								.itemBold2 {
									color: rgba(255, 169, 64, 1);
									font-weight: 700;
								}

								.itemBold3 {
									color: rgba(255, 197, 61, 1);
									font-weight: 700;
								}

								.item-right {
									width: 92px;
									height: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: right;
									cursor: pointer;
								}
							}
						}
					}
				}
			}
		}

		.home-main-footer {
			overflow: hidden;
			background: rgba(247, 248, 249, 1);
			height: 1700px;

			.home-main-footer-header {
				width: 1600px;
				height: 42px;
				margin: auto;
				margin-bottom: 36px;
				// background: orange;
				display: flex;
				justify-content: space-between;

				.btn-box {

					display: flex;
					gap: 24px;

					.btn {
						color: rgba(95, 101, 108, 1);
						font-family: "Source Han Sans CN";
						font-size: 20px;
						font-weight: 400;
						line-height: 42px;
						padding: 0 24px;
						width: 150px;
						height: 42px;
						border-radius: 21px;
						background: rgba(20, 89, 187, 0);
						text-align: center;

						cursor: pointer;

						&:hover {
							background: rgba(20, 89, 187, 0.1);
						}
					}

					.btnActive {
						padding: 0 24px;
						border-radius: 21px;
						background: var(--color-main-active);
						color: #fff;
						font-weight: 700;

						&:hover {
							color: #fff;
							background: var(--color-main-active);
						}
					}
				}

				.select-box {
					height: 42px;
					box-sizing: border-box;
					padding: 5px 0;

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

						.resource-library-sort-prefix-img {
							width: 8px;
							height: 8px;
							margin-right: 4px;
							cursor: pointer;
						}

						:deep(.el-select__wrapper) {
							min-height: 30px;
							box-shadow: none;
						}

						:deep(.el-select-dropdown) {
							left: 0 !important;
							top: 100% !important;
							transform: none !important;
						}
					}
				}
			}

			.home-main-footer-main {
				margin: 0 auto;
				margin-top: 36px;
				width: 1600px;
				display: flex;
				gap: 16px;

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

						.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: 24px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 1px;
								text-align: left;
							}
						}

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

						.select-main1 {
							width: 100px;
						}
					}

					.left-footer-box {
						left: 25px;
						bottom: 20px;
						position: absolute;
						width: 250px;
						height: 149px;
						border-radius: 4px;
						background: rgba(246, 250, 255, 1);

						.header {
							margin-top: 8px;
							margin-left: 21px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}

						.content {
							margin: 0 auto;
							margin-top: 11px;
							width: 210px;
							height: 44px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
							letter-spacing: 0px;
							text-align: left;
						}

						.btn {
							margin: 0 auto;
							margin-top: 13px;
							width: 210px;
							height: 36px;
							line-height: 36px;
							text-align: center;
							border-radius: 6px;
							background: var(--color-main-active);
							color: rgba(255, 255, 255, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							letter-spacing: 0px;
						}
					}
				}

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

					.card-box {
						width: 1226px;
						max-height: 1248px;
						min-height: 616px;
						display: flex;
						flex-wrap: wrap;
						gap: 16px 16px;

						.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);

							.footer-card-top {
								width: 364px;
								height: 180px;
								margin: 0 auto;
								margin-top: 15px;

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

							.footer-card-title {
								margin: 0 auto;
								margin-top: 13px;
								width: 376px;
								height: 48px;
								/* 修改高度为两行的高度 */
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
								overflow: hidden;
								/* 隐藏超出部分 */
								text-overflow: ellipsis;
								/* 显示省略号 */
								display: -webkit-box;
								/* 使用弹性盒模型 */
								-webkit-line-clamp: 2;
								/* 限制显示两行 */
								-webkit-box-orient: vertical;
								/* 设置盒模型方向为垂直 */
							}

							.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 {
						height: 50px;
						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;
						}
					}
				}
			}
		}
	}
}

/* 仅作用于智库概览页资源库下四个组件的选择框样式 */
.resource-library-content {


	:deep(.el-checkbox__label) {
		font-family: "Source Han Sans CN";
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0;
		text-align: justify;
	}
}

.divide-header {
	margin: 0 auto;
	margin-top: 64px;
	margin-bottom: 30px;
}

.all-checkbox {
	width: 220px;
}

.filter-checkbox {
	width: 105px;
}

:deep(.el-input__wrapper) {
	box-shadow: none;
	border-radius: 10px;
}

:deep(.el-input__wrapper:hover) {
	box-shadow: none !important;
}

:deep(.el-input__wrapper.is-focus) {
	box-shadow: none !important;
}

.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;
	}
}
</style>
