<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">
							<el-option v-for="(item, index) in box1YearList" :key="index" :label="item.label + '年'"
								:value="item.value" @click="handleGetThinkPolicyIndustry()" />
						</el-select>
					</div>
				</div>
				<div class="box-main">
					<div id="box1Chart"></div>
					<div class="source">
						<div class="info"><img src="./images/image-exclamation.png"></div>
						<div class="text"> 数据来源：美国国会官网，数据时间：2015.1至2025.12</div>
					</div>
				</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">
							<el-option v-for="(item, index) in box2YearList" :key="index" :label="item.label + '年'"
								:value="item.value" @click="handleGetPolicyAdviceDeptDistribution()" />
						</el-select>
					</div>
				</div>
				<div class="box-main">
					<div id="box2Chart"></div>
					<div class="source">
						<div class="info"><img src="./images/image-exclamation.png"></div>
						<div class="text"> 数据来源：美国国会官网，数据时间：2015.1至2025.12</div>
					</div>
				</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 box2Data" :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">
							<el-option v-for="item in box3MonthsList" :key="item.value" :label="item.label + '年'" :value="item.value"
								@click="handleGetThinkPolicyIndustryChange()" />
						</el-select>
					</div>
				</div>
				<div class="box3-main">
					<div id="box3Chart"></div>
					<div class="source">
						<div class="info"><img src="./images/image-exclamation.png"></div>
						<div class="text"> 数据来源：美国国会官网，数据时间：2015.1至2025.12</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="bottom-header">
				<div class="search-box">
					<el-input placeholder="搜索政策建议" v-model="searchPolicy" style="width: 270px" />
					<div class="icon">
						<img src="./images/search-icon.png" alt="" />
					</div>
				</div>

				<div class="select-box">
					<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px" @click="handleGetThinkPolicy()">
						<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<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" 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">
							<div class="checkbox-group">
								<!-- <el-checkbox v-for="(item, index) in areaList" :key="index" v-model="selectedAreaList" :label="item"
									class="filter-checkbox">
									{{ item }}
								</el-checkbox> -->
								<el-checkbox class="filter-checkbox" label="全部领域"></el-checkbox>
								<el-checkbox class="filter-checkbox" v-for="research in areaList" :key="research.id"
									v-model="selectedAreaList" :label="research.id">
									{{ research.name }}
								</el-checkbox>
							</div>
						</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">
							<div class="checkbox-group">
								<!-- <el-checkbox v-for="(item, index) in areaList" :key="index" v-model="selectedAreaList" :label="item"
									class="filter-checkbox">
									{{ item }}
								</el-checkbox> -->
								<el-checkbox class="filter-checkbox" label="全部领域"></el-checkbox>
								<el-checkbox class="filter-checkbox" v-for="year in selectableYears" :key="year"
									v-model="selectedAreaList" :label="year">
									{{ year }}
								</el-checkbox>
							</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="right-main">
						<div class="right-main-item" v-for="(item, index) in policyList" :key="index">
							<div class="item-left">
								<img :src="item.imageUrl" alt="" />
							</div>
							<div class="item-right">
								<div>
									<div class="title">{{ item.content }}</div>
									<div class="info">
										{{ item.times }} · {{ item.name }}
										<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.relationBillsList" :key="idxx">
											<div class="type">法案</div>
											<div class="title">{{ file.billName }}</div>
											<div class="more">
												<img src="./images/arrow-right.png" alt="" />
											</div>
										</div>
										<div class="file" v-for="(file, idxx) in item.relationAdList" :key="idxx">
											<div class="type">政令</div>
											<div class="title">{{ file.adName }}</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="12" 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 } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getMultiLineChart from "./utils/multiLineChart";
import {
	getThinkPolicyIndustry,
	getThinkPolicyIndustryTotal,
	getThinkPolicyIndustryChange,
	getHylyList,
	getThinkPolicy,
	getPolicyAdviceDeptDistribution
} from "@/api/thinkTank/overview";

import { useRouter } from "vue-router";

const router = useRouter();
// 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 relationBillsList = ref([{ billName: "2025《人工智能安全与评估法案》" }])
const relationAdList = ref([{ adName: "2025《人工智能安全与评估法案》" }])
const box1SelectYear = ref("2025");

const box1YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	}
]);
const selectableYears = ref(["2025年", "2024年", "2023年", "2022年", "2021年", "更早"]);
const handleGetThinkPolicyIndustry = async () => {
	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) : [];
			const data = list.map(item => ({
				name: item.industry,
				value: item.amount,
				percent: item.percent
			}));
			box1Data.value = data;
			const box1Chart = getPieChart(box1Data.value);
			setChart(box1Chart, "box1Chart");

		}
	} catch (error) {
		console.error("获取提出建议领域分布error", error);
	}
};
const handleGetPolicyAdviceDeptDistribution = async () => {
	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)) {
			// 接口新结构：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
			}));

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

// 相关政策领域分布
const box2Data = ref([]);
const box2ColorList = ref(["#CE4F51", "#055FC2", "#13A8A8", "#722ED1", "#FA8C16", "#69B1FF"]);
const box2SelectYear = ref("2025");
const box2YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	}
]);

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) {
			box2Data.value = res.data;
		}
	} catch (error) {
		console.error("获取相关政策领域分布error", error);
	}
};
// 热门研究方向变化趋势
const box3Data = ref({
	// title: ["2024-Q1", "2024-Q2", "2024-Q3", "2024-Q4"],
	// data: [
	// 	{
	// 		name: "新能源",
	// 		value: [1,3,4,6]
	// 	},
	// 	{
	// 		name: "人工智能",
	// 		value: [1,3,4,2]
	// 	},
	// ...
	// ]
});

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

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

			// 提取所有行业名称
			const industries = new Set();
			res.data.forEach(item => {
				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);
			});
			box3Data.value = frontendData;
			// 传入全部行业数据，支持 13 条线同时展示
			const box3Chart = getMultiLineChart(
				box3Data.value.title,
				box3Data.value.data
			);
			setChart(box3Chart, "box3Chart");
		}
	} catch (error) {
		console.error("获取热门研究方向变化趋势error", error);
	}
};
// 搜索政策建议
const searchPolicy = ref("");

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

const selectedYear = ref(1);

// 科技领域
const areaList = ref([]);
const selectedAreaList = ref([]);

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

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

const total = ref(0);
const sort = ref(false);
const handleSwithSort = () => {
	sort.value = !sort.value;
	handleGetThinkPolicy()();
};

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

const handleGetThinkPolicy = async () => {
	try {
		const parmas = {
			id: router.currentRoute._value.params.id,
			startDate: getDateYearsAgo(selectedYear.value),
			sortFun: sort.value,
			currentPage: currentPage.value,
			pageSize: 10,
			researchTypeIds: selectedAreaList.value.join(",")
		};
		const res = await getThinkPolicy(parmas);
		console.log("智库政策", res);
		if (res.code === 200 && res.data) {
			policyList.value = res.data.content.map(item => ({
				...item,
				relationBillsList: relationBillsList.value,
				relationAdList: relationAdList.value
			}));
			total.value = res.data.totalElements;
		}
	} catch (error) {
		console.error("获取智库政策error", error);
	}
};

watch(
	() => selectedAreaList.value,
	val => {
		handleGetThinkPolicy();
	}
);

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

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

	.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;
				border-bottom: 1px solid rgba(234, 236, 238, 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(5, 95, 194, 1);
					font-family: Microsoft YaHei;
					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%;
							}
						}
					}
				}
			}

			.box-main {
				height: 372px;
				width: 520px;
				box-sizing: border-box;

				padding: 24px 24px 0;

				#box1Chart {
					height: 309px;
					width: 472px;
				}

				#box2Chart {
					height: 309px;
					width: 472px;
				}

				#box3Chart {
					height: 309px;
					width: 472px;
				}

				.source {
					margin: 0 auto;
					margin-top: 10px;

					/* 上下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;
					}
				}

			}

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




				#box3Chart {
					height: 300px;
					width: 520px;
				}

				.source {
					margin: 0 auto;
					margin-top: 10px;

					/* 上下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;
					}
				}
			}
		}
	}

	.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-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;
				max-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);
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						display: flex;

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

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

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

							.title {
								// height: 24px;
								color: rgba(59, 65, 75, 1);
								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;
								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;
								display: flex;

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