<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="left-box1">
							<div class="left-box1-header">
								<div class="icon"></div>
								<div class="title">{{ "风险类型" }}</div>
							</div>
							<div class="left-box1-main">
								<el-checkbox
									v-model="isRiskTypeCheckedAll"
									:indeterminate="isRiskTypeIndeterminate"
									@change="handleRiskTypeCheckAllChange"
									class="checkbox-all"
								>
									全部类型
								</el-checkbox>
								<el-checkbox-group
									class="checkbox-group"
									v-model="checkedRiskType"
									@change="handleRiskTypeChange"
								>
									<el-checkbox
										v-for="(item, index) in riskType"
										:key="index"
										:label="item"
										class="filter-checkbox"
									>
										{{ item }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="left-box1">
							<div class="left-box1-header">
								<div class="icon"></div>
								<div class="title">{{ "风险来源" }}</div>
							</div>
							<div class="left-box1-main">
								<el-checkbox
									v-model="isRiskSourceCheckedAll"
									:indeterminate="isRiskSourceIndeterminate"
									@change="handleRiskSourceCheckAllChange"
									class="checkbox-all"
								>
									全部来源
								</el-checkbox>
								<el-checkbox-group
									class="checkbox-group"
									v-model="checkedRiskSource"
									@change="handleRiskSourceChange"
								>
									<el-checkbox
										v-for="item in riskSource"
										:key="item.id"
										:label="item.id"
										class="filter-checkbox"
									>
										{{ item.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="left-box1">
							<div class="left-box1-header">
								<div class="icon"></div>
								<div class="title">{{ "风险等级" }}</div>
							</div>
							<div class="left-box1-main">
								<el-checkbox
									v-model="isRiskDegreeCheckedAll"
									:indeterminate="isRiskDegreeIndeterminate"
									@change="handleRiskDegreeCheckAllChange"
									class="checkbox-all"
								>
									全部等级
								</el-checkbox>
								<el-checkbox-group
									class="checkbox-group"
									v-model="checkedRiskDegree"
									@change="handleRiskDegreeChange"
								>
									<el-checkbox
										v-for="item in riskDegree"
										:key="item.id"
										:label="item.name"
										class="filter-checkbox"
									>
										{{ item.name }}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="left-box1">
							<div class="left-box1-header">
								<div class="icon"></div>
								<div class="title">{{ "涉及领域" }}</div>
							</div>
							<div class="left-box1-main">
								<el-checkbox
									v-model="isAreaCheckedAll"
									:indeterminate="isAreaIndeterminate"
									@change="handleAreaCheckAllChange"
									class="checkbox-all"
								>
									全部领域
								</el-checkbox>
								<el-checkbox-group class="checkbox-group" v-model="checkedArea" @change="handleAreaChange">
									<el-checkbox v-for="item in area" :key="item.id" :label="item.name" class="filter-checkbox">
										{{ 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">
									<div class="paixu-btn" @click="handleSwithSort">
										<div class="icon1">
											<img v-if="isSort" src="@/assets/icons/shengxu1.png" alt="" />
											<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
										</div>
										<div class="text">{{ "发布时间" }}</div>
										<div class="icon2">
											<img v-if="isSort" src="@/assets/icons/shengxu2.png" alt="" />
											<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
										</div>
									</div>
								</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="val.pic ? val.pic : DefaultIcon2" alt="" />
									<div class="source-text">{{ val.origin + " · " + val.fileType }}</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">
									<div class="tag" v-for="(tag, index) in val.tag" :key="index">{{ tag }}</div>
								</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 setChart from "@/utils/setChart";

import getCalendarHeatChart from "./utils/cleandarHeat";

import DefaultIcon2 from "@/assets/icons/default-icon2.png";

const riskType = ref(["科技法案", "行政令", "智库报告", "出口管制", "投融资限制", "市场准入限制", "规则限制"]);
const isRiskTypeCheckedAll = ref(false);
const isRiskTypeIndeterminate = ref(true);
const checkedRiskType = ref([]);

const handleRiskTypeCheckAllChange = val => {
	checkedRiskType.value = val ? riskType.value : [];
	isRiskTypeIndeterminate.value = false;
	handleGetPageQuery();
};
const handleRiskTypeChange = val => {
	const checkedCount = val.length;
	isRiskTypeCheckedAll.value = checkedCount === riskType.value.length;
	isRiskTypeIndeterminate.value = checkedCount > 0 && checkedCount < riskType.value.length;
	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 isRiskSourceCheckedAll = ref(false);
const isRiskSourceIndeterminate = ref(true);
const checkedRiskSource = ref([]);

const handleRiskSourceCheckAllChange = val => {
	checkedRiskSource.value = val
		? riskSource.value.map(item => {
				return item.id;
		  })
		: [];
	isRiskSourceIndeterminate.value = false;
	handleGetPageQuery();
};
const handleRiskSourceChange = val => {
	const checkedCount = val.length;
	isRiskSourceCheckedAll.value = checkedCount === riskSource.value.length;
	isRiskSourceIndeterminate.value = checkedCount > 0 && checkedCount < riskSource.value.length;
	handleGetPageQuery();
};

const riskDegree = ref([
	{
		name: "特别重大",
		id: "特别重大"
	},
	{
		name: "重大风险",
		id: "重大风险"
	},
	{
		name: "较大风险",
		id: "较大风险"
	},
	{
		name: "一般风险",
		id: "一般风险"
	},
	{
		name: "无风险",
		id: "无风险"
	}
]);
const isRiskDegreeCheckedAll = ref(false);
const isRiskDegreeIndeterminate = ref(true);
const checkedRiskDegree = ref([]);

const handleRiskDegreeCheckAllChange = val => {
	checkedRiskDegree.value = val
		? riskDegree.value.map(item => {
				return item.id;
		  })
		: [];
	isRiskDegreeIndeterminate.value = false;
	handleGetPageQuery();
};
const handleRiskDegreeChange = val => {
	const checkedCount = val.length;
	isRiskDegreeCheckedAll.value = checkedCount === riskDegree.value.length;
	isRiskDegreeIndeterminate.value = checkedCount > 0 && checkedCount < riskDegree.value.length;
	handleGetPageQuery();
};

const area = ref([
	{
		name: "人工智能",
		id: 1
	},
	{
		name: "生物科技",
		id: 2
	},
	{
		name: "新一代通信技术",
		id: 3
	},
	{
		name: "量子科技",
		id: 4
	},
	{
		name: "新能源",
		id: 5
	},
	{
		name: "集成电路",
		id: 6
	},
	{
		name: "海洋",
		id: 7
	},
	{
		name: "先进制造",
		id: 8
	},
	{
		name: "新材料",
		id: 9
	},
	{
		name: "航空航天",
		id: 10
	},
	{
		name: "深海",
		id: 11
	},
	{
		name: "极地",
		id: 12
	},
	{
		name: "太空",
		id: 13
	},
	{
		name: "核",
		id: 14
	},
	{
		name: "其他",
		id: 99
	}
]);

const isAreaCheckedAll = ref(false);
const isAreaIndeterminate = ref(true);
const checkedArea = ref([]);

const handleAreaCheckAllChange = val => {
	checkedArea.value = val
		? area.value.map(item => {
				return item.id;
		  })
		: [];
	isAreaIndeterminate.value = false;
	handleGetPageQuery();
};
const handleAreaChange = val => {
	const checkedCount = val.length;
	isAreaCheckedAll.value = checkedCount === area.value.length;
	isAreaIndeterminate.value = checkedCount > 0 && checkedCount < area.value.length;
	handleGetPageQuery();
};

const processStatusList = ref([
	{
		name: "全部",
		id: -1
	},
	{
		name: "未处理",
		id: 0
	},
	{
		name: "处理中",
		id: 1
	},
	{
		name: "已处理",
		id: 2
	}
]);
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([
	// ["2025-01-01", 20],
	// ["2025-01-05", 120],
	// ["2025-01-09", 220],
	// ["2025-01-15", 320],
	// ["2025-01-20", 120],
	// ["2025-01-24", 420],
	// ["2025-02-05", 80],
	// ["2025-02-08", 280],
	// ["2025-02-18", 480],
	// ["2025-02-11", 420],
	// ["2025-02-21", 320],
	// ["2025-03-05", 160],
	// ["2025-03-09", 260],
	// ["2025-03-19", 460],
	// ["2025-03-26", 430],
	// ["2025-04-01", 70],
	// ["2025-04-05", 170],
	// ["2025-04-11", 270],
	// ["2025-04-18", 370],
	// ["2025-05-05", 210],
	// ["2025-05-09", 210],
	// ["2025-05-15", 410],
	// ["2025-05-22", 480],
	// ["2025-06-06", 45],
	// ["2025-06-09", 415],
	// ["2025-06-16", 245],
	// ["2025-06-19", 332],
	// ["2025-07-04", 127],
	// ["2025-07-09", 327],
	// ["2025-07-24", 427],
	// ["2025-08-08", 150],
	// ["2025-08-11", 250],
	// ["2025-08-15", 350],
	// ["2025-08-22", 460],
	// ["2025-09-10", 480],
	// ["2025-09-18", 312],
	// ["2025-10-15", 60],
	// ["2025-10-19", 80],
	// ["2025-10-21", 190]
]);

// 基本统计信息
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");
};

//
const isSort = ref(true); // true 升序  false 倒序
const handleSwithSort = () => {
	isSort.value = !isSort.value;
	handleGetPageQuery();
};

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

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

// 按条件分页查询风险信号信息
const handleGetPageQuery = async () => {
	let params;
	if (activeProcessStatusId.value === -1) {
		params = {
			riskTypes: checkedRiskType.value,
			srcCountryList: checkedRiskSource.value,
			riskLevels: checkedRiskDegree.value,
			techDomainIds: checkedArea.value,
			keywords: kewword.value,
			pageNum: currentPage.value,
			pageSize: pageSize.value,
			sortField: "time",
			sortOrder: isSort ? "asc" : "desc"
		};
	} else {
		params = {
			riskTypes: checkedRiskType.value,
			srcCountryList: checkedRiskSource.value,
			riskLevels: checkedRiskDegree.value,
			techDomainIds: checkedArea.value,
			dealStatus: activeProcessStatusId.value,
			keywords: kewword.value,
			pageNum: 1,
			pageSize: 10,
			sortField: "time",
			sortOrder: isSort ? "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();
	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: 16px;
						margin-right: 59px;
						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: 33px;
								width: 111px;
								height: 66px;
								display: flex;
								flex-direction: column;
								justify-content: flex-end;
								.top {
									display: flex;
									justify-content: flex-end;
									.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;
								}
							}
						}
					}
					.center-middle-right {
						width: 1159px;
						height: 189px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 4px;
						margin: 30px auto 0;
					}
				}
			}
		}
		.home-main-footer {
			// width: 100%;
			// height: 1059px;

			.home-main-footer-header {
				width: 1600px;
				height: 42px;
				margin: 36px auto;
				// background: orange;
				display: flex;
				justify-content: space-between;
				.btn-box {
					width: 1000px;
					display: flex;
					.btn {
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 42px;
						padding: 0 24px;
						border-radius: 21px;
						background: rgba(20, 89, 187, 0);
						margin-right: 20px;
						cursor: pointer;
						&:hover {
							background: rgba(20, 89, 187, 0.1);
						}
					}
					.btnActive {
						padding: 0 24px;
						border-radius: 21px;
						background: rgba(20, 89, 187, 1);
						color: #fff;
						&:hover {
							color: #fff;
							background: rgba(20, 89, 187, 1);
						}
					}
				}
			}
			.home-main-footer-main {
				width: 1600px;
				margin-bottom: 30px;

				// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
				// background: rgba(255, 255, 255, 1);
				margin: 30px auto;
				box-sizing: border-box;
				// padding: 20px;
				display: flex;
				.left {
					width: 389px;
					height: 950px;
					border-radius: 10px;
					box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
					background: rgba(255, 255, 255, 1);
					.left-box1 {
						margin-top: 17px;

						.left-box1-header {
							display: flex;
							.icon {
								width: 8px;
								height: 16px;
								margin-top: 4px;
								border-radius: 0px 4px 4px 0;
								background: var(--color-main-active);
							}
							.title {
								height: 2px;
								margin-left: 17px;
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
							}
						}
						.left-box1-main {
							margin-top: 10px;
						}
					}
				}
				.right {
					margin-left: 16px;
					width: 1196px;
					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;
								.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%;
										}
									}
								}
							}
						}
					}
					.right-main {
						width: 1196px;
						min-height: 790px;
						.itemlist {
							padding-left: 25px;
							padding-top: 18px;
							padding-bottom: 16px;
							width: 1138px;
							display: flex;
							margin-left: 18px;
							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;
								.tag {
									height: 28px;
									padding: 0 8px;
									line-height: 28px;
									border-radius: 4px;
									background: rgba(231, 243, 255, 1);
									color: var(--color-main-active);
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 14px;
									font-weight: 400;
									letter-spacing: 0px;
								}
							}
						}
					}
					.right-footer {
						display: flex;
						height: 90px;
						padding-top: 30px;
						justify-content: space-between;
						.footer-left {
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							margin-left: 24px;
							margin-top: 6px;
						}
						.footer-right {
							margin-right: 24px;
						}
					}
				}
			}
		}
	}
}
.checkbox-all {
	margin-left: 20px;
	width: 260px;
}
.filter-checkbox {
	width: 130px;
	margin-left: 20px;
}
</style>