<template>
	<div class="wrap">
		<div class="top">
			<div class="box1 box">
				<div class="box-header">
					<div class="icon">
						<img src="./images/box-header-icon1.png" alt="" />
					</div>
					<div class="title">{{ "领域分布情况" }}</div>
					<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
					<div class="select-box">
						<el-select v-model="box1SelectYear" placeholder="选择时间" style="width: 100px"
							@change="handleGetThinkPolicyIndustry">
							<el-option v-for="item in box1YearList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="box-main" :class="{ 'chart-main--empty': !hasBox1ChartData }">
					<template v-if="!hasBox1ChartData">
						<el-empty class="policy-tracking-el-empty" description="暂无数据" :image-size="100" />
					</template>
					<template v-else>
						<div id="box1Chart"></div>
						<div class="source">
							<TipTab :text="POLICY_TRACKING_TIP_BOX1" />
						</div>
						<div class="chart-box">
							<div class="btn-box" v-if="!isShowAiContentPolicyPt1"
								@mouseenter="handleSwitchAiContentShowPolicyPt1(true)">
								<AiButton />
							</div>
							<div class="content-box" v-if="isShowAiContentPolicyPt1"
								@mouseleave="handleSwitchAiContentShowPolicyPt1(false)">
								<AiPane :aiContent="aiContentPolicyPt1" />
							</div>
						</div>
					</template>
				</div>
			</div>
			<div class="box1 box">
				<div class="box-header">
					<div class="icon">
						<img src="./images/box-header-icon2.png" alt="" />
					</div>
					<div class="title">{{ "部门分布情况" }}</div>
					<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
					<div class="select-box">
						<el-select v-model="box2SelectYear" placeholder="选择时间" style="width: 100px"
							@change="handleGetPolicyAdviceDeptDistribution">
							<el-option v-for="item in box2YearList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="box-main" :class="{ 'chart-main--empty': !hasBox2ChartData }">
					<template v-if="!hasBox2ChartData">
						<el-empty class="policy-tracking-el-empty" description="暂无数据" :image-size="100" />
					</template>
					<template v-else>
						<div id="box2Chart"></div>
						<div class="source">
							<TipTab :text="POLICY_TRACKING_TIP_BOX2" />
						</div>
						<div class="chart-box">
							<div class="btn-box" v-if="!isShowAiContentPolicyPt2"
								@mouseenter="handleSwitchAiContentShowPolicyPt2(true)">
								<AiButton />
							</div>
							<div class="content-box" v-if="isShowAiContentPolicyPt2"
								@mouseleave="handleSwitchAiContentShowPolicyPt2(false)">
								<AiPane :aiContent="aiContentPolicyPt2" />
							</div>
						</div>
					</template>
				</div>
			</div>
			<!-- <div class="box2 box">
				<div class="box-header">
					<div class="icon">
						<img src="./images/box-header-icon2.png" alt="" />
					</div>
					<div class="title">{{ "相关政策领域分布" }}</div>
					<div class="box-header-right">{{ "查看数据源 >" }}</div>
				</div>
				<div class="box-main">
					<div class="select-box">
						<el-select v-model="box2SelectYear" placeholder="选择时间" style="width: 100px">
							<el-option v-for="item in box2YearList" :key="item.value" :label="item.label" :value="item.value"
								@click="handleGetThinkPolicyIndustryTotal()" />
						</el-select>
					</div>
					<div id="box2Chart">
						<div class="box2-item" v-for="(item, index) in box2TotalData" :key="index">
							<div class="icon" :style="{ background: item.color }"></div>
							<div class="name">{{ item.industry }}</div>
							<el-progress :show-text="false" :color="box2ColorList[index]" style="width: 170px" stroke-width="8"
								:percentage="item.percent" />
							<div class="num">{{ item.amount + "项" }} / {{ item.totalAmount + "项" }}</div>
							<div class="per">{{ item.percent + "%" }}</div>
						</div> 
					</div>
				</div>
			</div> -->
			<div class="box3 box">
				<div class="box-header">
					<div class="icon">
						<img src="./images/box-header-icon2.png" alt="" />
					</div>
					<div class="title">{{ "研究领域变化趋势" }}</div>
					<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
					<div class="select-box">
						<el-select v-model="box3SelectMonths" placeholder="选择时间" style="width: 100px"
							@change="handleGetThinkPolicyIndustryChange">
							<el-option v-for="item in box3MonthsList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="box3-main" :class="{ 'chart-main--empty': !hasBox3ChartData }">
					<template v-if="!hasBox3ChartData">
						<el-empty class="policy-tracking-el-empty" description="暂无数据" :image-size="100" />
					</template>
					<template v-else>
						<div class="box3-chart-row">
							<button v-if="box3LegendShowNav" type="button" class="box3-legend-nav-btn" :disabled="!box3LegendCanPrev"
								aria-label="上一页图例" @click="handleBox3LegendPrev">
								‹
							</button>
							<div id="box3Chart" class="box3-chart-canvas"></div>
							<button v-if="box3LegendShowNav" type="button" class="box3-legend-nav-btn" :disabled="!box3LegendCanNext"
								aria-label="下一页图例" @click="handleBox3LegendNext">
								›
							</button>
						</div>
						<div class="source">
							<TipTab :text="POLICY_TRACKING_TIP_BOX3" />
						</div>
						<div class="chart-box">
							<div class="btn-box" v-if="!isShowAiContentPolicyPt3"
								@mouseenter="handleSwitchAiContentShowPolicyPt3(true)">
								<AiButton />
							</div>
							<div class="content-box" v-if="isShowAiContentPolicyPt3"
								@mouseleave="handleSwitchAiContentShowPolicyPt3(false)">
								<AiPane :aiContent="aiContentPolicyPt3" />
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="bottom-header">
				<div class="search-box" @keyup.enter="handleGetThinkPolicy()">
					<el-input placeholder="搜索政策建议" v-model="searchPolicy" style="width: 270px" />
					<div class="icon">
						<img src="./images/search-icon.png" alt="" @click="handleGetThinkPolicy()" />
					</div>
				</div>

				<div class="select-box">

					<el-select class="select-box-sort" v-model="sort" placeholder="发布时间" style="width: 120px" :teleported="true"
						:placement="'bottom-start'" :popper-options="{
							modifiers: [
								{
									name: 'preventOverflow',
									options: { mainAxis: false, altAxis: false }
								},
								{
									name: 'flip',
									enabled: false
								}
							]
						}">
						<template #prefix>
							<img v-if="sort !== true" src="../thinkDynamics/images/image down.png" class="select-prefix-img" alt="" />
							<img v-else src="../thinkDynamics/images/image up.png" class="select-prefix-img" alt="" />
						</template>
						<el-option @click="handleGetThinkPolicy()" :key="true" label="正序" :value="true" />
						<el-option @click="handleGetThinkPolicy()" :key="false" label="倒序" :value="false" />
					</el-select>
				</div>
			</div>
			<div class="bottom-main">
				<div class="left">
					<div class="select-box-science">
						<div class="select-box-header">
							<div class="icon"></div>
							<div class="title">{{ "科技领域" }}</div>
						</div>
						<div class="select-main">
							<el-checkbox-group
								class="checkbox-group"
								v-model="selectedAreaList"
								@change="handleChangePolicyAreaList">
								<el-checkbox class="filter-checkbox" :label="POLICY_FILTER_ALL_AREA">
									{{ POLICY_FILTER_ALL_AREA }}
								</el-checkbox>
								<el-checkbox
									class="filter-checkbox"
									v-for="research in areaList"
									:key="research.id"
									:label="research.id">
									{{ research.name }}
								</el-checkbox>
							</el-checkbox-group>
						</div>
					</div>
					<div class="select-box-department">
						<div class="select-box-header">
							<div class="icon"></div>
							<div class="title">{{ "涉及部门" }}</div>
						</div>
						<div class="select-main">
							<el-checkbox-group
								class="checkbox-group"
								v-model="selectedDepartmentList"
								@change="handleChangePolicyDepartmentList">
								<el-checkbox class="filter-checkbox" :label="POLICY_FILTER_ALL_DEPT">
									{{ POLICY_FILTER_ALL_DEPT }}
								</el-checkbox>
								<el-checkbox
									class="filter-checkbox"
									v-for="department in selectableDepartment"
									:key="department.id"
									:label="department.id">
									{{ department.name }}
								</el-checkbox>
							</el-checkbox-group>
						</div>
					</div>
					<div class="select-box-publish">
						<div class="select-box-header">
							<div class="icon"></div>
							<div class="title">{{ "发布时间" }}</div>
						</div>
						<div class="select-main">
							<el-checkbox-group
								class="checkbox-group"
								v-model="selectedYearList"
								@change="handleChangePolicyYearList">
								<el-checkbox class="filter-checkbox" :label="POLICY_FILTER_ALL_TIME">
									{{ POLICY_FILTER_ALL_TIME }}
								</el-checkbox>
								<el-checkbox
									class="filter-checkbox"
									v-for="year in selectableYears"
									:key="year"
									:label="year">
									{{ year }}
								</el-checkbox>
							</el-checkbox-group>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="right-main">
						<div class="right-main-item" v-for="item in policyList" :key="item.id">
							<div class="item-left">
								<img :src="item.imageUrl" alt="" />
							</div>
							<div class="item-right">
								<div>
									<div class="title">{{ item.titleZh }}</div>
									<div class="info">
										<div class="text">
											{{ item.reportDateDisplay }}·{{ item.contentZh }}
										</div>
										<div class="more" @click="toDetail(item)">

											<img src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image open.png" alt="" />
										</div>
									</div>

									<div class="tag-box">
										<AreaTag v-for="(tag, idx) in item.tagList" :key="idx" :tagName="tag"></AreaTag>
									</div>
									<div class="file-box">
										<div class="file" v-for="(file, idxx) in item.relatedBills" :key="`${file.id}-${idxx}`">
											<div class="type">法案</div>
											<div class="title">{{ file.name }}</div>
											<div class="more">
												<img src="./images/arrow-right.png" alt="" />
											</div>
										</div>
										<div class="file" v-for="(file, idxx) in item.relatedAdministrativeOrders"
											:key="file.bcId != null ? String(file.bcId) + '-' + idxx : idxx">
											<div class="type">政令</div>
											<div class="title">{{ file.content }}</div>
											<div class="more">
												<img src="./images/arrow-right.png" alt="" />
											</div>
										</div>
									</div>
								</div>
								<div></div>
							</div>
						</div>
					</div>
					<div class="right-footer">
						<div class="info">共{{ total }}条政策建议</div>
						<div class="page-box">
							<el-pagination :page-size="10" background layout="prev, pager, next" :total="total"
								@current-change="handleCurrentChange" :current-page="currentPage" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, watch, onMounted, computed, nextTick } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getMultiLineChart, { POLICY_TRACKING_LEGEND_PAGE_SIZE } from "./utils/multiLineChart";
import {
	getThinkPolicyIndustry,
	getThinkPolicyIndustryTotal,
	getThinkPolicyIndustryChange,
	getHylyList,
	getThinkPolicy,
	getPolicyAdviceDeptDistribution,
	getGovAgencyDict
} from "@/api/thinkTank/overview";
import { getChartAnalysis } from "@/api/aiAnalysis/index";
import AiButton from "@/components/base/Ai/AiButton/index.vue";
import AiPane from "@/components/base/Ai/AiPane/index.vue";
import TipTab from "@/views/thinkTank/TipTab/index.vue";
import defaultNewsIcon from "@/assets/icons/default-icon-news.png";

import { useRouter } from "vue-router";

const router = useRouter();

/** 与智库概览 TipTab 文案格式一致（政策追踪-美国国会） */
const POLICY_TRACKING_TIP_BOX1 =
	"智库报告中政策建议的领域分布情况，数据来源：美国兰德公司官网";
const POLICY_TRACKING_TIP_BOX2 =
	"智库报告中政策建议涉及领域分布情况，数据来源：美国兰德公司官网";
const POLICY_TRACKING_TIP_BOX3 =
	"智库报告热门研究领域变化趋势，数据来源：美国兰德公司官网";

/** 筛选「全部」项文案，与市场准入概览-资源库复选逻辑一致 */
const POLICY_FILTER_ALL_AREA = "全部领域";
const POLICY_FILTER_ALL_TIME = "全部时间";
const POLICY_FILTER_ALL_DEPT = "全部部门";

const isShowAiContentPolicyPt1 = ref(false);
const aiContentPolicyPt1 = ref("");
const isPolicyPt1InterpretLoading = ref(false);
const handleSwitchAiContentShowPolicyPt1 = (val) => {
	isShowAiContentPolicyPt1.value = val;
	if (val) {
		fetchPolicyPtBox1ChartInterpretation();
	}
};

const isShowAiContentPolicyPt2 = ref(false);
const aiContentPolicyPt2 = ref("");
const isPolicyPt2InterpretLoading = ref(false);
const handleSwitchAiContentShowPolicyPt2 = (val) => {
	isShowAiContentPolicyPt2.value = val;
	if (val) {
		fetchPolicyPtBox2ChartInterpretation();
	}
};

const isShowAiContentPolicyPt3 = ref(false);
const aiContentPolicyPt3 = ref("");
const isPolicyPt3InterpretLoading = ref(false);
const handleSwitchAiContentShowPolicyPt3 = (val) => {
	isShowAiContentPolicyPt3.value = val;
	if (val) {
		fetchPolicyPtBox3ChartInterpretation();
	}
};
// import Img1 from "./images/img1.png";
// import Img2 from "./images/img2.png";
// import Img3 from "./images/img3.png";
// import Img4 from "./images/img4.png";

// 提出建议领域分布
const box1Data = 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 hasBox1ChartData = computed(
	() => Array.isArray(box1Data.value) && box1Data.value.length > 0
);

const box1SelectYear = ref("2025");

const box1YearList = ref([
	{
		label: "2026",
		value: "2026"
	},
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	},
]);
const selectableYears = ref(["2025年", "2024年", "2023年", "2022年", "2021年", "更早"]);
const selectableDepartment = ref([]);
const handleGetThinkPolicyIndustry = async () => {
	aiContentPolicyPt1.value = "";
	try {
		const parmas = {
			id: router.currentRoute._value.params.id,
			year: box1SelectYear.value
		};
		const res = await getThinkPolicyIndustry(parmas);
		console.log("提出建议领域分布", res);
		if (res.code === 200 && res.data) {
			const list = Array.isArray(res.data) ? res.data.slice(0, 7) : [];
			if (!list.length) {
				box1Data.value = [];
				return;
			}
			const data = list.map(item => ({
				name: item.industry,
				value: item.amount,
				percent: item.percent
			}));
			box1Data.value = data;
			/* v-if 有数据后才挂载 #box1Chart，须等 DOM 更新后再 init echarts */
			await nextTick();
			const box1Chart = getPieChart(box1Data.value);
			setChart(box1Chart, "box1Chart");
		} else {
			box1Data.value = [];
		}
	} catch (error) {
		console.error("获取提出建议领域分布error", error);
		box1Data.value = [];
	}
};

// 政策建议涉及部门分布（饼图）
const box2Data = ref([]);

const hasBox2ChartData = computed(
	() => Array.isArray(box2Data.value) && box2Data.value.length > 0
);

/** 仅「相关政策领域分布」注释区块用；勿写入 box2Data，否则与部门分布接口并行会覆盖饼图数据导致空白 */
const box2TotalData = ref([]);

const handleGetPolicyAdviceDeptDistribution = async () => {
	aiContentPolicyPt2.value = "";
	try {
		const parmas = {
			id: router.currentRoute._value.params.id,
			year: box2SelectYear.value
		};
		const res = await getPolicyAdviceDeptDistribution(parmas);
		console.log("政策建议涉及部门分布", res);
		if (
			res.code === 200 &&
			res.data &&
			Array.isArray(res.data.series) &&
			res.data.series.length > 0
		) {
			// 接口新结构：data.series 为 [{ name, value, percent, extra }]
			const list = res.data.series.slice(0, 7);
			box2Data.value = list.map(item => ({
				name: item.name,
				value: item.value,
				percent: item.percent
			}));

			await nextTick();
			const box2Chart = getPieChart(box2Data.value);
			setChart(box2Chart, "box2Chart");
		} else {
			box2Data.value = [];
		}
	} catch (error) {
		console.error("获取政策建议涉及部门分布 error", error);
		box2Data.value = [];
	}
};

// 相关政策领域分布（旧模块用 box2Data，勿与部门分布混用）
const box2ColorList = ref(["#CE4F51", "#055FC2", "#13A8A8", "#722ED1", "#FA8C16", "#69B1FF"]);
const box2SelectYear = ref("2025");
const box2YearList = ref([
	{
		label: "2026",
		value: "2026"
	},
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	},
]);

const handleGetThinkPolicyIndustryTotal = async () => {
	try {
		const parmas = {
			id: router.currentRoute._value.params.id,
			year: box2SelectYear.value
		};
		const res = await getThinkPolicyIndustryTotal(parmas);
		console.log("相关政策领域分布", res);
		if (res.code === 200 && res.data) {
			box2TotalData.value = Array.isArray(res.data) ? res.data : [];
		} else {
			box2TotalData.value = [];
		}
	} catch (error) {
		console.error("获取相关政策领域分布error", error);
		box2TotalData.value = [];
	}
};
// 热门研究方向变化趋势
const box3Data = ref({
	title: [],
	data: []
});

const hasBox3ChartData = computed(() => {
	const v = box3Data.value;
	if (!v || typeof v !== "object") {
		return false;
	}
	const title = v.title;
	const data = v.data;
	return (
		Array.isArray(title) &&
		title.length > 0 &&
		Array.isArray(data) &&
		data.length > 0
	);
});

const box3LegendPageIndex = ref(0);

const box3LegendPageCount = computed(() => {
	const n = box3Data.value?.data?.length ?? 0;
	return Math.max(1, Math.ceil(n / POLICY_TRACKING_LEGEND_PAGE_SIZE));
});

const box3LegendShowNav = computed(() => {
	const n = box3Data.value?.data?.length ?? 0;
	return n > POLICY_TRACKING_LEGEND_PAGE_SIZE;
});

const box3LegendCanPrev = computed(() => box3LegendPageIndex.value > 0);

const box3LegendCanNext = computed(
	() => box3LegendPageIndex.value < box3LegendPageCount.value - 1
);

const handleBox3LegendPrev = () => {
	if (box3LegendPageIndex.value <= 0) {
		return;
	}
	box3LegendPageIndex.value -= 1;
	renderBox3Chart();
};

const handleBox3LegendNext = () => {
	if (box3LegendPageIndex.value >= box3LegendPageCount.value - 1) {
		return;
	}
	box3LegendPageIndex.value += 1;
	renderBox3Chart();
};

/** 研究领域变化趋势：图例分页与概览「数量变化趋势」一致 */
const renderBox3Chart = async () => {
	const v = box3Data.value;
	if (
		!v ||
		!Array.isArray(v.title) ||
		v.title.length === 0 ||
		!Array.isArray(v.data) ||
		v.data.length === 0
	) {
		return;
	}
	const totalNames = v.data.length;
	const pages = Math.max(1, Math.ceil(totalNames / POLICY_TRACKING_LEGEND_PAGE_SIZE));
	if (box3LegendPageIndex.value >= pages) {
		box3LegendPageIndex.value = pages - 1;
	}
	if (box3LegendPageIndex.value < 0) {
		box3LegendPageIndex.value = 0;
	}
	await nextTick();
	const box3Chart = getMultiLineChart(
		{ title: v.title, data: v.data },
		{
			legendShowCount: POLICY_TRACKING_LEGEND_PAGE_SIZE,
			legendPageIndex: box3LegendPageIndex.value
		}
	);
	setChart(box3Chart, "box3Chart");
};

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

const handleGetThinkPolicyIndustryChange = async () => {
	aiContentPolicyPt3.value = "";
	try {
		const parmas = {
			id: router.currentRoute._value.params.id,
			year: box3SelectMonths.value
		};
		const res = await getThinkPolicyIndustryChange(parmas);
		console.log("热门研究方向变化趋势", res);
		if (res.code === 200 && Array.isArray(res.data) && res.data.length > 0) {
			// 提取所有季度信息
			const quarters = res.data.map(item => item.yearQuarter);
			quarters.sort(); // 按时间排序

			// 提取所有行业名称
			const industries = new Set();
			res.data.forEach(item => {
				if (Array.isArray(item.industryList)) {
					item.industryList.forEach(industry => {
						industries.add(industry.industry);
					});
				}
			});

			// 构建前端数据结构
			const frontendData = {
				title: quarters,
				data: []
			};
			industries.forEach(industry => {
				const industryData = {
					name: industry,
					value: quarters.map(quarter => {
						const quarterData = res.data.find(q => q.yearQuarter === quarter);
						const industryAmount =
							quarterData?.industryList?.find(i => i.industry === industry)?.amount || 0;
						return industryAmount;
					})
				};
				frontendData.data.push(industryData);
			});
			if (!frontendData.data.length) {
				box3Data.value = { title: [], data: [] };
				return;
			}
			box3Data.value = frontendData;
			box3LegendPageIndex.value = 0;
			await renderBox3Chart();
		} else {
			box3Data.value = { title: [], data: [] };
		}
	} catch (error) {
		console.error("获取热门研究方向变化趋势error", error);
		box3Data.value = { title: [], data: [] };
	}
};

/** 政策追踪-领域分布饼图解读（与概览页 box6 入参一致） */
const fetchPolicyPtBox1ChartInterpretation = async () => {
	const list = Array.isArray(box1Data.value) ? box1Data.value : [];
	if (!list.length) {
		aiContentPolicyPt1.value = "暂无图表数据";
		return;
	}
	const hasValidContent =
		aiContentPolicyPt1.value &&
		aiContentPolicyPt1.value !== "解读生成中…" &&
		aiContentPolicyPt1.value !== "解读加载失败" &&
		aiContentPolicyPt1.value !== "暂无图表数据";
	if (hasValidContent || isPolicyPt1InterpretLoading.value) {
		return;
	}
	isPolicyPt1InterpretLoading.value = true;
	aiContentPolicyPt1.value = "解读生成中…";
	const chartPayload = {
		type: "饼图",
		name: "领域分布情况",
		year: box1SelectYear.value,
		data: list.map((item) => ({
			name: item.name,
			value: item.value
		}))
	};
	try {
		const text = await getChartAnalysis(
			{ text: JSON.stringify(chartPayload) },
			{
				onInterpretationDelta: (chunk) => {
					if (chunk) {
						aiContentPolicyPt1.value = chunk;
					}
				}
			}
		);
		aiContentPolicyPt1.value = text || "未返回有效解读内容";
	} catch (error) {
		console.error("政策追踪领域分布图表解读请求失败", error);
		aiContentPolicyPt1.value = "解读加载失败";
	} finally {
		isPolicyPt1InterpretLoading.value = false;
	}
};

/** 政策追踪-部门分布饼图解读 */
const fetchPolicyPtBox2ChartInterpretation = async () => {
	const list = Array.isArray(box2Data.value) ? box2Data.value : [];
	if (!list.length) {
		aiContentPolicyPt2.value = "暂无图表数据";
		return;
	}
	const hasValidContent =
		aiContentPolicyPt2.value &&
		aiContentPolicyPt2.value !== "解读生成中…" &&
		aiContentPolicyPt2.value !== "解读加载失败" &&
		aiContentPolicyPt2.value !== "暂无图表数据";
	if (hasValidContent || isPolicyPt2InterpretLoading.value) {
		return;
	}
	isPolicyPt2InterpretLoading.value = true;
	aiContentPolicyPt2.value = "解读生成中…";
	const chartPayload = {
		type: "饼图",
		name: "部门分布情况",
		year: box2SelectYear.value,
		data: list.map((item) => ({
			name: item.name,
			value: item.value
		}))
	};
	try {
		const text = await getChartAnalysis(
			{ text: JSON.stringify(chartPayload) },
			{
				onInterpretationDelta: (chunk) => {
					if (chunk) {
						aiContentPolicyPt2.value = chunk;
					}
				}
			}
		);
		aiContentPolicyPt2.value = text || "未返回有效解读内容";
	} catch (error) {
		console.error("政策追踪部门分布图表解读请求失败", error);
		aiContentPolicyPt2.value = "解读加载失败";
	} finally {
		isPolicyPt2InterpretLoading.value = false;
	}
};

/** 政策追踪-研究领域变化趋势折线图解读（与概览页 box5 结构一致） */
const fetchPolicyPtBox3ChartInterpretation = async () => {
	const v = box3Data.value;
	if (
		!v ||
		!Array.isArray(v.title) ||
		v.title.length === 0 ||
		!Array.isArray(v.data) ||
		v.data.length === 0
	) {
		aiContentPolicyPt3.value = "暂无图表数据";
		return;
	}
	const hasValidContent =
		aiContentPolicyPt3.value &&
		aiContentPolicyPt3.value !== "解读生成中…" &&
		aiContentPolicyPt3.value !== "解读加载失败" &&
		aiContentPolicyPt3.value !== "暂无图表数据";
	if (hasValidContent || isPolicyPt3InterpretLoading.value) {
		return;
	}
	isPolicyPt3InterpretLoading.value = true;
	aiContentPolicyPt3.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 text = await getChartAnalysis(
			{ text: JSON.stringify(chartPayload) },
			{
				onInterpretationDelta: (chunk) => {
					if (chunk) {
						aiContentPolicyPt3.value = chunk;
					}
				}
			}
		);
		aiContentPolicyPt3.value = text || "未返回有效解读内容";
	} catch (error) {
		console.error("政策追踪研究领域趋势图表解读请求失败", error);
		aiContentPolicyPt3.value = "解读加载失败";
	} finally {
		isPolicyPt3InterpretLoading.value = false;
	}
};

// 搜索政策建议
const searchPolicy = ref("");

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

const selectedYear = ref(1);

// 科技领域 / 涉及部门 / 发布时间（含「全部」项，与市场准入概览资源库互斥逻辑一致）
const areaList = ref([]);
const selectedDepartmentList = ref([POLICY_FILTER_ALL_DEPT]);
const selectedAreaList = ref([POLICY_FILTER_ALL_AREA]);
const selectedYearList = ref([POLICY_FILTER_ALL_TIME]);

//获取科技领域
const handleGetHylyList = async () => {
	try {
		const res = await getHylyList();
		console.log("智库研究类型信息", res.data);
		if (res.code === 200 && res.data) {
			areaList.value = res.data;
			console.log(areaList.value)
		}
	} catch (error) {
		console.error("获取研究类型error", error);
	}
};

/** 涉及部门：GET /api/commonDict/gov/agency */
const handleGetGovAgencyList = async () => {
	try {
		const res = await getGovAgencyDict();
		console.log(res, " 涉及部门")
		if (res.code === 200 && Array.isArray(res.data)) {
			selectableDepartment.value = res.data.map((row) => ({
				id: String(row.id),
				name: row.name
			}));
		} else {
			selectableDepartment.value = [];
		}
	} catch (error) {
		console.error("获取政府机构字典 error", error);
		selectableDepartment.value = [];
	}
};

/** 科技领域：与「全部领域」互斥；空选时回到「全部领域」 */
const handleChangePolicyAreaList = (val) => {
	if (val.includes(POLICY_FILTER_ALL_AREA) && val.length > 1) {
		if (val[val.length - 1] === POLICY_FILTER_ALL_AREA) {
			selectedAreaList.value = [POLICY_FILTER_ALL_AREA];
		} else {
			selectedAreaList.value = val.filter((item) => item !== POLICY_FILTER_ALL_AREA);
		}
	} else if (val.length === 0) {
		selectedAreaList.value = [POLICY_FILTER_ALL_AREA];
	}
	currentPage.value = 1;
	handleGetThinkPolicy();
};

/** 涉及部门：与「全部部门」互斥；空选时回到「全部部门」 */
const handleChangePolicyDepartmentList = (val) => {
	if (val.includes(POLICY_FILTER_ALL_DEPT) && val.length > 1) {
		if (val[val.length - 1] === POLICY_FILTER_ALL_DEPT) {
			selectedDepartmentList.value = [POLICY_FILTER_ALL_DEPT];
		} else {
			selectedDepartmentList.value = val.filter((item) => item !== POLICY_FILTER_ALL_DEPT);
		}
	} else if (val.length === 0) {
		selectedDepartmentList.value = [POLICY_FILTER_ALL_DEPT];
	}
	currentPage.value = 1;
	handleGetThinkPolicy();
};

/** 发布时间：与「全部时间」互斥；空选时回到「全部时间」 */
const handleChangePolicyYearList = (val) => {
	if (val.includes(POLICY_FILTER_ALL_TIME) && val.length > 1) {
		if (val[val.length - 1] === POLICY_FILTER_ALL_TIME) {
			selectedYearList.value = [POLICY_FILTER_ALL_TIME];
		} else {
			selectedYearList.value = val.filter((item) => item !== POLICY_FILTER_ALL_TIME);
		}
	} else if (val.length === 0) {
		selectedYearList.value = [POLICY_FILTER_ALL_TIME];
	}
	currentPage.value = 1;
	handleGetThinkPolicy();
};

const policyList = ref([
	// {
	// 	img: Img1,
	// 	title: "创建并定制针对人工智能技术的验证、确认与评估技术。",
	// 	time: "2025年6月26日",
	// 	desc: "保持美国在人工智能与机器学习领域的优势",
	// 	tagList: ["人工智能", "集成电路"],
	// 	fileList: [
	// 		{
	// 			type: "法案",
	// 			title: "2024《芯片科学法案》"
	// 		},
	// 		{
	// 			type: "法案",
	// 			title: "2024《芯片科学法案》"
	// 		}
	// 	]
	// },
	// {
	// 	img: Img1,
	// 	title: "为运用人工智能的新作战概念建立开发、测试与评估流程。",
	// 	time: "2025年6月26日",
	// 	desc: "保持美国在人工智能与机器学习领域的优势",
	// 	tagList: ["人工智能", "集成电路"],
	// 	fileList: [
	// 		{
	// 			type: "法案",
	// 			title: "2024《芯片科学法案》"
	// 		},
	// 		{
	// 			type: "法案",
	// 			title: "2024《芯片科学法案》"
	// 		}
	// 	]
	// },
	// {
	// 	img: Img1,
	// 	title: "通过制定和维护一个前瞻性的人工智能发展路线图来管理预期，该路线图应阐明国防部在近期（一至两年）、中期（三至五年）和远期（六至十年）部署人工智能的现实目标",
	// 	time: "2025年6月26日",
	// 	desc: "保持美国在人工智能与机器学习领域的优势",
	// 	tagList: ["人工智能", "集成电路"],
	// 	fileList: [
	// 		{
	// 			type: "法案",
	// 			title: "2024《芯片科学法案》"
	// 		},
	// 		{
	// 			type: "政令",
	// 			title: "2025《关于优化美军作战决策结构的建议》"
	// 		}
	// 	]
	// },
]);

//获取当前时间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}`;
}

/** 当天 YYYY-MM-DD，作政策列表 endDate */
function getTodayYmd() {
	const d = new Date();
	const y = d.getFullYear();
	const m = String(d.getMonth() + 1).padStart(2, "0");
	const day = String(d.getDate()).padStart(2, "0");
	return `${y}-${m}-${day}`;
}

/** 「更早」对应自然年区间下界（含） */
const POLICY_YEAR_EARLIER_START = 2000;
/** 「更早」对应自然年上界（含） */
const POLICY_YEAR_EARLIER_END = 2020;
const POLICY_YEAR_LABEL_RE = /^(\d{4})年$/;

/** 勾选「全部时间」时的固定起止（结束日按产品要求写死） */
const POLICY_ALL_TIME_START_DATE = "2000-01-01";
const POLICY_ALL_TIME_END_DATE = "2025-12-31";

/**
 * 根据发布时间多选（如「2025年」「更早」）推导列表查询 startDate / endDate
 * - 仅选「2025年」→ 2025-01-01 ~ 2025-12-31
 * - 多选多个自然年 → 取最小年 01-01 与最大年 12-31 的包络
 * - 「更早」→ 2000-01-01 ~ 2020-12-31，可与具体年份合并为并集区间
 * - 仅「全部时间」→ 2000-01-01 ~ 2025-12-31（写死）
 * - 未选任何项（无「全部时间」）→ 与顶部「近一年/两年/三年」一致
 */
function getPolicyListDateRangeFromYearList(labels, relativeYearYears) {
	const raw = Array.isArray(labels) ? labels.filter(Boolean) : [];
	const hasAllTime = raw.includes(POLICY_FILTER_ALL_TIME);
	const set = new Set(raw);
	set.delete(POLICY_FILTER_ALL_TIME);
	if (set.size === 0) {
		if (hasAllTime) {
			return { startDate: POLICY_ALL_TIME_START_DATE, endDate: POLICY_ALL_TIME_END_DATE };
		}
		const years = Number(relativeYearYears) > 0 ? Number(relativeYearYears) : 1;
		return { startDate: getDateYearsAgo(years), endDate: getTodayYmd() };
	}
	let minY = null;
	let maxY = null;
	if (set.has("更早")) {
		minY = POLICY_YEAR_EARLIER_START;
		maxY = POLICY_YEAR_EARLIER_END;
	}
	for (const lab of set) {
		const m = String(lab).match(POLICY_YEAR_LABEL_RE);
		if (!m) {
			continue;
		}
		const y = Number(m[1]);
		minY = minY == null ? y : Math.min(minY, y);
		maxY = maxY == null ? y : Math.max(maxY, y);
	}
	if (minY == null || maxY == null) {
		const years = Number(relativeYearYears) > 0 ? Number(relativeYearYears) : 1;
		return { startDate: getDateYearsAgo(years), endDate: getTodayYmd() };
	}
	return {
		startDate: `${minY}-01-01`,
		endDate: `${maxY}-12-31`
	};
}

/** 将接口 reportDate（如 2025-12-28T08:00:00）格式化为 2025年12月28日（按字符串日期部分，避免时区偏移） */
function formatPolicyReportDateToCn(isoStr) {
	if (!isoStr) {
		return "";
	}
	const m = String(isoStr).match(/^(\d{4})-(\d{1,2})-(\d{1,2})/);
	if (!m) {
		return "";
	}
	return `${m[1]}年${Number(m[2])}月${Number(m[3])}日`;
}

/** 接口 domains 转为标签文案列表 */
function normalizePolicyDomains(domains) {
	if (!Array.isArray(domains)) {
		return [];
	}
	return domains
		.map((d) => {
			if (typeof d === "string") {
				return d;
			}
			return d?.name ?? d?.industryName ?? d?.domainName ?? "";
		})
		.filter(Boolean);
}

/** 列表行映射：左侧图为 organizations[0].logoUrl，文案与法案/政令用接口字段名 */
function mapPolicyRowToView(row) {
	const orgs = Array.isArray(row.organizations) ? row.organizations : [];
	const logoUrl = orgs[0]?.logoUrl || defaultNewsIcon;
	const reportDateDisplay = formatPolicyReportDateToCn(row.reportDate);
	return {
		...row,
		titleZh: row.titleZh ?? row.title ?? "",
		contentZh: row.contentZh ?? row.content ?? "",
		reportDateDisplay,
		imageUrl: logoUrl,
		tagList: normalizePolicyDomains(row.domains),
		relatedBills: Array.isArray(row.relatedBills) ? row.relatedBills : [],
		relatedAdministrativeOrders: Array.isArray(row.relatedAdministrativeOrders)
			? row.relatedAdministrativeOrders
			: [],
		reportId: row.reportId ?? row.id
	};
}

const toDetail = item => {
	window.sessionStorage.setItem("curTabName", item.contentZh ?? item.content ?? "");
	const route = router.resolve({
		name: "ReportDetail",
		params: {
			id: item.reportId
		}
	});
	window.open(route.href, "_blank");
};

const total = ref(0);
/** null：界面显示「发布时间」占位且默认按发布时间倒序；true 正序；false 倒序（显式选中） */
const sort = ref(null);
const handleSwithSort = () => {
	sort.value = sort.value === true ? false : true;
	handleGetThinkPolicy();
};

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

const handleGetThinkPolicy = async () => {
	try {
		const thinkTankId = router.currentRoute._value.params.id;
		const domainIds = selectedAreaList.value
			.filter((id) => id != null && id !== "" && id !== POLICY_FILTER_ALL_AREA)
			.map((id) => String(id))
			.join(",");
		const orgIds = selectedDepartmentList.value
			.filter((id) => id != null && id !== "" && id !== POLICY_FILTER_ALL_DEPT)
			.map((id) => String(id))
			.join(",");
		const { startDate, endDate } = getPolicyListDateRangeFromYearList(
			selectedYearList.value,
			selectedYear.value
		);
		const parmas = {
			thinkTankId,
			startDate,
			endDate,
			pageNum: currentPage.value,
			pageSize: 10,

			sortOrder: sort.value === true ? "asc" : "desc",
			sortFun: sort.value === true,
			keyword: searchPolicy.value
		};
		if (domainIds) {
			parmas.domainIds = domainIds;
		}
		if (orgIds) {
			parmas.orgIds = orgIds;
		}
		const res = await getThinkPolicy(parmas);
		console.log("智库政策", res);
		if (res.code === 200 && res.data) {
			const list = Array.isArray(res.data.content) ? res.data.content : [];
			policyList.value = list.map((row) => mapPolicyRowToView(row));
			total.value = res.data.totalElements ?? res.data.total ?? 0;
		} else {
			// 业务失败（如 code 500、data 为 null）时清空列表，避免仍展示上一次请求的数据
			policyList.value = [];
			total.value = 0;
		}
	} catch (error) {
		console.error("获取智库政策error", error);
		policyList.value = [];
		total.value = 0;
	}
};

watch(
	() => selectedYear.value,
	() => {
		currentPage.value = 1;
		handleGetThinkPolicy();
	}
);

onMounted(() => {
	handleGetThinkPolicyIndustry();
	handleGetThinkPolicyIndustryTotal();
	handleGetThinkPolicyIndustryChange();
	handleGetHylyList();
	handleGetGovAgencyList();
	handleGetThinkPolicy();
	handleGetPolicyAdviceDeptDistribution();
});
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100%;

	.policy-tracking-el-empty {
		padding: 0;
		margin: 0;
	}

	.top {
		height: 420px;
		width: 1600px;
		margin: 16px 0;
		display: flex;
		gap: 16px;

		.box {
			width: 520px;
			height: 420px;
			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);

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

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

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

				.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;
					letter-spacing: 0px;
					text-align: left;
				}

				.box-header-right {
					position: absolute;
					top: 12px;
					right: 27px;
					height: 24px;
					color: rgba(5, 95, 194, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: right;
				}

				.select-box {
					position: absolute;
					z-index: 999;
					top: 12px;
					right: 43px;
					width: 100px;
					height: 28px;

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

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

					.paixu-btn {
						display: flex;
						width: 120px;
						height: 32px;
						box-sizing: border-box;
						border: 1px solid rgba(230, 231, 232, 1);
						border-radius: 4px;
						background: rgba(255, 255, 255, 1);

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

						cursor: pointer;

						.icon1 {
							width: 11px;
							height: 14px;
							margin-top: 10px;
							margin-left: 9px;

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

						.text {
							height: 19px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							letter-spacing: 0px;
							text-align: left;
							margin-top: 7px;
							margin-left: 9px;
						}

						.icon2 {
							width: 10px;
							height: 5px;
							margin-top: 5px;
							margin-left: 13px;

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

			/* 与智库概览 box6-main 一致：主区高度 372、底边距留给 TipTab + AI */
			.box-main {
				width: 520px;
				height: 372px;
				box-sizing: border-box;
				padding: 24px 24px 64px 24px;
				position: relative;

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

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

				#box1Chart,
				#box2Chart {
					width: 472px;
					height: 284px;
				}

				.source {
					position: absolute;
					bottom: 21px;
					left: 50%;
					transform: translateX(-50%);
					width: 350px;
					height: 22px;
					display: flex;
				}

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

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

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

			.box3-main {
				width: 520px;
				height: 372px;
				box-sizing: border-box;
				padding: 24px 24px 64px 24px;
				position: relative;
				overflow: hidden;

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

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

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

				.box3-legend-nav-btn {
					flex-shrink: 0;
					width: 32px;
					height: 32px;
					margin-top: 6px;
					padding: 0;
					box-sizing: border-box;
					border: 1px solid rgba(220, 223, 230, 1);
					border-radius: 6px;
					background: rgba(255, 255, 255, 1);
					color: rgba(59, 65, 75, 1);
					font-size: 20px;
					line-height: 1;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.box3-legend-nav-btn:hover:not(:disabled) {
					border-color: var(--color-main-primary, #055fc2);
					color: var(--color-main-primary, #055fc2);
				}

				.box3-legend-nav-btn:disabled {
					opacity: 0.35;
					cursor: not-allowed;
				}

				.box3-chart-canvas {
					flex: 1;
					min-width: 0;
					width: 472px;
					height: 284px;
				}

				.source {
					position: absolute;
					bottom: 21px;
					left: 50%;
					transform: translateX(-50%);
					width: 350px;
					height: 22px;

					display: flex;
				}

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

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

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

	.bottom {
		width: 1600px;

		.bottom-header {
			height: 48px;
			display: flex;
			justify-content: space-between;

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

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

					cursor: pointer;
					position: absolute;
					right: 8px;
					top: 8px;

					display: flex;
					justify-content: flex-end;

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

			.select-box {
				margin-right: 5px;
				display: flex;

				.paixu-btn {
					display: flex;
					width: 120px;
					height: 32px;
					box-sizing: border-box;
					border: 1px solid rgba(230, 231, 232, 1);
					border-radius: 4px;
					background: rgba(255, 255, 255, 1);

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

					cursor: pointer;

					.icon1 {
						width: 11px;
						height: 14px;
						margin-top: 10px;
						margin-left: 9px;

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

					.text {
						height: 19px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 18px;
						letter-spacing: 0px;
						text-align: left;
						margin-top: 7px;
						margin-left: 9px;
					}

					.icon2 {
						width: 10px;
						height: 5px;
						margin-top: 5px;
						margin-left: 13px;

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

		.bottom-main {
			display: flex;
			justify-content: space-between;

			.left {
				width: 360px;
				height: 100%;
				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);
				padding-bottom: 24px;

				.select-box-science {
					margin-top: 16px;

					.select-box-header {
						display: flex;

						.title {
							font-family: "Source Han Sans CN";
							font-weight: 700;
							font-size: 16px;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}
					}

					.select-main {
						margin-top: 12px;
					}

					.checkbox-group {
						display: grid;
						grid-template-columns: repeat(2, 160px);
						gap: 8px 4px;
						margin-left: 24px;

						.filter-checkbox {
							width: 160px;
							height: 24px;
							margin: 0;
							font-family: "Source Han Sans CN", sans-serif;
							font-weight: 400;
							font-size: 16px;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}

					.paixu-btn {
						display: flex;
						width: 120px;
						height: 32px;
						box-sizing: border-box;
						border: 1px solid rgba(230, 231, 232, 1);
						border-radius: 4px;
						background: rgba(255, 255, 255, 1);

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

						cursor: pointer;

						.icon1 {
							width: 11px;
							height: 14px;
							margin-top: 10px;
							margin-left: 9px;

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

						.text {
							height: 19px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							letter-spacing: 0px;
							text-align: left;
							margin-top: 7px;
							margin-left: 9px;
						}

						.icon2 {
							width: 10px;
							height: 5px;
							margin-top: 5px;
							margin-left: 13px;

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

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

					.title {
						color: rgba(5, 95, 194, 1);
						margin-left: 17px;
						font-family: Microsoft YaHei;
						font-style: Bold;
						font-size: 20px;
						font-weight: 700;
						line-height: 26px;
						letter-spacing: 0px;
						text-align: left;
					}
				}

				.select-box-department {
					margin-top: 16px;


					.select-box-header {
						display: flex;

						.title {
							font-family: "Source Han Sans CN";
							font-weight: 700;
							font-size: 16px;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}
					}

					.select-main {
						margin-top: 12px;
					}

					.checkbox-group {
						display: grid;

						gap: 8px;
						margin-left: 24px;

						.filter-checkbox {

							height: 24px;
							margin: 0;
							font-family: "Source Han Sans CN", sans-serif;
							font-weight: 400;
							font-size: 16px;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}

					.paixu-btn {
						display: flex;
						width: 120px;
						height: 32px;
						box-sizing: border-box;
						border: 1px solid rgba(230, 231, 232, 1);
						border-radius: 4px;
						background: rgba(255, 255, 255, 1);

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

						cursor: pointer;

						.icon1 {
							width: 11px;
							height: 14px;
							margin-top: 10px;
							margin-left: 9px;

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

						.text {
							height: 19px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							letter-spacing: 0px;
							text-align: left;
							margin-top: 7px;
							margin-left: 9px;
						}

						.icon2 {
							width: 10px;
							height: 5px;
							margin-top: 5px;
							margin-left: 13px;

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

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

					.title {
						color: rgba(5, 95, 194, 1);
						margin-left: 17px;
						font-family: Microsoft YaHei;
						font-style: Bold;
						font-size: 20px;
						font-weight: 700;
						line-height: 26px;
						letter-spacing: 0px;
						text-align: left;
					}
				}

				.select-box-publish {
					margin-top: 16px;


					.select-box-header {
						display: flex;

						.title {
							font-family: "Source Han Sans CN";
							font-weight: 700;
							font-size: 16px;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}
					}

					.select-main {
						margin-top: 12px;
					}

					.checkbox-group {
						display: grid;
						grid-template-columns: repeat(2, 160px);
						gap: 8px 4px;
						margin-left: 24px;

						.filter-checkbox {
							width: 160px;
							height: 24px;
							margin: 0;
							font-family: "Source Han Sans CN", sans-serif;
							font-weight: 400;
							font-size: 16px;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}

					.paixu-btn {
						display: flex;
						width: 120px;
						height: 32px;
						box-sizing: border-box;
						border: 1px solid rgba(230, 231, 232, 1);
						border-radius: 4px;
						background: rgba(255, 255, 255, 1);

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

						cursor: pointer;

						.icon1 {
							width: 11px;
							height: 14px;
							margin-top: 10px;
							margin-left: 9px;

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

						.text {
							height: 19px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							letter-spacing: 0px;
							text-align: left;
							margin-top: 7px;
							margin-left: 9px;
						}

						.icon2 {
							width: 10px;
							height: 5px;
							margin-top: 5px;
							margin-left: 13px;

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

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

					.title {
						color: rgba(5, 95, 194, 1);
						margin-left: 17px;
						font-family: Microsoft YaHei;
						font-style: Bold;
						font-size: 20px;
						font-weight: 700;
						line-height: 26px;
						letter-spacing: 0px;
						text-align: left;
					}
				}
			}

			.right {
				width: 1224px;
				min-height: 1670px;
				margin-bottom: 20px;
				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);

				.right-main {
					margin-top: 17px;
					margin-left: 0;
					width: 100%;
					box-sizing: border-box;
					padding-left: 37px;
					padding-right: 0;
					max-height: 1540px;

					.right-main-item {
						// height: 154px;
						box-sizing: border-box;
						padding-top: 16px;
						padding-bottom: 16px;
						margin-left: -37px;
						padding-left: 37px;
						padding-right: 36px;
						width: calc(100% + 37px - 36px);
						height: 153px;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						display: flex;

						.item-left {
							width: 57px;
							height: 77px;

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

						.item-right {
							margin-left: 15px;
							display: flex;
							width: 100%;
							justify-content: space-between;

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

							.info {
								margin-top: 7px;
								height: 22px;

								display: flex;

								.text {
									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: left;
									width: 1020px;
									white-space: nowrap;
									/* 强制不换行，保持一行 */
									overflow: hidden;
									/* 超出隐藏 */
									text-overflow: ellipsis;
									/* 超出显示 ... */
								}

								.more {
									width: 16px;
									height: 16px;
									margin-top: 3px;
									margin-left: 9px;

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

							.tag-box {
								margin-top: 7px;
								display: flex;
								gap: 8px;

								.tag {
									height: 22px;
									padding: 0 8px;
									box-sizing: border-box;
									border: 1px solid rgba(230, 231, 232, 1);
									border-radius: 4px;
									background: rgba(247, 248, 249, 1);
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
									line-height: 20px;
								}
							}

							.file-box {
								margin-top: 7px;
								display: flex;
								gap: 8px;

								.file {
									height: 32px;
									padding: 4px 8px;
									display: flex;
									justify-content: center;
									align-items: center;
									gap: 12px;
									border-radius: 4px;
									background: rgba(246, 250, 255, 1);

									.type {
										height: 22px;
										margin-top: 1px;
										padding: 0 4px;
										border-radius: 4px;
										background: rgba(231, 243, 255, 1);
										color: rgba(5, 95, 194, 1);
										font-family: "Source Han Sans CN";
										font-size: 14px;
										font-weight: 400;
										line-height: 22px;
									}

									.title {
										color: rgba(5, 95, 194, 1);
										font-family: "Source Han Sans CN";
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
									}

									.more {
										width: 20px;
										height: 20px;
										display: flex;
										margin-top: 2px;

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

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

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

					.page-box {
						margin-top: 23px;
						margin-right: 36px;

						height: 32px;
					}
				}
			}
		}
	}
}

:deep(.select-prefix-img) {
	width: 8px !important;
	height: 8px !important;
	margin-right: 4px;
}
</style>
