<template>
	<div class="data-new">
		<div class="left">
			<img src="./assets/leftbtn.png" alt class="left-btn" @click="changeIndex(-1)" />
			<img src="./assets/rightbtn.png" alt class="right-btn" @click="changeIndex(1)" />
			<div class="left-top">
				<img src="./assets/icon01.png" alt />
				<div class="left-top-title">规则限制动态</div>
				<div class="more" @click="handleClickToDetail">查看详情 ></div>
			</div>
			<div class="left-center">
				<img src="./assets/usImg.png" alt />
				<div class="left-center-main">
					<div class="left-center-main-title">{{ latestUpdateList[latestUpdateIndex].RULENAMEZH }}</div>
					<div class="left-center-main-ul">
						<ul>
							<li>
								<span class="ul-title">发布机构：</span>
								<span class="ul-content">{{ latestUpdateList[latestUpdateIndex].PUBLISHORGNAME }}</span>
							</li>
							<li>
								<span class="ul-title">发布日期：</span>
								<span class="ul-content">{{ latestUpdateList[latestUpdateIndex].PUBLISHDATE }}</span>
							</li>
							<li>
								<span class="ul-title">涉及领域：</span>
								<span
									class="ul-pie cl1"
									v-for="item in latestUpdateList[latestUpdateIndex].ruleAreas"
								>{{ item }}</span>
								<!-- <span class="ul-pie cl2">集成电路</span>
								<span class="ul-pie cl3">新材料</span>
								<span class="ul-pie cl4">生物科技</span>-->
							</li>
							<li>
								<span class="ul-title">限制实体：</span>
								<span
									class="ul-content"
									v-for="item in latestUpdateList[latestUpdateIndex].ruleEntities"
								>{{ item.ORGNAME }} &nbsp;</span>
							</li>
						</ul>
					</div>
				</div>
				<!-- <div class="left-center-title">国会法案</div> -->
			</div>
			<div class="left-bottom">
				<ul>
					<li class="left-bottom-li">内容摘要：</li>
				</ul>
				<div class="left-bottom-content">{{ latestUpdateList[latestUpdateIndex].RULEINTRODUCTION }}</div>
			</div>
		</div>
		<div class="right">
			<div class="right-top">
				<img src="./assets/icon02.png" alt />
				<div class="right-top-title">
					风险信号
					<span>{{ list.length }}</span>
				</div>
			</div>
			<div style="margin: 6px 34px 0 23px">
				<div v-for="(item, index) in list" :key="index" class="right-main">
					<div
						class="main-left"
						:class="{ cl4: item.signalLevel === '特别重大', cl5: item.signalLevel === '重大风险', cl6: item.signalLevel === '一般风险'}"
					>{{ item.signalLevel }}</div>
					<div class="main-center">{{ item.signalTitle }}</div>
					<div class="main-right">{{ item.signalTime }}</div>
				</div>
			</div>
			<div class="right-mainbtn" @click="handleToMoreRiskSignal">
				<img src="./assets/btn.png" alt />
				查看更多
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onBeforeMount, computed } from "vue";
import router from "@/router";
import { getLatestUpdates, getRiskSignal } from '@/api/ruleRestriction/index.js'

const list = ref([
  {
    id: 1,
    title: "特别重大",
    content: "保护美国资金与专业知识免受敌对研究利用法案",
    time: "一天前"
  },
  {
    id: 2,
    title: "特别重大",
    content: "美国国土安全部终止哈佛大学SEVP认证",
    time: "一天前"
  },
  {
    id: 3,
    title: "重大风险",
    content: "众议院“美中战略竞争特别委员会”向国会提...",
    time: "一天前"
  },
  {
    id: 4,
    title: "重大风险",
    content: '2026财年拨款法案要求重启"中国行动计划"',
    time: "一天前"
  }
]);

// 最新动态列表
const latestUpdateList = ref([{}])
// 当前显示最新动态的序号
const latestUpdateIndex = ref(0)

// 改变序号
const changeIndex = (num) => {
  if (num === -1) {
    // 判断当前是否是第一个，是的话则将序号设置为最后一个
    if (latestUpdateIndex.value === 0) {
      latestUpdateIndex.value = latestUpdateList.value.length - 1
    } else {
      latestUpdateIndex.value--
    }
  } else {
    // 判断当前是否是最后一个，是的话则将序号设置为第一个
    if (latestUpdateIndex.value === latestUpdateList.value.length - 1) {
      latestUpdateIndex.value = 0
    } else {
      latestUpdateIndex.value++
    }
  }
}


const getLatestUpdateInfo = async () => {
  try {
    const res = await getLatestUpdates();
    // console.log('------getLatestUpdateInfo res', res)
    if (res && res.code === 200) {
      console.log('----getLatestUpdateInfo', res.data)
      latestUpdateList.value = res.data
    }
  } catch (error) {
    console.error("获取最新动态接口失败:", error);
  }
}

const getRiskSignalInfo = async () => {
  try {
    const res = await getRiskSignal('0108');
    console.log('------getRiskSignalInfo res', res)
    if (res && res.code === 200) {
      console.log('----getRiskSignalInfo', res.data)
      list.value = res.data
    }
  } catch (error) {
    console.error("获取风险信号接口失败:", error);
  }
}

// // 跳转详情
// const handleClickToDetail = () => {
//   // router.push("/decreeLayout");
//   // const route = router.resolve("");
//   window.open(`/ruleRestrictions/detail?id=${latestUpdateList.value[latestUpdateIndex.value].RULEID}`, "_blank");
// };

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

// 点击风险信号详情
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");
};

onBeforeMount(async () => {
  await getLatestUpdateInfo()
  await getRiskSignalInfo()
})
</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(255, 247, 230, 1);
				color: rgb(22, 223, 250);
			}
			.main-center {
				width: 347px;
				// height: 30px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 30px;
				color: rgb(59, 65, 75);
				margin-right: 2px;
			}
			.main-right {
				width: 60px;
				// height: 24px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(132, 136, 142);
				text-align: right;
			}
		}
		.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>
