<!--今日风险-->
<template>
	<div class="content-wrapper">
		<div class="policy-monitoring">
			<div class="header">
				<div
					class="section"
					v-for="(section, index) in sectionTab"
					:key="index"
					:style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'"
				>
					<img class="section-title" :src="`/public/icon/riskToday/btn-` + index + `.png`" />
					<div class="stats">
						<div v-for="value in sections[index].waveBall" @click="highLight(value)">
							<div @click="highLight(value.title)" style="cursor: pointer">
								<WaveBall
									:percent="value.percent"
									:data="value"
									:color="section.waterColor"
									:size="128"
									@click="highLight(value)"
								/>
								<div class="waveBall-text">{{ value.title }}</div>
							</div>
						</div>
					</div>
					<div class="bottm-box">
						<img src="./icon/title-icon-1.png" />
						<div style="width: 225px">
							{{ sections[index].title }}
						</div>
						<div style="width: 50px; color: rgba(132, 136, 142, 1)">
							{{ sections[index].date }}
						</div>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="content-title">
					<img class="section-title" src="./icon/title-icon-2.png" />

					<div>风险信号3323</div>
					<div class="num">12</div>
				</div>
				<div style="display: flex">
					<div class="risk-signals">
						<div
							class="risk-signals-item"
							v-for="(item, index) in warningList"
							:key="index"
							@click="handleClickToDetailO(item)"
							:class="{ highlighted: item.eventType === highlightedEventType }"
						>
							<div
								class="item-left"
								:class="{
									itemLeftStatus1: item.signalLevel === '特别重大',
									itemLeftStatus2: 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')">
							<div class="icon">
								<img src="./icon/box1-left.png" alt="" />
							</div>
						</div>
						<div class="box1-right" @click="handleSwithCurNews('right')">
							<div class="icon">
								<img src="./icon/box1-right.png" alt="" />
							</div>
						</div>
						<el-carousel
							ref="carouselRef"
							style="height: 412px; width: 736px"
							:autoplay="true"
							:interval="3000"
							arrow="never"
							indicator-position="none"
							@change="handleCarouselChange"
						>
							<el-carousel-item v-for="(News, NewsIndex) in hotNewsList" :key="NewsIndex">
								<div class="carousel-item">
									<div class="carousel-title">
										<div class="title-text">
											{{ News.title }}
										</div>
										<div class="title-tag">
											{{ News.category }}
										</div>
									</div>
									<div
										style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"
									></div>
									<div class="carousel-content">{{ News.content }}</div>
									<div
										style="/* 矩形 351 */ width: 664px; height: 1px; background: rgba(234, 236, 238, 1)"
									></div>
									<div class="carousel-bottom">
										<div class="carousel-bottom">{{ News.date + News.source }}</div>
									</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { color } from "echarts";
import { onMounted, ref, computed } from "vue";
import WaveBall from "./WaveBall.vue";
import { getBillRiskSignal } from "@/api/bill/billHome";
const sectionTab = [
	{
		textColor: "rgba(9, 88, 217, 1)",
		borderColor: "rgba(186, 224, 255, 1)",
		waterColor: ["#A6CCFF", "#C2DEFF", "#ECF7FF", "#0758D9"],
		title: "政策法规"
	},
	{
		textColor: "rgba(9, 88, 217, 1)",
		borderColor: "rgba(186, 224, 255, 1)",
		waterColor: ["#A6CCFF", "#C2DEFF", "#ECF7FF", "#0758D9"],
		title: "出口管制"
	},
	{
		textColor: "rgba(9, 88, 217, 1)",
		borderColor: "rgba(186, 224, 255, 1)",
		waterColor: ["#A6CCFF", "#C2DEFF", "#ECF7FF", "#0758D9"],
		title: "投融资限制"
	},
	{
		textColor: "rgba(9, 88, 217, 1)",
		borderColor: "rgba(186, 224, 255, 1)",
		waterColor: ["#A6CCFF", "#C2DEFF", "#ECF7FF", "#0758D9"],
		title: "市场准入"
	}
];
// 模拟从后端获取的数据
const sections = ref([
	{
		title: "政令：确保美国太空优势",
		date: "12-18",
		waveBall: [
			{
				percent: 30, // 估算的百分比
				count: 1626,
				change: "+3",
				unit: "项",
				title: "法案(提出)"
			},
			{
				percent: 20, // 估算的百分比
				count: 69,
				change: "+2",
				unit: "个",
				title: "政令"
			}
		]
	},
	{
		title: "对实体清单的更新及修订",
		date: "12-18",
		waveBall: [
			{
				percent: 10, // 估算的百分比
				count: 128,
				change: "+1",
				unit: "次",
				title: "实体清单"
			},
			{
				percent: 20, // 估算的百分比
				count: 69,
				change: "+1",
				unit: "次",
				title: "CCL"
			}
		]
	},
	{
		title: "SDN清单更新",
		waveBall: [
			{
				percent: 15, // 估算的百分比
				count: 35,
				change: "+1",
				unit: "次",
				title: "SDN"
			},
			{
				percent: 5, // 估算的百分比
				count: 28,
				change: "+1",
				unit: "家",
				title: "涉军企业"
			}
		]
	},
	{
		title: "232调查：商用飞机和喷气发动机进口对国家安全的...",
		date: "12-18",
		waveBall: [
			{
				percent: 3, // 估算的百分比
				count: 215,
				change: "+1",
				unit: "次",
				title: "337调查"
			},
			{
				percent: 3, // 估算的百分比
				count: 14,
				change: "无新增",
				unit: "次",
				title: "232调查"
			},
			{
				percent: 3, // 估算的百分比
				count: 9,
				change: "无新增",
				unit: "次",
				title: "301调查"
			}
		]
	}
]);
// 风险信号
const warningList = ref([]);
// 获取法案风险信号
const handlegetBillRiskSignal = async () => {
	const params = {
		moduleId: "0100"
	};
	try {
		const res = await getBillRiskSignal(params);
		console.log("法案风险信号", res);
		if (res.code === 200) {
			warningList.value = res.data;
		}
	} catch (error) {}
};
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: "美国白宫·总统行政令"
	},
	{
		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: "美国白宫·总统行政令"
	}
]);
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 handleSwithCurNews = name => {
	if (name === "left") {
		carouselRef.value.prev();
	} else {
		carouselRef.value.next();
	}
};

// 查看详情 传递参数
const handleClickToDetailO = item => {
	window.sessionStorage.setItem("billId", item.billId);
	window.sessionStorage.setItem("curTabName", item.name || item.signalTitle);
	const route = router.resolve("/billLayout?billId=" + item.billId);
	window.open(route.href, "_blank");
};

const highlightedEventType = ref("");
const highLight = title => {
	console.log(title);
	// 如果再次点击同一个，取消高亮
	if (highlightedEventType.value === title) {
		highlightedEventType.value = null;
	} else {
		highlightedEventType.value = title;
	}
};

onMounted(() => {
	// 这里可以添加从后端获取数据的代码
	handlegetBillRiskSignal();
	console.log("页面加载完成，可以获取数据了");
});
</script>

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

	.policy-monitoring {
		font-family: Arial, sans-serif;
	}

	.header {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20px;
	}

	.content {
		/* 容器 83 */
		width: 1601px;
		height: 495px;
		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);

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

			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;
			}
		}
	}

	.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: left;
		margin-top: 10px;
		padding: 0 39px;

		.waveBall-text {
			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: center;
		}
	}

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

		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		// gap: 15;
		color: rgba(59, 65, 75, 1);

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

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

	.risk-signals {
		width: 780px;
		height: 330px;
		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);
			}

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

			.itemLeftStatus2 {
				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: 653px;
					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;
				}

				.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;
		/* 自动布局 */
		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;
			background: #e7f1ff;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			z-index: 10;

			.icon {
				width: 11px;
				height: 18px;

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

		.box1-right {
			position: absolute;
			right: 0;
			top: 200px;
			width: 24px;
			height: 48px;
			background: #e7f1ff;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			z-index: 10;

			.icon {
				width: 11px;
				height: 18px;

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

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

			.carousel-title {
				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;

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

				.title-tag {
					/* 容器 1563 */
					width: 190px;
					height: 30px;
					/* 自动布局 */
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: flex-start;
					gap: 10;
					padding: 0px 12px 0px 12px;
					border-radius: 20px;
					background: rgba(206, 79, 81, 0.1);
					color: rgba(206, 79, 81, 1);

					font-family: Microsoft YaHei;
					font-style: Regular;
					font-size: 16px;
					font-weight: 400;
					line-height: 30px;
					letter-spacing: 0px;
					text-align: justify;
				}
			}

			.carousel-content {
				width: 664px;

				color: rgba(95, 101, 108, 1);

				font-family: Microsoft YaHei;
				font-style: Regular;
				font-size: 16px;
				font-weight: 400;
				line-height: 30px;
				letter-spacing: 0px;
				text-align: justify;
			}
		}
	}

	h3 {
		margin-bottom: 10px;
	}

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

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