<!--今日风险-->
<template>
	<div class="content-wrapper">
		<div class="policy-monitoring">
			<div class="header">
				<div class="section" v-for="(section, index) in sectionTab" :key="index" :style="{
					width: sections[index].waveBall.length === 2 ? '350px' : '503px',
					background: section.background
				}">
					<img class="section-title" :src="section.title" />
					<div class="stats">
						<div class="ball-item" v-for="(value, idx) in sections[index].waveBall" :key="idx"
							@click="highLight(value.type)">
							<WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" />
							<div class="text-box">
								<div class="waveBall-text">
									{{ value.title }}
									<span v-if="value.change !== '无新增'" class="red-dot"></span>
								</div>
							</div>
						</div>
					</div>
					<div class="bottm-box" :style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'"
						@click="handleClickCardBottomInfo(cardBottomInfo[index])">
						<img src="./icon/title-icon-1.png" />
						<div class="bottm-box-text" :style="sections[index].waveBall.length === 2 ? 'width: 225px' : 'width:378px'">
							{{ cardBottomInfo[index]?.title || "暂无新增数据" }}
						</div>
						<div style="width: 115px; color: #ffffff">
							{{ cardBottomInfo[index]?.date }}
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="content-title">
					<img class="section-title" src="./icon/title-icon-2.png" />

					<div>风险信号</div>
					<div class="num">{{ riskTotal }}</div>
					<div class="manage-btn" @click="handleToRiskManage">风险信号管理 ></div>
				</div>
				<div style="display: flex">
					<!-- 风险信号列表 -->
					<div class="risk-signals" ref="riskSignalsRef">
						<div
							class="risk-signals-item"
							v-for="(item, index) in warningList"
							:key="item.signalId != null ? String(item.signalId) : 'risk-' + index"
							@mouseenter="onMouseEnter(item, index)"
							@mouseleave="onMouseLeave"
							@click.stop
							:class="['risk-signals-item', { 'risk-signals-item-hightLight': riskSignalActiveIndex === index }]"
						>
							<div class="item-left" :class="{
								'item-status-1': item.signalLevel === '特别重大',
								'item-status-2': item.signalLevel === '重大风险',
								'item-status-3': item.signalLevel === '较大风险',
								'item-status-4': item.signalLevel === '一般风险',
								'item-status-5': item.signalLevel === '低风险'
							}">
								{{ item.signalLevel ? item.signalLevel : "一般风险" }}
							</div>
							<div class="item-right">
								<div class="text">
									{{ item.signalTitle }}
								</div>
								<div class="time">{{ item.signalTime }}</div>
							</div>
						</div>
					</div>
					<div class="news">
						<div class="box1-left" @click="handleSwithCurNews('left')" @mouseenter="handleInBtn"
							@mouseleave="handleOutBtn">
							<img :src="leftBtn" alt="" />
						</div>
						<div class="box1-right" @click="handleSwithCurNews('right')" @mouseenter="handleInBtn"
							@mouseleave="handleOutBtn">
							<img :src="rightBtn" alt="" />
						</div>
						<el-carousel ref="carouselRef" style="height: 443px; width: 664px" :autoplay="true" :interval="30000"
							arrow="never" indicator-position="none" @change="handleCarouselChange">
							<el-carousel-item v-for="(News, NewsIndex) in filteredHotNewsList" :key="NewsIndex">
								<div class="carousel-item" @click="toDetaile(News.hotspotID, News.hotspotType)">
									<div class="carousel-title">
										<div>
											<div class="title-text">
												{{ News.hotspotTitle }}
											</div>
											<div class="title-tag" v-if="News.hotspotTag">
												{{ News.hotspotTag }}
											</div>
										</div>
										<!-- <img
											:src="News.hotspotPicture ? News.hotspotPicture : DefaultOrgIcon"
											style="width: 96px; height: 96px"
										/> -->
									</div>
									<div style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"></div>
									<div class="news-carousel-content">{{ News.hotspotDesc }}</div>

									<div class="carousel-bottom">
										<div class="left">
											{{ News.hotspotDate }}
										</div>
										<div class="right">
											<div v-for="(tag, index) in News.domainList" :key="index" class="tag">
												{{ tag.name }}
											</div>
										</div>
									</div>
									<div class="carousel-footer">
										<div class="footer-left">
											<div class="type">{{ News.hotspotType + "——" }}</div>
											<div class="text">{{ News.eventTitle }}</div>
										</div>
										<div class="footer-right">
											<img src="@/assets/icons/arrow-right.png" alt="" />
										</div>
									</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { color } from "echarts";
import { onMounted, ref, onUnmounted, computed } from "vue";
import WaveBall from "./WaveBall.vue";
import { getLatestRiskUpdates, getLatestRisks } from "@/api/zmOverview/risk/index.js";
import router from "@/router/index";
import { navigateToViewRiskSignal } from "@/utils/riskSignalOverviewNavigate";
import icon1 from "./icon/title-1.svg";
import icon2 from "./icon/title-2.svg";
import icon3 from "./icon/title-3.svg";
import icon4 from "./icon/title-4.svg";
import DefaultOrgIcon from "@/assets/icons/default-icon2.png";
import leftBtn from "@/assets/icons/card-btn-left.png";
import rightBtn from "@/assets/icons/card-btn-right.png";
const sectionTab = [
	{
		textColor: "rgba(9, 88, 217, 1)",
		background: "linear-gradient(180.00deg, rgba(9, 88, 217, 1),rgba(9, 88, 217, 0.5) 100%)",
		borderColor: "rgba(186, 224, 255, 1)",
		waterColor: ["#4E92F4", "#5993EE", "#8EB3ED", "#77A2EB", "#ffffff", "#ffffff"],
		title: icon1
	},
	{
		textColor: "rgba(9, 88, 217, 1)",
		background: "linear-gradient(180.00deg, rgba(8, 151, 156, 1),rgba(8, 151, 156, 0.5) 100%)",

		borderColor: "rgba(186, 224, 255, 1)",
		waterColor: ["#4AB9BA", "#5DBFC1", "#86CCCF", "#8DD0D2", "#ffffff", "#ffffff"],
		title: icon2
	},
	{
		textColor: "rgba(9, 88, 217, 1)",
		background: "linear-gradient(180.00deg, rgba(206, 79, 81, 1),rgba(206, 79, 81, 0.5) 100%)",

		borderColor: "rgba(186, 224, 255, 1)",
		waterColor: ["#EF797B", "#ED8C8E", "#EAB0B2", "#E7ABAC", "#ffffff", "#ffffff"],
		title: icon3
	},
	{
		textColor: "rgba(9, 88, 217, 1)",
		background: "linear-gradient(180.00deg, rgba(212, 107, 8, 1),rgba(212, 107, 8, 0.5) 100%)",

		borderColor: "rgba(186, 224, 255, 1)",
		waterColor: ["#EFA04F", "#EDA969", "#EABA8C", "#E7AF7A", "#ffffff", "#ffffff"],
		title: icon4
	}
];
// 模拟从后端获取的数据
const sections = ref([
	{
		title: "政令：确保美国太空优势",
		date: "12-18",
		waveBall: [
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "0",
				unit: "项",
				title: "法案(提出)",
				type: "法案"
			},
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "0",
				unit: "个",
				title: "政令",
				type: "行政令"
			}
		]
	},
	{
		title: "对实体清单的更新及修订",
		date: "12-19",
		waveBall: [
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "0",
				unit: "次",
				title: "实体清单",
				type: "实体清单"
			},
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "0",
				unit: "次",
				title: "CCL",
				type: "CCL"
			}
		]
	},
	{
		title: "SDN清单更新",
		date: "12-15",
		waveBall: [
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "0",
				unit: "次",
				title: "SDN",
				type: "SDN"
			},
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "0",
				unit: "家",
				title: "涉军企业",
				type: "涉军企业"
			}
		]
	},
	{
		title: "232调查：商用飞机和喷气发动机进口对国家安全的...",
		date: "12-15",
		waveBall: [
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "0",
				unit: "次",
				title: "337调查",
				type: "337调查"
			},
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "无新增",
				unit: "次",
				title: "232调查",
				type: "232调查"
			},
			{
				percent: 0, // 估算的百分比
				count: 0,
				change: "无新增",
				unit: "次",
				title: "301调查",
				type: "301调查"
			}
		]
	}
]);

const cardList1 = ref([]);
const cardList2 = ref([]);
const cardList3 = ref([]);
const cardList4 = ref([]);

const cardBottomInfo = ref([
	{
		type: "",
		id: "",
		title: "",
		date: ""
	},
	{
		type: "",
		id: "",
		title: "",
		date: ""
	},
	{
		type: "",
		id: "",
		title: "",
		date: ""
	},
	{
		type: "",
		id: "",
		title: "",
		date: ""
	}
]);

const cardShowIndex1 = ref(0);
const cardShowIndex2 = ref(0);
const cardShowIndex3 = ref(0);
const cardShowIndex4 = ref(0);

// 最新风险动态统计
const handleGetLatestRiskUpdates = async () => {
	try {
		const params = {
			currentDate: "本周"
		};
		const res = await getLatestRiskUpdates(params);
		console.log("最新风险动态统计1", res);
		if (res.code === 200 && res.data) {
			sections.value = [
				{
					// title: res.data.policiesRegulations.hotspotTitle,
					// date: res.data.policiesRegulations.hotspotDate,
					waveBall: [
						{
							percent: 30, // 估算的百分比
							count: res.data.bill.total,
							change: res.data.bill.dailyIncrement,
							unit: "项",
							title: "法案(提出)",
							type: "法案"
						},
						{
							percent: 20, // 估算的百分比
							count: res.data.administrativeOrder.total,
							change: res.data.administrativeOrder.dailyIncrement,
							unit: "个",
							title: "政令",
							type: "行政令"
						}
					]
				},
				{
					// title: res.data.exportControl.hotspotTitle,
					// date: res.data.exportControl.hotspotDate,
					waveBall: [
						{
							percent: 10, // 估算的百分比
							count: res.data.Entities.total,
							change: res.data.Entities.dailyIncrement,

							unit: "次",
							title: "实体清单",
							type: "实体清单"
						},
						{
							percent: 20, // 估算的百分比
							count: res.data.CCL.total,
							change: res.data.CCL.dailyIncrement,
							unit: "次",
							title: "CCL",
							type: "CCL"
						}
					]
				},
				{
					// title: res.data.investmentFinancingRestrictions.hotspotTitle,
					// date: res.data.investmentFinancingRestrictions.hotspotDate,
					waveBall: [
						{
							percent: 15, // 估算的百分比
							count: res.data.SDN.total,
							change: res.data.SDN.dailyIncrement,
							unit: "次",
							title: "SDN",
							type: "SDN"
						},
						{
							percent: 5, // 估算的百分比
							count: res.data.militaryInvolvement.total,
							change: res.data.militaryInvolvement.dailyIncrement,
							unit: "家",
							title: "涉军企业",
							type: "涉军企业"
						}
					]
				},
				{
					// title: res.data.marketAccess.hotspotTitle,
					// date: res.data.marketAccess.hotspotDate,
					waveBall: [
						{
							percent: 3, // 估算的百分比
							count: res.data["337Survey"].total,
							change: res.data["337Survey"].dailyIncrement,
							unit: "次",
							title: "337调查",
							type: "337调查"
						},
						{
							percent: 3, // 估算的百分比
							count: res.data["232Survey"].total,
							change: res.data["232Survey"].dailyIncrement,
							unit: "次",
							title: "232调查",
							type: "232调查"
						},
						{
							percent: 3, // 估算的百分比
							count: res.data["301Survey"].total,
							change: res.data["301Survey"].dailyIncrement,
							unit: "次",
							title: "301调查",
							type: "301调查"
						}
					]
				}
			];
			console.log(sections.value, "sections.value");
		}
	} catch (error) {
		console.error("获取最新风险动态统计error", error);
	}
};

// 风险信号
const warningList = ref([]);
const riskTotal = ref(0);
const hotNewsList = ref([
	{
		title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
		category: "政策及立法打压风险",
		content:
			"2025年1月20日第14166号行政命令第2（a）条（《保护美国免受外国对抗者控制应用法案》对TikTok的适用）规定的执行延迟，并由2025年4月4日第14258号行政命令（延长TikTok执法延迟）和2025年6月19日第14310号行政命令（进一步延长TikTok执法延迟）所延长，进一步延长至2025年12月16日。在此期间，司法部不得采取任何行动执行《保护美国人免受外国对抗者控制应用法案》（以下简称“法案”）（公共法118-50，H部），也不得对任何违反该法案的实体处以任何处罚，包括分发、维护、更新（或促成分发，维护或更新任何外国对手控制的应用，如本法所定义。鉴于本指示，即使在上述规定期限届满后，司法部也应继续与相关部门合作，以确保美国国家安全和公民隐私权利不受威胁。",
		date: "2025年9月16日",
		source: "美国白宫·总统行政令",
		tags: ["人工智能", "通信网络"]
	},
	{
		title: "美国白宫发布关于进一步延长TikTok执法宽限期的行政令",
		category: "政策及立法打压风险",
		content:
			"2025年1月20日第14166号行政命令第2（a）条（《保护美国免受外国对抗者控制应用法案》对TikTok的适用）规定的执行延迟，并由2025年4月4日第14258号行政命令（延长TikTok执法延迟）和2025年6月19日第14310号行政命令（进一步延长TikTok执法延迟）所延长，进一步延长至2025年12月16日。在此期间，司法部不得采取任何行动执行《保护美国人免受外国对抗者控制应用法案》（以下简称“法案”）（公共法118-50，H部），也不得对任何违反该法案的实体处以任何处罚，包括分发、维护、更新（或促成分发，维护或更新任何外国对手控制的应用，如本法所定义。鉴于本指示，即使在上述规定期限届满后，司法部也应继续与相关部门合作，以确保美国国家安全和公民隐私权利不受威胁。",
		date: "2025年9月16日",
		source: "美国白宫·总统行政令",
		tags: ["人工智能", "通信网络"]
	}
]);

//最新风险信号
const handleGetLatestRisks = async () => {
	try {
		const res = await getLatestRisks();
		console.log("最新风险信号", res);
		if (res.code === 200 && res.data) {
			warningList.value = res.data.riskVOS;
			hotNewsList.value = res.data.hotspotVOS;
			riskTotal.value = res.data.riskCount;
			cardList1.value = warningList.value
				.filter(item => {
					return item.eventType === "法案" || item.eventType === "行政令";
				})
				.map(val => {
					return {
						type: val.eventType,
						id: val.signalId,
						title: val.eventType + ":" + val.signalTitle,
						date: val.signalTime
					};
				});
			console.log("cardList1", cardList1.value);

			cardList2.value = hotNewsList.value
				.filter(item => {
					return item.eventType === "实体清单" || item.eventType === "CCL";
				})
				.map(val => {
					return {
						type: val.eventType,
						id: val.signalId,
						title: val.eventType + ":" + val.signalTitle,
						date: val.signalTime
					};
				});
			cardList3.value = hotNewsList.value
				.filter(item => {
					return item.eventType === "SDN" || item.eventType === "涉军企业";
				})
				.map(val => {
					return {
						type: val.eventType,
						id: val.signalId,
						title: val.eventType + ":" + val.signalTitle,
						date: val.signalTime
					};
				});
			cardList4.value = hotNewsList.value
				.filter(item => {
					return item.eventType === "337调查" || item.eventType === "232调查" || item.eventType === "301调查";
				})
				.map(val => {
					return {
						type: val.eventType,
						id: val.signalId,
						title: val.eventType + ":" + val.signalTitle,
						date: val.signalTime
					};
				});
			console.log(hotNewsList.value, "hotNewsList.value");
		}
	} catch (error) {
		console.error("获取最新风险信号error", error);
	}
};

const curNews = ref({});
const carouselRef = ref(null);
const curHotNewsListIndex = ref(0);
const handleCarouselChange = index => {
	curHotNewsListIndex.value = index;
	if (hotNewsList.value && hotNewsList.value.length > 0) {
		curNews.value = hotNewsList.value[index];
	}
};

// 查看详情
const handleClickToDetail = () => {
	window.sessionStorage.setItem("billId", curBill.value.billId);
	window.sessionStorage.setItem("curTabName", curBill.value.billName);
	const route = router.resolve({
		path: "/billLayout",
		query: {
			billId: curBill.value.billId
		}
	});
	console.log(route);

	window.open(route.href, "_blank");
};
// 查看详情 传递参数
const handleClickToDetailO = item => {
	window.sessionStorage.setItem("curTabName", item.signalTitle);
	// console.log("item", item);
	let curRoute;
	switch (item.eventType) {
		case "法案":
			curRoute = router.resolve({
				path: "/billLayout",
				query: {
					billId: item.signalId
				}
			});
			break;
		case "行政令":
			curRoute = router.resolve({
				path: "/decreeLayout",
				query: {
					id: item.signalId
				}
			});
			break;
		case "实体清单":
			curRoute = router.resolve({
				path: "/exportControl/singleSanction",
				query: {
					id: item.signalId
				}
			});
			break;
		case "CCL":
			curRoute = router.resolve({
				path: "/exportControl/singleSanction",
				query: {
					id: item.signalId
				}
			});
			break;
		case "SDN":
			curRoute = router.resolve({
				path: "/billLayout",
				query: {
					billId: item.signalId
				}
			});
			break;
		case "涉军企业":
			curRoute = router.resolve({
				name: "companyPages",
				params: {
					id: item.signalId
				}
			});
			break;
		case "337调查":
			curRoute = router.resolve({
				path: "/marketSingleCaseLayout/overview",
				query: {
					id: "337",
					searchId: item.signalId + ""
				}
			});
			break;
		case "232调查":
			curRoute = router.resolve({
				path: "/marketSingleCaseLayout/overview",
				query: {
					id: "232",
					searchId: item.signalId + ""
				}
			});
			break;
		case "301调查":
			curRoute = router.resolve({
				path: "/marketSingleCaseLayout/overview",
				query: {
					id: "301",
					searchId: item.signalId + ""
				}
			});
			break;
	}
	window.open(curRoute.href, "_blank");
};

const currentHoveredSignalId = ref(null);

const onMouseEnter = (item, index) => {
	currentHoveredSignalId.value = item.signalId;
	riskSignalActiveIndex.value = index;
	clearInterval(timer2);
};

const onMouseLeave = () => {
	// currentHoveredSignalId.value = null;
	timer2 = setInterval(() => {
		if (riskSignalActiveIndex.value < warningList.value.length - 1) {
			riskSignalActiveIndex.value++;
		} else {
			riskSignalActiveIndex.value = 0;
		}
		currentHoveredSignalId.value = warningList.value[riskSignalActiveIndex.value].signalId;
	}, 3000);
};

// 计算属性或使用 watchEffect 来动态计算 filteredHotNewsList
const filteredHotNewsList = computed(() => {
	if (!currentHoveredSignalId.value) return hotNewsList.value; // 如果没有悬停，则返回全部数据

	return hotNewsList.value.filter(newsItem => newsItem.signalId === currentHoveredSignalId.value);
});
// 首页风险信号不弹详情弹窗

const handleToRiskManage = () => {
	navigateToViewRiskSignal(router);
};

const highlightedEventType = ref("");
const highLight = title => {
	console.log(title);
	// 如果再次点击同一个，取消高亮
	if (highlightedEventType.value === title) {
		highlightedEventType.value = null;
	} else {
		highlightedEventType.value = title;
	}
};
const toDetaile = (id, type) => {
	console.log(id, type);
	if (type === "法案") {
		let path = "/billLayout/bill/introduction";
		let query = { billId: id };
		const { href } = router.resolve({ path, query });
		window.open(href, "_blank");
	} else if (type === "政令") {
		const route = router.resolve({
			path: "/decreeLayout/overview/introduction",
			query: {
				id: id
			}
		});
		window.open(route.href, "_blank");
	} else if (type === "实体清单" || type === "CCL") {
		const route = router.resolve({
			path: "/exportControl/singleSanction",
			query: {
				id: id
			}
		});
		window.open(route.href, "_blank");
	} else if (type === "337") {
		const curRoute = router.resolve({
			path: "/marketSingleCaseLayout/overview",
			query: {
				id: "337",
				searchId: id
			}
		});
		window.open(curRoute.href, "_blank");
	} else if (type === "203") {
		const curRoute = router.resolve({
			path: "/marketSingleCaseLayout/overview",
			query: {
				id: "203",
				searchId: id
			}
		});
		window.open(curRoute.href, "_blank");
	} else if (type === "301") {
		const curRoute = router.resolve({
			path: "/marketSingleCaseLayout/overview",
			query: {
				id: "301",
				searchId: id
			}
		});
		window.open(curRoute.href, "_blank");
	}
	//type=涉军企业和SDN未对接
};
const handleSwithCurNews = name => {
	if (name === "left") {
		// carouselRef.value.prev();
		if (riskSignalActiveIndex.value > 0) {
			riskSignalActiveIndex.value--;
		} else {
			riskSignalActiveIndex.value = warningList.value.length - 1;
		}
	} else {
		// carouselRef.value.next();
		if (riskSignalActiveIndex.value < warningList.value.length - 1) {
			riskSignalActiveIndex.value++;
		} else {
			riskSignalActiveIndex.value = 0;
		}
	}
	currentHoveredSignalId.value = warningList.value[riskSignalActiveIndex.value].signalId;
};

const handleInBtn = () => {
	clearInterval(timer2);
};

const handleOutBtn = () => {
	currentHoveredSignalId.value = null;
	timer2 = setInterval(() => {
		if (riskSignalActiveIndex.value < warningList.value.length - 1) {
			riskSignalActiveIndex.value++;
		} else {
			riskSignalActiveIndex.value = 0;
		}
		currentHoveredSignalId.value = warningList.value[riskSignalActiveIndex.value].signalId;
	}, 3000);
};

// 实体清单，CCL，SDN，涉军企业，337调查，232调查，301调查

const handleClickCardBottomInfo = item => {
	window.sessionStorage.setItem("curTabName", item.title);
	console.log("item", item);
	let curRoute;
	switch (item.type) {
		case "法案":
			curRoute = router.resolve({
				path: "/billLayout",
				query: {
					billId: item.id
				}
			});
			break;
		case "行政令":
			curRoute = router.resolve({
				path: "/decreeLayout",
				query: {
					id: item.id
				}
			});
			break;
		case "实体清单":
			curRoute = router.resolve({
				path: "/exportControl/singleSanction",
				query: {
					id: item.id
				}
			});
			break;
		case "CCL":
			curRoute = router.resolve({
				path: "/exportControl/singleSanction",
				query: {
					id: item.id
				}
			});
			break;
		case "SDN":
			curRoute = router.resolve({
				path: "/billLayout",
				query: {
					billId: item.id
				}
			});
			break;
		case "涉军企业":
			curRoute = router.resolve({
				name: "companyPages",
				params: {
					id: item.id
				}
			});
			break;
		case "337调查":
			curRoute = router.resolve({
				path: "/marketSingleCaseLayout/overview",
				query: {
					id: "337",
					searchId: item.id + ""
				}
			});
			break;
		case "232调查":
			curRoute = router.resolve({
				path: "/marketSingleCaseLayout/overview",
				query: {
					id: "232",
					searchId: item.id + ""
				}
			});
			break;
		case "301调查":
			curRoute = router.resolve({
				path: "/marketSingleCaseLayout/overview",
				query: {
					id: "301",
					searchId: item.id + ""
				}
			});
			break;
	}
	window.open(curRoute.href, "_blank");
};

const riskSignalActiveIndex = ref(0);

const riskSignalsRef = ref(null); // 引用risk-signals容器

let intervalId;
let timer1;
let timer2;
onMounted(async () => {
	await handleGetLatestRiskUpdates();
	await handleGetLatestRisks();

	// console.log("cardList1111111", cardList1.value);

	timer1 = setInterval(() => {
		if (cardList1.value.length) {
			if (cardShowIndex1.value < cardList1.value.length - 1) {
				cardShowIndex1.value++;
				cardBottomInfo.value[0].type = cardList1.value[cardShowIndex1.value].type;
				cardBottomInfo.value[0].id = cardList1.value[cardShowIndex1.value].id;
				cardBottomInfo.value[0].title = cardList1.value[cardShowIndex1.value].title;
				cardBottomInfo.value[0].date = cardList1.value[cardShowIndex1.value].date;
			} else {
				cardShowIndex1.value = 0;
				cardBottomInfo.value[0].type = cardList1.value[cardShowIndex1.value].type;
				cardBottomInfo.value[0].id = cardList1.value[cardShowIndex1.value].id;
				cardBottomInfo.value[0].title = cardList1.value[cardShowIndex1.value].title;
				cardBottomInfo.value[0].date = cardList1.value[cardShowIndex1.value].date;
			}
		}
		if (cardList2.value.length) {
			if (cardShowIndex2.value < cardList2.value.length - 1) {
				cardShowIndex2.value++;
				cardBottomInfo.value[1].type = cardList2.value[cardShowIndex2.value].type;
				cardBottomInfo.value[1].id = cardList2.value[cardShowIndex2.value].id;
				cardBottomInfo.value[1].title = cardList2.value[cardShowIndex2.value].title;
				cardBottomInfo.value[1].date = cardList2.value[cardShowIndex2.value].date;
			} else {
				cardShowIndex2.value = 0;
				cardBottomInfo.value[1].id = cardList2.value[0].id;
				cardBottomInfo.value[1].type = cardList2.value[0].type;
				cardBottomInfo.value[1].title = cardList2.value[0].title;
				cardBottomInfo.value[1].date = cardList2.value[0].date;
			}
		}

		if (cardList3.value.length) {
			if (cardShowIndex3.value < cardList3.value.length - 1) {
				cardShowIndex3.value++;
				cardBottomInfo.value[2].type = cardList3.value[cardShowIndex3.value].type;
				cardBottomInfo.value[2].id = cardList3.value[cardShowIndex3.value].id;
				cardBottomInfo.value[2].title = cardList3.value[cardShowIndex3.value].title;
				cardBottomInfo.value[2].date = cardList3.value[cardShowIndex3.value].date;
			} else {
				cardShowIndex3.value = 0;
				cardBottomInfo.value[2].type = cardList3.value[0].type;
				cardBottomInfo.value[2].id = cardList3.value[0].id;
				cardBottomInfo.value[2].title = cardList3.value[0].title;
				cardBottomInfo.value[2].date = cardList3.value[0].date;
			}
		}

		if (cardList4.value.length) {
			if (cardShowIndex4.value < cardList4.value.length - 1) {
				cardShowIndex4.value++;
				cardBottomInfo.value[3].type = cardList4.value[cardShowIndex4.value].type;
				cardBottomInfo.value[3].id = cardList4.value[cardShowIndex4.value].id;
				cardBottomInfo.value[3].title = cardList4.value[cardShowIndex4.value].title;
				cardBottomInfo.value[3].date = cardList4.value[cardShowIndex4.value].date;
			} else {
				cardShowIndex4.value = 0;
				cardBottomInfo.value[3].type = cardList4.value[0].type;
				cardBottomInfo.value[3].id = cardList4.value[0].id;
				cardBottomInfo.value[3].title = cardList4.value[0].title;
				cardBottomInfo.value[3].date = cardList4.value[0].date;
			}
		}

		// console.log('cardBottomInfo',cardBottomInfo.value[0].title);
	}, 3000);

	timer2 = setInterval(() => {
		if (riskSignalActiveIndex.value < warningList.value.length - 1) {
			riskSignalActiveIndex.value++;
		} else {
			riskSignalActiveIndex.value = 0;
		}
		currentHoveredSignalId.value = warningList.value[riskSignalActiveIndex.value].signalId;
	}, 3000);

	const scrollInterval = 2000; // 每隔2秒滚动一次
	let currentScroll = 0;

	intervalId = setInterval(() => {
		if (riskSignalsRef.value) {
			const scrollHeight = riskSignalsRef.value.scrollHeight; // 内容总高度
			const clientHeight = riskSignalsRef.value.clientHeight; // 可视区域高度
			// 如果滚动到底，则回到顶部
			if (currentScroll + clientHeight >= scrollHeight) {
				currentScroll = 0;
				riskSignalsRef.value.scrollTop = currentScroll;
			} else {
				currentScroll += 10; // 调整这个值可以改变滚动速度
				riskSignalsRef.value.scrollTop = currentScroll;
			}
		}
	}, scrollInterval);
});
onUnmounted(() => {
	clearInterval(intervalId); // 清除定时器
	clearInterval(timer1); // 清除定时器
	clearInterval(timer2); // 清除定时器
});
// onBeforeUnmount(() => {
// 	andleGetLatestRiskUpdates()
// });
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 100%;
	// height: 100%;

	.policy-monitoring {
		font-family: Arial, sans-serif;
		width: 1601px;
		margin: 0 auto;
	}

	.header {
		width: 1601px;
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;
	}

	.content {
		/* 容器 83 */
		/* 容器 83 */
		width: 1601px;
		height: 568px;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 1);
		border-radius: 10px;
		/* 业务系统/模块阴影 */
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 0.65);

		.content-title {
			/* 块级标题 */
			width: 1602px;
			height: 48px;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(255, 255, 255, 1);
			background: linear-gradient(180deg, rgba(255, 241, 240, 0.5), rgba(255, 241, 240, 0) 100%);
			color: rgba(206, 79, 81, 1);

			font-family: YouSheBiaoTiHei;
			font-style: Regular;
			font-size: 24px;
			font-weight: 400;
			line-height: 48px;
			letter-spacing: 0px;
			text-align: left;
			display: flex;
			align-items: center;

			img {
				/* 矢量 347 */
				width: 22px;
				height: 18px;
			}

			.num {
				/* 数据展示/Badge徽标数/亮色/数字 */

				height: 22px;
				/* 自动布局 */
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;
				gap: 10;
				padding: 0px 8px 0px 8px;
				border-radius: 100px;
				background: rgba(206, 79, 81, 1);
				color: rgba(255, 255, 255, 1);
				margin: 12px;
				font-family: Microsoft YaHei;
				font-style: Regular;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				letter-spacing: 0px;
				text-align: center;
			}

			.manage-btn {
				margin-left: auto;
				/* 推到最右侧 */
				margin-right: 26px;
				/* 适当的右边距 */
				padding: 4px 12px;
				border-radius: 20px;
				background-color: rgba(206, 79, 81, 0.1);
				border: 1px solid rgba(206, 79, 81, 0.1);

				font-family: "Microsoft YaHei";
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				color: rgb(206, 79, 81);
				cursor: pointer;

				&:hover {
					background-color: rgba(206, 79, 81, 0.2);
				}
			}
		}
	}

	.section {
		/* 容器 535 */
		width: 350px;
		height: 320px;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 1);
		border-radius: var(---10, 10px);
		/* 业务系统/模块阴影 */
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 0.65);
	}

	.section-title {
		margin: 8px 16px;
		/* 容器 1559 */
		width: 125px;
		height: 31px;
	}

	.stats {
		/* 容器 519 */
		height: 210px;
		display: flex;
		justify-content: space-between;
		padding: 0 35px;
		box-sizing: border-box;
		padding-top: 20px;

		.text-box {
			display: flex;
			justify-content: center;
		}

		.waveBall-text {
			width: max-content;
			margin-top: 16px;
			color: #ffffff;
			font-family: Microsoft YaHei;
			font-style: Bold;
			font-size: 20px;
			font-weight: 700;
			// line-height: 26px;
			letter-spacing: 0px;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			position: relative;

			.red-dot {
				position: absolute;
				right: -15px;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background-color: rgba(255, 77, 79, 1);
				margin-left: 8px;
				// 如果需要绝对定位，可以使用下面的样式，但在 flex 布局中 margin-left 更简单
				// position: absolute;
				// right: -14px;
				// top: 50%;
				// transform: translateY(-50%);
			}
		}
	}

	.bottm-box {
		/* 容器 1561 */
		display: flex;
		width: 350px;
		height: 48px;
		/* 自动布局 */

		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		// gap: 15;
		color: #ffffff;

		font-family: Microsoft YaHei;
		font-style: Regular;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0px;
		text-align: left;
		cursor: pointer;

		.bottm-box-text {
			white-space: nowrap;
			/* 保持在一行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 超出部分显示省略号 */
		}

		img {
			/* 矢量 1667 */
			width: 12px;
			height: 16px;
			margin: 16px 20px;
		}
	}

	.risk-signals {
		width: 769px;
		height: 470px;
		overflow-y: auto;
		overflow-x: hidden;
		box-sizing: border-box;
		padding-right: 20px;

		.risk-signals-item {
			margin-left: 23px;
			height: 47px;
			width: 780px;
			display: flex;
			cursor: pointer;

			// &:hover {
			// 	//background: var(--color-bg-hover);
			// 	.item-right {
			// 		.text{
			// 			color:var(--color-main-active);
			// 		}

			// }
			// }

			.item-status-1 {
				color: var(--color-red-100) !important;
				background: var(--color-red-10) !important;
			}

			.item-status-2 {
				color: #FA8C16 !important;
				background: #FFF7E6 !important;
			}

			.item-status-3 {
				color: var(--color-yellow-100) !important;
				background: var(--color-yellow-10) !important;
			}

			.item-status-4 {
				color: #52C41A !important;
				background: #F6FFED !important;
			}

			.item-status-5 {
				color: var(--color-primary-100) !important;
				background: var(--color-primary-10) !important;
			}

			.item-left {
				margin-top: 4px;
				margin-left: 2px;
				width: 40px;
				height: 40px;
				border-radius: 20px;
				color: rgba(82, 196, 26, 1);
				background: rgba(246, 255, 237, 1);
				font-family: Microsoft YaHei;
				font-size: 12px;
				font-weight: 400;
				line-height: 14px;
				box-sizing: border-box;
				padding: 6px 4px;
				text-align: center;
			}

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

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

					&:hover {
						color: var(--color-main-active);
						font-weight: bold;
					}
				}

				.time {
					width: 88px;
					margin-left: 5px;
					line-height: 47px;
					color: rgba(132, 136, 142, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.risk-signals-item-hightLight {
			margin-left: 23px;
			height: 47px;
			width: 780px;
			display: flex;
			cursor: pointer;
			// background: var(--color-bg-hover);

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

			.item-status-1 {
				color: rgba(245, 34, 45, 1) !important;
				background: rgba(255, 241, 240) !important;
			}

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

			.item-left {
				margin-top: 4px;
				margin-left: 2px;
				width: 40px;
				height: 40px;
				border-radius: 20px;
				color: rgba(82, 196, 26, 1);
				background: rgba(246, 255, 237, 1);
				font-family: Microsoft YaHei;
				font-size: 12px;
				font-weight: 400;
				line-height: 14px;
				box-sizing: border-box;
				padding: 6px 4px;
				text-align: center;
			}

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

				.text {
					width: 598px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 47px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-decoration: underline;
				}

				.time {
					width: 88px;
					margin-left: 5px;
					line-height: 47px;
					color: rgba(132, 136, 142, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}

	.news {
		/* 容器 1567 */
		width: 760px;
		height: 491px;
		margin-left: 47px;
		/* 自动布局 */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 16;
		padding: 24px 48px 24px 48px;

		box-sizing: border-box;
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.65);
		position: relative;

		.box1-left {
			position: absolute;
			left: 0;
			top: 200px;
			width: 24px;
			height: 48px;
			cursor: pointer;

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

		.box1-right {
			position: absolute;
			right: 0;
			top: 200px;
			width: 24px;
			height: 48px;
			cursor: pointer;

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

		.carousel-item {
			height: 443px;
			width: 736px;

			.carousel-title {
				width: 664px;
				height: 96px;
				margin: 14px 0;
				color: rgba(59, 65, 75, 1);

				font-family: Microsoft YaHei;
				font-style: Bold;
				font-size: 20px;
				font-weight: 700;
				line-height: 26px;
				letter-spacing: 0px;
				text-align: justify;
				display: flex;
				justify-content: space-between;

				.title-text {
					/* 美国白宫发布关于进一步延长TikTok执法宽限期的行政令 */
					width: 660px;
					// height: 26px;
				}

				.title-tag {
					margin-top: 12px;
					/* 移除固定 width */
					height: 30px;
					padding: 0 12px;
					/* 左右内边距控制最小宽度 */
					display: inline-flex;
					/* ✅ 关键：inline + flex */
					justify-content: center;
					/* 水平居中 */
					align-items: center;
					/* 垂直居中 */
					border-radius: 20px;
					background: rgba(206, 79, 81, 0.1);
					color: rgba(206, 79, 81, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					white-space: nowrap;
					/* 防止文字换行 */
					box-sizing: border-box;
				}
			}

			.news-carousel-content {
				width: 664px;
				margin-top: 16px;
				height: 210px;
				/* 调整为可用空间 */
				overflow-y: auto;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				line-height: 30px;
				text-align: justify;
			}

			.carousel-bottom {
				/* 容器 1566 */
				width: 664px;
				height: 34px;
				display: flex;
				justify-content: space-between;

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

				.right {
					display: flex;
					gap: 8px;
					justify-content: flex-end;

					.tag {
						/* 数据展示/Tag标签/亮色/绿 */
						height: 24px;
						/* 自动布局 */
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						gap: 8;
						padding: 0px 8px;
						box-sizing: border-box;
						border: 1px solid rgba(255, 163, 158, 1);
						border-radius: 4px;
						background: rgba(255, 241, 240, 1);
						color: rgba(245, 34, 45, 1);
						font-family: Microsoft YaHei;
						font-style: Regular;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: justify;
					}
				}
			}

			.carousel-footer {
				margin-top: 10px;
				width: 664px;
				height: 42px;
				box-sizing: border-box;
				border: 1px solid rgba(231, 243, 255, 1);
				border-radius: 50px;
				background: rgba(246, 250, 255, 1);
				display: flex;
				padding: 0 13px;
				align-items: center;
				justify-content: space-between;
				cursor: pointer;

				.footer-left {
					display: flex;

					.type {
						color: var(--color-main-active);
						font-family: Source Han Sans CN;
						font-style: bold;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
					}

					.text {
						width: 500px;
						color: var(--color-main-active);
						font-family: Source Han Sans CN;
						font-style: Regular;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.footer-right {
					width: 12px;
					height: 11px;

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

	h3 {
		margin-bottom: 10px;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}
}

:deep(.el-carousel__container) {
	height: 443px;
}

:deep(.el-carousel__item) {
	height: 443px;
}

:deep(.el-carousel__item--card) {
	height: 443px;
}
</style>
