<template>
	<div class="data-new">
		<div class="left">
			<img src="./assets/leftbtn.png" alt="" class="left-btn" @click="handlePrev" />
			<img src="./assets/rightbtn.png" alt="" class="right-btn" @click="handleNext" />
			<div class="left-top">
				<img src="./assets/icon01.png" alt="" />
				<div class="left-top-title">规则限制动态</div>
				<div class="more" @click="handleClickToDetail">查看详情 ></div>
			</div>

			<el-carousel
				ref="carouselRef"
				height="412px"
				direction="horizontal"
				:autoplay="true"
				:interval="5000"
				arrow="never"
				indicator-position="none"
				@change="handleCarouselChange"
			>
				<el-carousel-item v-for="(item, index) in riskSignalList" :key="item.RULEID || index">
					<div class="carousel-item-content">
						<div class="left-center">
							<img :src="item.PUBLISHORGIMGURL || defaultImg" alt="" />
							<div class="left-center-main">
								<div class="left-center-main-title">
									{{ item.RULENAMEZH || "暂无动态" }}
								</div>
								<div class="left-center-main-ul">
									<ul>
										<li>
											<span class="ul-title">发布机构：</span>
											<span class="ul-content">{{ item.PUBLISHORGNAME || "未知" }}</span>
										</li>
										<li>
											<span class="ul-title">发布日期：</span>
											<span class="ul-content">{{ item.PUBLISHDATE || "未知" }}</span>
										</li>
										<li>
											<span class="ul-title">涉及领域：</span>
											<div class="ul-tags" v-if="item.ruleAreas && item.ruleAreas.length > 0">
												<span
													v-for="(field, fIndex) in item.ruleAreas"
													:key="fIndex"
													class="ul-pie"
													:class="'cl' + ((fIndex % 4) + 1)"
												>
													{{ field }}
												</span>
											</div>
											<span v-else class="ul-content">未知</span>
										</li>
										<li>
											<span class="ul-title">限制实体：</span>
											<span class="ul-content">
												{{
													item.ruleEntities && item.ruleEntities.length > 0
														? item.ruleEntities.map(e => e.ORGNAME).join("、")
														: "未知"
												}}
											</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="left-bottom">
							<ul>
								<li class="left-bottom-li">内容摘要：</li>
							</ul>
							<div class="left-bottom-content">
								{{ item.RULEINTRODUCTION || "暂无内容摘要" }}
							</div>
						</div>
					</div>
				</el-carousel-item>

				<!-- 无数据时的占位展示 -->
				<el-carousel-item v-if="riskSignalList.length === 0">
					<div class="carousel-item-content">
						<div class="left-center">
							<img :src="defaultImg" alt="" />
							<div class="left-center-main">
								<div class="left-center-main-title">暂无规则限制动态</div>
								<div class="left-center-main-ul">
									<ul>
										<li><span class="ul-title">发布机构：</span><span class="ul-content">未知</span></li>
										<li><span class="ul-title">发布日期：</span><span class="ul-content">未知</span></li>
										<li><span class="ul-title">涉及领域：</span><span class="ul-content">未知</span></li>
										<li><span class="ul-title">限制实体：</span><span class="ul-content">未知</span></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="right">
			<div class="right-top">
				<img src="./assets/icon02.png" alt="" />
				<div class="right-top-title">
					风险信号
					<span>{{ riskSignals.length }}</span>
				</div>
			</div>
			<div style="margin: 6px 34px 0 23px">
				<div v-for="item in riskSignals" :key="item.id" class="right-main" @click="handleToRiskDetail(item)">
					<div
						class="main-left"
						:class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险', cl6: item.title === '一般风险' }"
					>
						{{ item.title }}
					</div>
					<div class="item-right">
						<div class="main-center">
							<CommonPrompt :content="item.content">
								{{ item.content }}
							</CommonPrompt>
						</div>
						<div class="main-right">{{ item.time }}</div>
					</div>
				</div>
			</div>
			<div class="right-mainbtn" @click="handleToMoreRiskSignal">
				<img src="./assets/btn.png" alt="" />
				查看更多
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import router from "@/router";
import { getRuleRestrictionLatest, getRuleRestrictionRiskSignal } from "@/api/ruleRestriction/ruleRestriction";
import defaultImg from "./assets/usImg.png";
import CommonPrompt from "../../commonPrompt/index.vue";

// 规则限制-查询风险信号数据
const riskSignals = ref([]);
const getRuleRestrictionRiskSignalData = async () => {
	try {
		const res = await getRuleRestrictionRiskSignal({ moduleId: "0108" });
		if (res && res.code === 200) {
			riskSignals.value = (res.data || []).map(item => ({
				id: item.signalId,
				title: item.signalLevel,
				content: item.signalTitle,
				time: item.signalTime,
				ruleLimitId: item.ruleLimitId
			}));
		}
	} catch (error) {
		console.error("获取规则限制风险信号数据失败:", error);
	}
};



// 规则限制-获取规则限制动态
const riskSignalList = ref([]);
const carouselRef = ref(null);
const activeIndex = ref(0);

const getRuleRestrictionLatestData = async () => {
	try {
		const res = await getRuleRestrictionLatest();
		if (res && res.code === 200) {
			riskSignalList.value = res.data || [];
		}
	} catch (error) {
		console.error("获取规则限制动态数据失败:", error);
	}
};

// 轮播图手动切换
const handlePrev = () => {
	if (carouselRef.value) {
		carouselRef.value.prev();
	}
};
const handleNext = () => {
	if (carouselRef.value) {
		carouselRef.value.next();
	}
};

// 轮播切换回调
const handleCarouselChange = index => {
	activeIndex.value = index;
};

// 左侧展示的主动态
const mainTrend = computed(() => {
	if (riskSignalList.value.length === 0) return null;
	return riskSignalList.value[activeIndex.value] || riskSignalList.value[0];
});

onMounted(() => {
	getRuleRestrictionLatestData();
	getRuleRestrictionRiskSignalData();
});

// 点击风险信号详情
const handleToRiskDetail = (item) => {
	const curRoute = router.resolve({
		path: "/ruleRestrictions/detail",
		query: { id: item.ruleLimitId },
	});
	window.open(curRoute.href, "_blank");
};

// 点击查看详情
const handleClickToDetail = item => {
	const activeItem = item && item.RULEID ? item : mainTrend.value;
	const id = activeItem?.RULEID;
	if (!id) return;
	window.sessionStorage.setItem("curTabName", activeItem?.RULENAMEZH);

	const curRoute = router.resolve({
		path: "/ruleRestrictions/detail",
		query: { id: id }
	});
	window.open(curRoute.href, "_blank");
};

// 查看更多动态
const handleToMoreRiskSignal = () => {
	const route = router.resolve("/riskSignal");
	window.open(route.href, "_blank");
};
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.data-new {
	width: 1600px;
	height: 460px;
	display: flex;
	justify-content: space-between;
	.left {
		width: 1064px;
		height: 460px;
		margin-right: 16px;
		border-radius: 10px;
		background-color: #fff;
		border: 1px solid rgb(234, 236, 238);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		position: relative;
		.left-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			top: 223px;
			left: 0px;
			cursor: pointer;
			z-index: 100;
			pointer-events: auto;
		}
		.right-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			top: 223px;
			right: 0px;
			cursor: pointer;
			z-index: 100;
			pointer-events: auto;
		}
		.left-top {
			width: 100%;
			height: 48px;
			position: relative;
			border-bottom: 1px solid rgb(234, 236, 238);
			img {
				width: 18px;
				height: 18px;
				position: absolute;
				top: 15px;
				left: 23px;
			}
			.more {
				height: 48px;
				line-height: 48px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				position: absolute;
				top: 0;
				right: 40px;
				color: rgb(5, 95, 194);
				cursor: pointer;
				z-index: 101;
			}
			.left-top-title {
				margin-left: 60px;
				width: 152px;
				height: 48px;
				background-color: rgb(5, 95, 194);
				color: #fff;
				font-size: 20px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 26px;
				text-align: center;
				padding: 11px 16px;
			}
		}
		.carousel-item-content {
			width: 100%;
			height: 100%;
		}
		.left-center {
			width: 967px;
			height: 208px;
			margin-top: 33px;
			margin-left: 62px;
			border-bottom: 1px solid rgb(234, 236, 238);
			position: relative;
			img {
				width: 148px;
				height: 148px;
				margin-right: 21px;
			}
			display: flex;
			.left-center-main {
				width: 758px;
				height: 175px;
				.left-center-main-title {
					margin-left: 19px;
					margin-bottom: 17px;
					font-size: 20px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					color: rgb(5, 95, 194);
				}
				.left-center-main-ul {
					// width: 439px;
					height: 132px;
					ul {
						list-style: none;
						li {
							width: 100%;
							min-height: 24px;
							margin-bottom: 12px;
							display: flex;
							align-items: flex-start;
							&::before {
								content: "·";
								font-size: 24px;
								line-height: 20px;
								font-weight: bold;
								margin-right: 16px;
								color: rgb(59, 65, 75);
							}
							.ul-title {
								flex-shrink: 0;
								width: 120px;
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(59, 65, 75);
							}
							.ul-content {
								flex: 1;
								color: rgb(59, 65, 75);
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
							}
							.ul-tags {
								flex: 1;
								display: flex;
								flex-wrap: wrap;
								gap: 8px;
							}
							.ul-pie {
								display: inline-block;
								box-sizing: border-box;
								padding: 2px 8px;
								border: 1px solid;
								border-radius: 4px;
								font-size: 14px;
								line-height: 18px;
								white-space: nowrap;
							}
							.cl1 {
								border-color: rgba(186, 224, 255, 1);
								background-color: rgba(230, 244, 255, 1);
								color: rgba(22, 119, 255, 1);
							}
							.cl2 {
								border-color: rgba(255, 163, 158, 1);
								background-color: rgba(255, 241, 240, 1);
								color: rgba(245, 34, 45, 1);
							}
							.cl3 {
								border-color: rgba(135, 232, 222, 1);
								background-color: rgba(230, 255, 251, 1);
								color: rgba(19, 168, 168, 1);
							}
							.cl4 {
								border-color: rgba(211, 173, 247, 1);
								background-color: rgba(249, 240, 255, 1);
								color: rgba(114, 46, 209, 1);
							}
						}
					}
				}
			}
			.left-center-title {
				padding: 3px 8px 5px;
				height: 32px;
				border-radius: 4px;
				background-color: rgba(231, 243, 255, 1);
				font-size: 18px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(5, 95, 194);
				position: absolute;
				right: 0px;
				top: -1px;
			}
		}
		.left-bottom {
			margin: 17px 0 0 62px;
			ul {
				list-style: none;
				.left-bottom-li {
					font-size: 16px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(59, 65, 75);
					margin-bottom: 10px;
					display: flex;
					align-items: center;
					&::before {
						content: "·";
						font-size: 24px;
						line-height: 20px;
						font-weight: bold;
						margin-right: 12px;
						color: rgb(59, 65, 75);
					}
				}
			}
			.left-bottom-content {
				width: 943px;
				margin-left: 22px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 30px;
				color: rgb(59, 65, 75);
			}
		}
	}
	.right {
		width: 520px;
		height: 460px;
		border-radius: 10px;
		background-color: #fff;
		border: 1px solid rgb(234, 236, 238);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		position: relative;
		.right-top {
			width: 520px;
			height: 48px;
			border-bottom: 1px solid rgb(234, 236, 238);
			position: relative;
			img {
				width: 21px;
				height: 16.84px;
				position: absolute;
				top: 15.1px;
				left: 19.5px;
			}
			.right-top-title {
				padding: 11px 16px;
				width: 148px;
				height: 48px;
				background-color: rgb(206, 79, 81);
				font-size: 20px;
				font-family: "Microsoft YaHei";
				font-weight: 700;
				line-height: 26px;
				text-align: center;
				color: #fff;
				margin-left: 60px;
				span {
					display: inline-block;
					width: 24px;
					height: 20px;
					background-color: rgba(255, 255, 255, 0.3);
					font-size: 14px;
					font-family: "Microsoft YaHei";
					font-weight: 400;
					line-height: 22px;
					text-align: center;
					color: #fff;
					border-radius: 100px;
				}
			}
		}
		.right-main {
			width: 468px;
			padding-right: 5px;
			height: 47px;
			border-radius: 2px;
			display: flex;
			align-items: center;
			cursor: pointer;
			&:hover {
				background: var(--color-bg-hover);
			}
			.main-left {
				width: 40px;
				height: 40px;
				margin: 4px 13px 3px 2px;
				border-radius: 50%;
				font-size: 12px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 14px;
				padding: 6px 4px;
				text-align: center;
			}
			.cl4 {
				background-color: rgba(255, 241, 240, 1);
				color: rgb(206, 79, 81);
			}
			.cl5 {
				background-color: rgba(255, 247, 230, 1);
				color: rgba(250, 140, 22, 1);
			}
			.cl6 {
				background-color: rgba(246, 255, 237, 1);
				color: rgba(82, 196, 26, 1);
			}
			.item-right {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				overflow: hidden;
				.main-center {
					flex: 1;
					height: 30px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 30px;
					color: rgb(59, 65, 75);
					margin-right: 10px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.main-right {
					width: 100px;
					height: 24px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(132, 136, 142);
					text-align: right;
					flex-shrink: 0;
				}
			}
		}
		.right-mainbtn {
			width: 460px;
			height: 42px;
			border-radius: 6px;
			position: absolute;
			left: 26px;
			bottom: 21px;
			background-color: rgb(5, 95, 194);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			img {
				width: 16px;
				height: 16px;
				margin-right: 8px;
			}
			font-size: 16px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 24px;
		}
	}
}
</style>
