<template>
	<div class="home-wrapper">
		<div class="home-main">
			<div class="home-main-center">
				<div class="center-center">
					<div class="center-header">
						<div class="center-header-left">
							<img class="iconstyle" src="./assets/images/warning.png" />
							<div class="center-header-title">风险信号管理</div>
						</div>
						<div class="center-header-right">
							<img class="img" src="./assets/images/danger.png" />
							<div class="text">风险统计</div>
						</div>
					</div>
					<div class="center-middle">
						<div class="center-middle-left">
							<div class="lineitem">
								<div class="item">
									<div class="top">
										<div class="dot" style="background-color: rgba(95, 101, 108, 1)"></div>
										<div class="text1">本年新增风险</div>
									</div>
									<div class="text2" style="color: rgba(95, 101, 108, 1)">
										{{ basicInfo.yearAdded + " 项" }}
									</div>
								</div>
								<div class="item">
									<div class="top">
										<div class="dot" style="background-color: rgba(95, 101, 108, 1)"></div>
										<div class="text1">本月新增风险</div>
									</div>
									<div class="text2" style="color: rgba(95, 101, 108, 1)">
										{{ basicInfo.monthAdded + " 项" }}
									</div>
								</div>
							</div>
							<div class="lineitem">
								<div class="item">
									<div class="top">
										<div class="dot" style="background-color: rgba(5, 95, 194, 1)"></div>
										<div class="text1">已处理风险</div>
									</div>
									<div class="text2" style="color: rgba(5, 95, 194, 1)">{{ basicInfo.dealCount + " 项" }}</div>
								</div>
								<div class="item">
									<div class="top">
										<div class="dot" style="background-color: rgba(206, 79, 81, 1)"></div>
										<div class="text1">待处理风险</div>
									</div>
									<div class="text2" style="color: rgba(206, 79, 81, 1)">
										{{ basicInfo.pendingCount + " 项" }}
									</div>
								</div>
							</div>
						</div>
						<div class="center-middle-right" id="chartCalendar"></div>
					</div>
				</div>
			</div>

			<div class="home-main-footer">
				<div class="home-main-footer-main">
					<div class="left">

						<div class="select-box">
							<div class="header">
								<div class="icon"></div>
								<div class="title">{{ "科技领域" }}</div>
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group" :model-value="selectedAreaModel"
									@change="handleAreaGroupChange">
									<el-checkbox class="filter-checkbox all-checkbox" :label="RISK_FILTER_ALL_AREA">
										{{ RISK_FILTER_ALL_AREA }}
									</el-checkbox>
									<el-checkbox v-for="item in area" :key="item.id" class="filter-checkbox" :label="item.id">
										{{ item.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="select-box">
							<div class="header">
								<div class="icon"></div>
								<div class="title">{{ "发布时间" }}</div>
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group" :model-value="selectedTimeModel"
									@change="handleTimeGroupChange">

									<el-checkbox class="filter-checkbox all-checkbox" :label="Time_FILTER_ALL_SOURCE">
										{{ Time_FILTER_ALL_SOURCE }}
									</el-checkbox>
									<el-checkbox v-for="item in timeSource" :key="item.id" class="filter-checkbox" :label="item.id">
										{{ item.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="select-box">
							<div class="header">
								<div class="icon"></div>
								<div class="title">{{ "风险来源" }}</div>
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group" :model-value="selectedRiskSourceModel"
									@change="handleRiskSourceGroupChange">
									<el-checkbox class="filter-checkbox all-checkbox" :label="RISK_FILTER_ALL_SOURCE">
										{{ RISK_FILTER_ALL_SOURCE }}
									</el-checkbox>
									<el-checkbox v-for="item in riskSource" :key="item.id" class="filter-checkbox" :label="item.id">
										{{ item.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="select-box">
							<div class="header">
								<div class="icon"></div>
								<div class="title">{{ "风险类型" }}</div>
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group" :model-value="selectedRiskTypeModel"
									@change="handleRiskTypeGroupChange">
									<el-checkbox class="filter-checkbox all-checkbox" :label="RISK_FILTER_ALL_TYPE">
										{{ RISK_FILTER_ALL_TYPE }}
									</el-checkbox>
									<el-checkbox v-for="item in riskType" :key="item" class="filter-checkbox" :label="item">
										{{ item }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>



						<div class="select-box">
							<div class="header">
								<div class="icon"></div>
								<div class="title">{{ "风险等级" }}</div>
							</div>
							<div class="select-main">
								<el-checkbox-group class="checkbox-group" :model-value="selectedRiskDegreeModel"
									@change="handleRiskDegreeGroupChange">
									<el-checkbox class="filter-checkbox all-checkbox" :label="RISK_FILTER_ALL_LEVEL">
										{{ RISK_FILTER_ALL_LEVEL }}
									</el-checkbox>
									<el-checkbox v-for="item in riskDegree" :key="item.id" class="filter-checkbox" :label="item.id">
										{{ item.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>

					</div>

					<div class="right">
						<div class="right-header">
							<div class="header-left">
								<div class="btn-left" :class="{ btnleftactive: activeProcessStatusId === item.id }"
									@click="handleClickBtn(item)" v-for="item in processStatusList" :key="item.id">
									<div class="btn-text" :class="{ btntextactive: activeProcessStatusId === item.id }">
										{{ item.name }}
									</div>
								</div>
							</div>
							<div class="header-right">
								<div class="searchbox">
									<el-input @keyup.enter="handleSearch" v-model="kewword" style="width: 268px; height: 100%"
										placeholder="搜索" />
									<div class="search-btn" @click="handleSearch"></div>
								</div>
								<div class="select-box">
									<el-select v-model="sortModel" class="resource-library-sort-select" placeholder="发布时间"
										style="width: 120px" :teleported="true" placement="bottom-start"
										:popper-options="resourceLibrarySortPopperOptions" @change="handleSortChange">
										<template #prefix>
											<img v-if="sortModel !== true"
												src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image down.png"
												class="resource-library-sort-prefix-img" alt="" @click.stop="toggleSortPrefix" />
											<img v-else src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image up.png"
												class="resource-library-sort-prefix-img" alt="" @click.stop="toggleSortPrefix" />
										</template>
										<el-option :key="'risk-sort-asc'" label="正序" :value="true" />
										<el-option :key="'risk-sort-desc'" label="倒序" :value="false" />
									</el-select>
								</div>
							</div>
						</div>

						<div class="right-main">
							<div class="itemlist" v-for="(val, idx) in riskList" :key="idx">
								<div class="box-title">
									<div class="risktitle">{{ val.title }}</div>
									<div class="risktype" :class="{
										risk1: val.risktype === '特别重大风险' || val.risktype === '特别重大风险',
										risk2: val.risktype === '重大风险',
										risk3: val.risktype === '一般风险'
									}">
										<div class="icon" :class="{
											icon1: val.risktype === '特别重大风险' || val.risktype === '特别重大风险',
											icon2: val.risktype === '重大风险',
											icon3: val.risktype === '一般风险'
										}"></div>
										<div class="text">{{ val.risktype }}</div>
									</div>
								</div>
								<div class="box-source">
									<img class="source-pic" :src="DefaultIcon2" alt="" />
									<div class="source-text">{{ val.origin }}</div>
									<div class="source-text">{{ val.time }}</div>
								</div>
								<div class="desc-box">{{ val.dsc }}</div>
								<div class="tag-box" v-if="val.tag.length">

									<AreaTag v-for="(tag, index) in val.tag" :key="index" :tagName="tag">{{ tag }}</AreaTag>


								</div>
							</div>
						</div>
						<div class="right-footer">
							<div class="footer-left">
								{{ `共 ${totalNum} 项调查` }}
							</div>
							<div class="footer-right">
								<el-pagination @current-change="handleCurrentChange" :pageSize="pageSize" :current-page="currentPage"
									:total="totalNum" background layout="prev, pager, next" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getCountInfo, getDailyCount, getPageQuery } from "@/api/riskSignal/index";
import { getHylyList } from "@/api/thinkTank/overview";
import setChart from "@/utils/setChart";

import getCalendarHeatChart from "./utils/cleandarHeat";

import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import { normalizeExclusiveAllOption } from "@/views/thinkTank/utils/resourceLibraryFilters";

const riskType = ref(["科技法案", "行政令", "智库报告", "出口管制", "投融资限制", "市场准入限制", "规则限制"]);
const RISK_FILTER_ALL_TYPE = "全部类型";
const selectedRiskTypeModel = ref([RISK_FILTER_ALL_TYPE]);
const handleRiskTypeGroupChange = (val) => {
	selectedRiskTypeModel.value = normalizeExclusiveAllOption(val, RISK_FILTER_ALL_TYPE);
	handleGetPageQuery();
};

// 发布时间（与「全部时间」互斥）
const Time_FILTER_ALL_SOURCE = "全部时间";
const TIME_FILTER_1M = "TIME_FILTER_1M";
const TIME_FILTER_3M = "TIME_FILTER_3M";
const TIME_FILTER_6M = "TIME_FILTER_6M";
const TIME_FILTER_1Y = "TIME_FILTER_1Y";

const timeSource = ref([
	{ id: TIME_FILTER_1M, name: "近一个月" },
	{ id: TIME_FILTER_3M, name: "近三个月" },
	{ id: TIME_FILTER_6M, name: "近半年" },
	{ id: TIME_FILTER_1Y, name: "近一年" }
]);
const selectedTimeModel = ref([Time_FILTER_ALL_SOURCE]);
const handleTimeGroupChange = (val) => {
	selectedTimeModel.value = normalizeExclusiveAllOption(val, Time_FILTER_ALL_SOURCE);
	handleGetPageQuery();
};

const riskSource = ref([
	{
		name: "美国",
		id: "0502"
	},
	{
		name: "韩国",
		id: "0103"
	},
	{
		name: "日本",
		id: "0104"
	},
	{
		name: "德国",
		id: "0216"
	},
	{
		name: "英国",
		id: "0217"
	},
	{
		name: "法国",
		id: "0222"
	},
	{
		name: "澳大利亚",
		id: "0401"
	}
]);
const RISK_FILTER_ALL_SOURCE = "全部国家";
const selectedRiskSourceModel = ref([RISK_FILTER_ALL_SOURCE]);
const handleRiskSourceGroupChange = (val) => {
	selectedRiskSourceModel.value = normalizeExclusiveAllOption(val, RISK_FILTER_ALL_SOURCE);
	handleGetPageQuery();
};

const riskDegree = ref([
	{
		name: "特别重大风险",
		id: "特别重大风险"
	},
	{
		name: "重大风险",
		id: "重大风险"
	},
	{
		name: "较大风险",
		id: "较大风险"
	},
	{
		name: "一般风险",
		id: "一般风险"
	},
	{
		name: "低风险",
		id: "低风险"
	}
]);
const RISK_FILTER_ALL_LEVEL = "全部等级";
const selectedRiskDegreeModel = ref([RISK_FILTER_ALL_LEVEL]);
const handleRiskDegreeGroupChange = (val) => {
	selectedRiskDegreeModel.value = normalizeExclusiveAllOption(val, RISK_FILTER_ALL_LEVEL);
	handleGetPageQuery();
};

const area = ref([

]);

// 科技领域字典：与智库资源库一致
const handleGetHylyList = async () => {
	try {
		const res = await getHylyList();
		if (res.code === 200 && Array.isArray(res.data)) {
			area.value = res.data;
		} else {
			area.value = [];
		}
	} catch (e) {
		console.error("获取科技领域字典失败", e);
		area.value = [];
	}
};

const RISK_FILTER_ALL_AREA = "全部领域";
const selectedAreaModel = ref([RISK_FILTER_ALL_AREA]);
const handleAreaGroupChange = (val) => {
	selectedAreaModel.value = normalizeExclusiveAllOption(val, RISK_FILTER_ALL_AREA);
	handleGetPageQuery();
};

const processStatusList = ref([
	{
		name: "全部",
		id: -1
	},
	{
		name: "未读",
		id: 0
	},

	{
		name: "已读",
		id: 1
	}
]);
const activeProcessStatusId = ref(-1);

const handleClickBtn = item => {
	activeProcessStatusId.value = item.id;
	handleGetPageQuery();
};

const riskList = ref([
	{
		title: "扩大实体清单制裁范围，对中企子公司实施同等管制",
		origin: "美国商务部",
		fileType: "实体清单",
		time: "2025年11月10日  16:14",
		dsc: "任何被列入美国出口管制“实体清单”或“军事最终用户清单”的企业，如果其直接或间接持有另一家公司 ​50%或以上的股权，那么这家被控股的公司也将自动受到与清单上母公司同等的出口管制限制",
		tag: ["生物科技", "人工智能"],
		risktype: "特别重大风险",
		pic: "src/views/riskSignal/assets/images/origin1.png"
	},
	{
		title: "大而美法案通过国会众议院投票，将提交至总统签署",
		origin: "美国国会 · 科技法案",
		time: "2025年11月10日  16:14",
		dsc: "",
		tag: ["能源", "人工智能"],
		risktype: "重大风险",
		pic: "src/views/riskSignal/assets/images/origin2.png",
		textcolor: "rgba(255, 149, 77, 1)",
		bgcolor: "rgba(255, 149, 77, 0.1)"
	},
	{
		title: "兰德公司发布智库报告《中美经济竞争：复杂经济和地缘政治关系中的收益和风险》",
		origin: "兰德公司 · 科技智库",
		time: "2025年11月10日  16:14",
		dsc: "包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。",
		tag: ["生物科技", "人工智能", "集成电路"],
		risktype: "一般风险",
		pic: "src/views/riskSignal/assets/images/origin3.png",
		textcolor: "rgba(5, 95, 194, 1)",
		bgcolor: "rgba(5, 95, 194, 0.1)"
	},
	{
		title: "美国白宫发布总统政令《关于进一步延长TikTok执法宽限期的行政令》",
		origin: "美国白宫 · 总统政令",
		time: "2025年11月10日  16:14",
		dsc: "再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。",
		tag: ["人工智能"],
		risktype: "一般风险",
		pic: "src/views/riskSignal/assets/images/origin2.png",
		textcolor: "rgba(5, 95, 194, 1)",
		bgcolor: "rgba(5, 95, 194, 0.1)"
	},
	{
		title: "美国财政部更新《特别指定国民清单》",
		origin: "美国财政部 · 特别指定国民清单",
		time: "2025年11月10日  16:14",
		dsc: "",
		tag: ["生物科技"],
		risktype: "特别重大风险",
		pic: "src/views/riskSignal/assets/images/origin4.png",
		textcolor: "rgba(206, 79, 81, 1)",
		bgcolor: "rgba(206, 79, 81, 0.1)"
	},
	{
		title: "美国FDA针对两家中国第三方检测机构的数据完整性问题采取行动",
		origin: "美国食品药品监督管理局 · 规则限制",
		time: "2025年11月10日  16:14",
		dsc: "FDA因发现数据伪造或无效问题，向两家中国第三方检测公司（天津中联科技检测有限公司和苏州大学卫生与环境技术研究所）正式发出“一般信函”。",
		tag: ["生物科技", "人工智能"],
		risktype: "特别重大风险",
		pic: "src/views/riskSignal/assets/images/origin5.png",
		textcolor: "rgba(206, 79, 81, 1)",
		bgcolor: "rgba(206, 79, 81, 0.1)"
	}
]);

const calendarData = ref([

]);

// 基本统计信息
const basicInfo = ref({
	dealCount: 0,
	monthAdded: 0,
	pendingCount: 0,
	yearAdded: 0
});
const handleGetCountInfo = async () => {
	try {
		const res = await getCountInfo();
		console.log("基本统计信息", res);
		if (res.code === 200 && res.data) {
			basicInfo.value = res.data;
		}
	} catch (error) { }
};

// 每日统计信息
const handleGetDailyCount = async () => {
	try {
		const res = await getDailyCount();
		console.log("每日统计信息", res);
		if (res.code === 200 && res.data) {
			calendarData.value = res.data.map(item => {
				return [item.day, item.count];
			});
		}
	} catch (error) { }
};

const handleCleandarChart = async () => {
	await handleGetDailyCount();
	let chartCalendar = getCalendarHeatChart(calendarData.value);
	setChart(chartCalendar, "chartCalendar");
};

/** null：占位「发布时间」且默认倒序；true 正序；false 倒序（显式选中），与智库概览资源库一致 */
const sortModel = ref(null);

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

const toggleSortPrefix = () => {
	sortModel.value = sortModel.value === true ? false : true;
	handleSortChange();
};

const handleSortChange = () => {
	handleGetPageQuery();
};

// 搜索
const kewword = ref("");
const handleSearch = async () => {
	handleGetPageQuery();
};

// 风险信号总数
const totalNum = ref(6);
const currentPage = ref(1);
const pageSize = ref(10);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
	handleGetPageQuery();
};

// 按条件分页查询风险信号信息
const handleGetPageQuery = async () => {
	const stripAll = (list, allLabel) => (Array.isArray(list) ? list.filter((x) => x !== allLabel) : []);
	// 选中「全部xxx」时，传空数组表示不按该条件过滤（与之前未勾选时语义一致）
	const riskTypes = stripAll(selectedRiskTypeModel.value, RISK_FILTER_ALL_TYPE);
	const srcCountryList = stripAll(selectedRiskSourceModel.value, RISK_FILTER_ALL_SOURCE);
	const riskLevels = stripAll(selectedRiskDegreeModel.value, RISK_FILTER_ALL_LEVEL);
	const techDomainIds = stripAll(selectedAreaModel.value, RISK_FILTER_ALL_AREA);
	const timeFilters = stripAll(selectedTimeModel.value, Time_FILTER_ALL_SOURCE);

	const pad2 = (n) => String(n).padStart(2, "0");
	const formatYmd = (d) => `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
	const buildStartDateFromTimeFilter = () => {
		if (!timeFilters.length) return "";
		// 单选时间窗：取第一个即可（normalizeExclusiveAllOption 已保证互斥）
		const id = timeFilters[0];
		const now = new Date();
		const start = new Date(now);
		if (id === TIME_FILTER_1M) start.setMonth(start.getMonth() - 1);
		else if (id === TIME_FILTER_3M) start.setMonth(start.getMonth() - 3);
		else if (id === TIME_FILTER_6M) start.setMonth(start.getMonth() - 6);
		else if (id === TIME_FILTER_1Y) start.setFullYear(start.getFullYear() - 1);
		else return "";
		return formatYmd(start);
	};
	const startDate = buildStartDateFromTimeFilter();
	const endDate = timeFilters.length ? formatYmd(new Date()) : "";

	let params;
	if (activeProcessStatusId.value === -1) {
		params = {
			riskTypes,
			srcCountryList,
			riskLevels,
			techDomainIds,
			startDate,
			endDate,
			keywords: kewword.value,
			pageNum: currentPage.value,
			pageSize: pageSize.value,
			sortField: "time",
			sortOrder: sortModel.value === true ? "asc" : "desc"
		};
	} else {
		params = {
			riskTypes,
			srcCountryList,
			riskLevels,
			techDomainIds,
			dealStatus: activeProcessStatusId.value,
			startDate,
			endDate,
			keywords: kewword.value,
			pageNum: 1,
			pageSize: 10,
			sortField: "time",
			sortOrder: sortModel.value === true ? "asc" : "desc"
		};
	}

	try {
		const res = await getPageQuery(params);
		console.log("按条件查询", res);
		if (res.code === 200 && res.data) {
			totalNum.value = res.data.totalElements;
			riskList.value = res.data.content.map(item => {
				return {
					title: item.titleZh,
					origin: item.srcOrgId,
					fileType: "暂无数据",
					time: item.time,
					dsc: item.contentZh,
					tag: [],
					risktype: item.level,
					pic: ""
				};
			});
		}
	} catch (error) {
		console.error("按条件查询error", error);
	}
};

onMounted(async () => {
	handleGetCountInfo();
	handleCleandarChart();
	await handleGetHylyList();
	handleGetPageQuery();
});
</script>

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

.home-wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
	background: rgba(248, 249, 250, 1);

	.home-main {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-size: 100% 100%;

		.home-main-center {
			margin-top: 34px;

			.center-center {
				margin: 0 auto;
				margin-top: 24px;
				width: 1600px;
				height: 288px;
				border-radius: 10px;
				box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
				background: rgba(255, 255, 255, 1);

				.center-header {
					display: flex;
					justify-content: space-between;

					.center-header-left {
						margin-left: 30px;
						display: flex;
						margin-top: 15px;

						.iconstyle {
							width: 27px;
							height: 24px;
							margin-top: 3px;
						}

						.center-header-title {
							margin-left: 10px;
							font-size: 24px;
							font-weight: 700;
							line-height: 32px;
						}
					}

					.center-header-right {
						margin-top: 20px;
						margin-right: 36px;
						width: 118px;
						height: 36px;
						border-radius: 6px;
						background-color: rgba(5, 95, 194, 1);
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						cursor: pointer;

						.img {
							width: 16px;
							height: 15px;
						}

						.text {
							margin-left: 8px;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							color: rgba(255, 255, 255, 1);
						}
					}
				}

				.center-middle {
					display: flex;

					.center-middle-left {
						display: flex;
						flex-direction: column;

						.lineitem {
							display: flex;
							justify-content: space-between;

							.item {
								margin-left: 61px;
								margin-top: 28px;
								margin-bottom: 3px;
								width: 111px;
								height: 66px;
								display: flex;
								flex-direction: column;
								justify-content: flex-end;

								.top {
									display: flex;
									justify-content: flex-end;
									padding-right: 2px;

									.dot {
										width: 6px;
										height: 6px;
										margin-top: 9px;
										margin-right: 7px;
										border-radius: 3px;
									}

									.text1 {
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
										color: rgba(59, 65, 75, 1);
										text-align: right;
									}
								}

								.text2 {
									font-size: 32px;
									font-weight: 700;
									line-height: 42px;
									text-align: right;
									/* 强制不换行 */
									white-space: nowrap;
								}
							}
						}
					}

					.center-middle-right {
						width: 1159px;
						height: 189px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 4px;
						margin-top: 16px;
						margin-left: 61px;
					}
				}
			}
		}

		.home-main-footer {
			// width: 100%;
			// height: 1059px;



			.home-main-footer-main {
				width: 1600px;
				margin: 30px auto;
				/* 意思：上30px / 左右auto / 下300px */
				box-sizing: border-box;
				// padding: 20px;
				display: flex;

				.left {
					width: 388px;

					border-radius: 10px;
					padding-bottom: 24px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
					background: rgba(255, 255, 255, 1);
					height: 100%;

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

						.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: "Source Han Sans CN";
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 1px;
								text-align: left;
							}
						}

						.select-main {
							margin-left: 25px;
							margin-top: 12px;

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

								:deep(.all-checkbox) {
									width: 160px;
									height: 24px;
									margin: 0;
								}

								:deep(.filter-checkbox) {
									width: 160px;
									height: 24px;
									margin-right: 0 !important;
								}

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

				.right {
					margin-left: 16px;
					margin-bottom: 24px;
					width: 1196px;
					height: 1821px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);

					.right-header {
						height: 60px;
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid rgba(234, 236, 238, 1);

						.header-left {
							display: flex;
							margin-left: 44px;
							gap: 36px;

							.btn-left {
								display: flex;
								height: 60px;
								cursor: pointer;
								align-items: center;

								.btn-text {
									font-size: 18px;
									font-weight: 400;
									line-height: 24px;
									color: rgba(59, 65, 75, 1);
									text-align: center;
								}

								.btntextactive {
									font-weight: 700;
									color: rgba(5, 95, 194, 1);
								}
							}

							.btnleftactive {
								border-bottom: 2px solid rgba(5, 95, 194, 1);
							}
						}

						.header-right {
							display: flex;
							margin-right: 42px;
							gap: 12px;
							align-items: center;

							.searchbox {
								display: flex;

								width: 300px;
								height: 32px;
								border-radius: 4px;
								border: 1px solid rgba(230, 231, 232, 1);
								background: rgba(255, 255, 255, 1);
								box-sizing: border-box;

								.search-btn {
									width: 16px;
									height: 16px;
									margin: 8px;
									cursor: pointer;
									background: url("./assets/images/search-icon.png");
								}
							}

							.select-box {
								width: 120px;
								height: 32px;
								box-sizing: border-box;

								.resource-library-sort-select {
									:deep(.el-select__wrapper) {
										height: 32px;
										min-height: 32px;
										border-radius: 4px;
									}
								}

								.resource-library-sort-prefix-img {
									width: 6.72px;
									height: 14px;
								}
							}
						}
					}

					.right-main {
						width: 1196px;
						min-height: 1667px;
						padding-left: 18px;
						padding-top: 6px;

						.itemlist {
							padding-left: 25px;
							padding-top: 16px;
							padding-bottom: 16px;
							width: 1138px;
							display: flex;

							flex-direction: column;
							border-bottom: 1px solid rgba(234, 236, 238, 1);

							.box-title {
								height: 28px;
								display: flex;
								justify-content: space-between;

								.risktitle {
									font-size: 18px;
									font-weight: 700;
									line-height: 24px;
									color: rgba(59, 65, 75, 1);
								}

								.risktype {
									height: 28px;
									padding: 0 8px;
									border-radius: 20px;
									font-size: 16px;
									font-weight: 400;
									line-height: 28px;
									display: flex;
									justify-content: center;
									align-items: center;
									gap: 6px;

									.icon {
										width: 4px;
										height: 4px;
										border-radius: 2px;
									}

									.icon1 {
										background: rgba(206, 79, 81, 1);
									}

									.icon2 {
										background: rgba(255, 149, 77, 1);
									}

									.icon3 {
										background: var(--color-main-active);
									}
								}

								.risk1 {
									background: rgba(206, 79, 81, 0.1);
									color: rgba(206, 79, 81, 1);
								}

								.risk2 {
									background: rgba(255, 149, 77, 0.1);
									color: rgba(255, 149, 77, 1);
								}

								.risk3 {
									background: rgba(231, 243, 255, 1);
									color: var(--color-main-active);
								}
							}

							.box-source {
								margin-top: 6px;
								display: flex;
								flex-direction: row;
								align-items: center;
								height: 24px;
								gap: 10px;

								.source-pic {
									width: 16px;
									height: 16px;
								}

								.source-text {
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									color: rgba(95, 101, 108, 1);
								}
							}

							.desc-box {
								margin-top: 9px;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								color: rgba(59, 65, 75, 1);
								text-align: justify;
							}

							.tag-box {
								height: 28px;
								margin-top: 11px;
								display: flex;
								flex-direction: row;
								gap: 8px;


							}
						}
					}

					.right-footer {
						display: flex;
						height: 90px;
						padding-top: 28px;
						justify-content: space-between;

						.footer-left {
							color: rgba(59, 65, 75, 1);
							font-family: "Source Han Sans CN";
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							margin-left: 26px;
							margin-top: 4px;
						}

						.footer-right {
							margin-right: 58px;
						}
					}
				}
			}
		}
	}
}

/* 复选框尺寸由 .checkbox-group 内统一控制，避免重复覆盖 */
</style>