<template>
	<div class="cooperation-restrictions-detail">
		<div class="nav">
			<div class="nav-main">
				<img :src="coopData?.IMAGEURL || defaultImg" alt="" />
				<div class="content">
					<div class="cl1">{{ coopData?.LIMITNAMEZH }}</div>
					<div v-if="hasLimitNameEn" class="cl2">{{ coopData?.LIMITNAME }}</div>
					<div class="cl3">{{ coopData?.LIMITDATE }} · {{ coopData?.LIMITORGNAME }}</div>
				</div>
				<div class="btn">

					<!-- <button class="btn1"><img src="./assets/icon02.png" alt="" />查看官网</button> -->
					<button class="btn1 active" @click="handleOpenWrittingAsstaint"><img src="./assets/icon03.png" alt="" />分析报告</button>
				</div>
			</div>
		</div>
		<div class="title" v-if="coopData.Relation?.[0]" @click="handleClick">
			<span class="title-one">当前合作限制数据已关联至{{ coopData.Relation[0]?.TYPE }}：</span>
			<span class="title-two">《{{ coopData.Relation[0]?.RELATIONNAME }}》{{ coopData.Relation[0]?.RELATIONDATE }}</span>
			<img src="./assets/right.png" alt="" />
		</div>
		<div class="main">
			<div class="left">
				<!-- 制裁概况 -->
				<div class="left-top">
					<AnalysisBox title="制裁概况" :showAllBtn="true">
						<div class="box1-main">
							<div class="left-top-content">
								<span>{{ coopData?.INTRODUCTION }}</span>
							</div>
							<div class="left-top-bottom">
								<div><span class="tit1">限制时间：</span><span class="tit2">{{ coopData?.LIMITDATE }}</span></div>
								<div @click="handleClickOnLimitOrg" style="cursor: pointer;"><span class="tit1">限制机构：</span><span
										class=" tit3">{{ coopData?.LIMITORGNAME }} ></span></div>
								<div><span class="tit1">限制手段：</span><span class="tit2">{{ coopData?.LIMITMEANS }}</span></div>
								<div><span class="tit1">限制类型：</span><span class="tit4">{{ coopData?.LIMITTYPE }}</span></div>
								<div><span class="tit1">限制领域：</span><span class="tit2">{{ coopData?.area }}</span></div>
							</div>
						</div>
					</AnalysisBox>
				</div>
				<!-- 相关实体 -->
				<div class="left-bottom">
					<AnalysisBox title="相关实体" :showAllBtn="true">
						<div class="left-bottom-main">
							<div v-for="item in coopRelatedData" :key="item.id" class="main-box" @click="handleClickOnEntity(item)">
								<img :src="item.img || defaultCom" alt="" class="img-left-item" />
								<div class="name">{{ item.ENTITYNAME }}</div>
								<div class="type">{{ item.position }}</div>
							</div>
						</div>
					</AnalysisBox>
				</div>
			</div>
			<div class="right">
				<!-- 背景分析 -->
				<div class="right-top">
					<img class="img1" src="./assets/bluetitle.png" alt="" />
					<div class="right-top-title">背景分析</div>
					<div class="btn cl1" :class="{ active: active === '涉华背景' }" @click="active = '涉华背景'">涉华背景</div>
					<div class="btn cl2" :class="{ active: active === '全部背景' }" @click="active = '全部背景'">全部背景</div>
					<div class="right-top-content">
						<div v-for="(item, index) in filteredBackgroundList" :key="index" class="right-top-item">
							<span class="id">{{ index + 1 }}</span>
							<span class="name">{{ item.CONTENT }}</span>
							<img src="./assets/打开按钮.png" alt="" />
						</div>
					</div>
				</div>
				<!-- 限制条款 -->
				<div class="right-bottom">
					<img class="img1" src="./assets/bluetitle.png" alt="" />
					<div class="right-bottom-title">限制条款</div>
					<div class="btn cl1" :class="{ 'active': active2 === '涉华条款' }" @click="active2 = '涉华条款'">涉华条款</div>
					<div class="btn cl2" :class="{ 'active': active2 === '全部条款' }" @click="active2 = '全部条款'">全部条款</div>
					<div class="right-bottom-content">
						<div v-for="(item, index) in filteredClauseList" :key="index" class="clause-item">
							<div class="clause-item-title">
								<span>（{{ chineseNumbers[index] }}）{{ item.TITLE }} </span>
								<img src="./assets/打开按钮.png" alt="">
							</div>
							<!-- contentList：单条按原样式展示；多条则逐条展示并加 1.2.3. 前缀 -->
							<div v-if="Array.isArray(item.contentList) && item.contentList.length > 1"
								class="clause-item-content-list">
								<div v-for="(row, i) in item.contentList" :key="i" class="clause-item-content-row">
									<span class="row-index">{{ i + 1 }}.</span>
									<span class="row-text">{{ row.CONTENT }}</span>
								</div>
							</div>
							<div v-else class="clause-item-content-row">
								<span class="row-text">{{ item.contentList?.[0]?.CONTENT || "" }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getCoopRestrictionIntroduction, getCoopRestrictionRelated, getCoopRestrictionBackground, getCoopRestrictionClause } from "@/api/coopRestriction/coopRestriction";
import { decodeCooperationRestrictionQueryId } from "@/utils/goToPageRouteHelpers.js";

const route = useRoute();
const router = useRouter();
const limitId = computed(() => decodeCooperationRestrictionQueryId(route.query?.id));
import defaultImg from "./assets/image01.png"
import defaultCom from "../assets/images/default-icon2.png"
import Harvard from "./assets/哈佛.png";
import Senate from "./assets/参议院.png";
import Justice from "./assets/司法部.png";
import Security from "./assets/国土安全部.png";
import bill from "./assets/授权法案.png";
import Trump from "./assets/trump.png";
import Rubio from "./assets/卢比奥.png";
import Bondi from "./assets/邦迪.png";
import Nome from "./assets/诺姆.png";

const hasLimitNameEn = computed(() => {
	return Boolean(String(coopData.value?.LIMITNAME ?? "").trim());
});

const handleOpenWrittingAsstaint = () => {
	const { href } = router.resolve({ path: "/writtingAsstaint" });
	window.open(href, "_blank");
};

// 合作限制-查询限制条款
const limitClauseData = ref([]);
const getlimitClauseData = async () => {
	const id = limitId.value;
	if (!id) return;
	try {
		const res = await getCoopRestrictionClause({
			limitId: id
		});
		if (res && res.code === 200) {
			// 兼容后端返回：数组 / 单对象 / 包一层 data
			const raw = res?.data?.data ?? res?.data ?? [];
			limitClauseData.value = Array.isArray(raw) ? raw : raw ? [raw] : [];
		} else {
			limitClauseData.value = [];
		}
	} catch (error) {
		console.error("获取合作限制限制条款数据失败:", error);
		limitClauseData.value = [];
	}
};



// 合作限制-查询背景分析
const backgroundList = ref([]);
const getbackgroundData = async () => {
	const id = limitId.value;
	if (!id) return;
	try {
		const res = await getCoopRestrictionBackground({
			limitId: id
		});
		if (res && res.code === 200) {
			backgroundList.value = res.data || [];
		} else {
			backgroundList.value = [];
		}
	} catch (error) {
		console.error("获取合作限制背景分析数据失败:", error);
		backgroundList.value = [];
	}
};



// 合作限制-查询相关实体
const coopRelatedData = ref([]);
const getcoopRelatedData = async () => {
	const id = limitId.value;
	if (!id) return;
	try {
		const res = await getCoopRestrictionRelated({
			limitId: id
		});
		if (res && res.code === 200) {
			// 展示图片：优先后端返回的 imageUrl，其次用已有 img 字段，再兜底默认图
			coopRelatedData.value = (Array.isArray(res.data) ? res.data : []).map((row) => ({
				...row,
				img: row?.imageUrl || row?.img || row?.IMAGEURL || row?.image || ""
			}));
		} else {
			coopRelatedData.value = [];
		}
	} catch (error) {
		console.error("获取合作限制相关实体数据失败:", error);
		coopRelatedData.value = [];
	}
};
// 点击跳转关联实体详情
const handleClickOnEntity = (item) => {
	const entityType = item?.ENTITYTYPE;
	// ENTITYTYPE: 'O' 机构/公司；'P' 人物
	if (entityType === "P") {
		const personId = item?.PERSONID || item?.ENTITYID || item?.id;
		if (!personId) return;
		const encodedPersonId = (() => {
			const s = String(personId ?? "").trim();
			if (!s) return "";
			try {
				return btoa(encodeURIComponent(s));
			} catch (_) {
				return s;
			}
		})();
		if (!encodedPersonId) return;
		const { href } = router.resolve({
			path: "/characterPage",
			query: {
				type: 2,
				personId: encodedPersonId
			}
		});
		window.open(href, "_blank");
		return;
	}
	// 默认按公司/机构跳转（含 ENTITYTYPE === 'O' 或字段缺失）
	const companyId = item?.ENTITYID || item?.id;
	if (!companyId) return;
	const encodedInstitutionId = (() => {
		const s = String(companyId ?? "").trim();
		if (!s) return "";
		try {
			return btoa(encodeURIComponent(s));
		} catch (_) {
			return s;
		}
	})();
	if (!encodedInstitutionId) return;
	const { href } = router.resolve({
		path: "/institution",
		query: {
			id: encodedInstitutionId
		}
	});
	window.open(href, "_blank");
};


// 合作限制-查询简介接口
const coopData = ref({});
const getCoopRestrictionIntroductionData = async () => {
	const id = limitId.value;
	if (!id) return;
	try {
		const res = await getCoopRestrictionIntroduction({
			limitId: id
		});
		if (res && res.code === 200) {
			coopData.value = res.data || {};
		} else {
			coopData.value = {};
		}
	} catch (error) {
		console.error("获取合作限制简介数据失败:", error);
		coopData.value = {};
	}
};

// 点击跳转关联文件详情
const handleClick = () => {
	const relation = coopData.value?.Relation?.[0];
	if (!relation?.RELATIONID) return;

	let path = "";
	let query = {};
	const encodedRelationId = (() => {
		const s = String(relation.RELATIONID ?? "").trim();
		if (!s) return "";
		try { return btoa(encodeURIComponent(s)); } catch (_) { return s; }
	})();
	if (!encodedRelationId) return;

	if (relation.TYPE === "行政令") {
		path = "/decreeLayout/overview/introduction";
		query = { id: encodedRelationId };
	} else if (relation.TYPE === "法案") {
		path = "/billLayout/bill/introduction";
		query = { billId: encodedRelationId };
	}

	if (path) {
		const { href } = router.resolve({ path, query });
		window.open(href, "_blank");
	}
};
// 点击跳转限制机构详情
const handleClickOnLimitOrg = () => {
	if (!coopData.value?.LIMITORGID) return;
	const path = "/institution";
	const query = { id: coopData.value?.LIMITORGID };
	const { href } = router.resolve({ path, query });
	window.open(href, "_blank");
};

// 监听路由 id 变化，自动刷新数据
watch(
	() => limitId.value,
	(newId) => {
		if (newId) {
			getCoopRestrictionIntroductionData();
			getcoopRelatedData();
			getbackgroundData();
			getlimitClauseData();
		}
	},
	{ immediate: true }
);


const active = ref("涉华背景");

// 根据按钮切换过滤背景数据
const filteredBackgroundList = computed(() => {
	if (active.value === "全部背景") {
		return backgroundList.value;
	} else {
		return backgroundList.value.filter(item => item.ISCN === "Y");
	}
});

// 限制条款筛选：涉华条款/全部条款
const active2 = ref("涉华条款");
const chineseNumbers = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
const filteredClauseList = computed(() => {
	const list = Array.isArray(limitClauseData.value) ? limitClauseData.value : [];
	if (active2.value === "全部条款") {
		// 展示全部条款及全部段落
		return list.map((item) => ({
			...item,
			contentList: Array.isArray(item?.contentList) ? item.contentList : []
		}));
	}
	// 涉华条款：仅展示 contentList 中 ISCN=Y 的段落；若过滤后为空则不展示该条款
	return list
		.map((item) => {
			const contentList = (Array.isArray(item?.contentList) ? item.contentList : []).filter((row) => row?.ISCN === "Y");
			return { ...item, contentList };
		})
		.filter((item) => Array.isArray(item?.contentList) && item.contentList.length > 0);
});

const dataList = ref([
	{
		id: 1,
		name: "哈佛大学",
		type: "",
		img: Harvard
	},
	{
		id: 2,
		name: "美国参议院",
		type: "",
		img: Senate
	},
	{
		id: 3,
		name: "美国司法部",
		type: "",
		img: Justice
	},
	{
		id: 4,
		name: "美国国土安全部",
		type: "",
		img: Security
	},
	{
		id: 5,
		name: "国防授权法案",
		type: "",
		img: bill
	},
	{
		id: 6,
		name: "唐纳德·特朗普",
		type: "总统",
		img: Trump
	},
	{
		id: 7,
		name: "马尔科·卢比奥",
		type: "国务卿",
		img: Rubio
	},
	{
		id: 8,
		name: "帕姆·邦迪",
		type: "司法部长",
		img: Bondi
	},
	{
		id: 9,
		name: "克丽斯蒂·诺姆",
		type: "国土安全部部长",
		img: Nome
	}
]);

const dataList2 = ref([
	{
		id: 1,
		name: "2016-2019 年美国钒表观消费量年均 8590 吨（含钒量），国内产量仅 340 万千克 / 年，进口依赖度超 80%（年均进口 780 万千克）（P1-481、P1-661）。"
	},
	{
		id: 2,
		name: "哈佛大学拒绝提供关于其外国学生已知不当行为和犯罪行为的充分信息，特朗普认为这对国家安全构成了不可接受的风险。"
	},
	{
		id: 3,
		name: "近年来，哈佛大学的犯罪率——包括暴力犯罪率——急剧上升。 哈佛未能对校园内至少某些行为违规进行纪律处分。"
	},
	{
		id: 4,
		name: "调查认为哈佛大学与包括敌对国家在内的外国建立了广泛的纠葛。 过去五年哈佛从外国政府获得了超过1.5亿美元的总捐赠，来自国外的捐赠超过10亿美元。 过去十年中，哈佛仅从中国就获得了超过1.5亿美元的资金支持。 哈佛“多次接待并培训中国共产党准军事组织成员”，哈佛研究人员还与中国相关人士合作开展可能推动中国军事现代化的研究。"
	},
	{
		id: 5,
		name: "哈佛大学继续公视其学生和教职工的公民权利，引发了多起联邦调查。 哈佛在招生中对不利种族的歧视如此明显，以至于最高法院在全国范围内终止这一做法的裁决以哈佛命名。"
	}
]);

const dataList3 = ref([
	{
		id: 1,
		name: "根据本公告第 1 条的暂停和入境限制，适用于在本公告发布日期后通过 SEVP 进入或试图进入美国开始就读哈佛大学的外国人。"
	},
	{
		id: 2,
		name: "国务卿应酌情考虑，目前就读哈佛大学且持有 F、M 或 J 签证且符合本公告第 1 条所述条件的外国人，是否应根据 INA 第 221（i）条撤销其签证， 8 美国法典 1201（i）"
	},
	{
		id: 3,
		name: "根据本公告第 1 条的入境暂停和限制，不适用于通过 SEVP 进入美国就读其他大学的外国人。"
	},
	{
		id: 4,
		name: "根据本公告第 1 条对入境的暂停和限制，不适用于任何由国务卿、国土安全部长或其指定人认定符合国家利益的外国人。"
	},
	{
		id: 5,
		name: "本公告发布日起不迟于 90 天内，司法部长与国土安全部长应通过总统国家安全事务助理共同向总统提交建议，决定是否延长或续期本公告第 1 条中暂停和限制入境的条款符合美国利益。"
	}
]);
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}

.cooperation-restrictions-detail {
	width: 100%;
	height: 100%;
	background: rgba(243, 243, 244, 1);
	overflow: auto;
	padding-bottom: 50px;

	.nav {
		width: 100%;
		height: 120px;
		padding: 19px 0 20px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);

		.nav-main {
			width: 1600px;
			height: 81px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			position: relative;

			img {
				width: 72px;
				height: 72px;
				margin-right: 16px;
			}

			.content {
				width: 758px;
				height: 81px;
				margin-right: 378px;

				.cl1 {
					font-size: 24px;
					font-weight: 700;
					line-height: 32px;
					font-family: "Source Han Sans CN";
					color: rgb(59, 65, 75);
					margin-bottom: 1px;
				}

				.cl2 {
					height: 24px;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					font-family: "Source Han Sans CN";
					color: rgb(59, 65, 75);
					margin-bottom: 1px;
				}

				.cl3 {
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					font-family: "Source Han Sans CN";
					color: rgb(95, 101, 108);
				}
			}

			.btn {
				width: 376px;
				height: 48px;
				display: flex;
				justify-content: right;
				position: absolute;
				right: 0;
				bottom: -20px;
				margin-left: 0;


				.btn1 {
					border-radius: 6px;
					border: 1px solid rgb(230, 231, 232);
					width: 120px;
					height: 36px;
					background-color: #fff;
					margin-right: 8px;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;

					img {
						width: 16px;
						height: 16px;
						margin-right: 8px;
					}

					font-size: 16px;
					font-weight: 400;
					line-height: 22px;
					font-family: "Microsoft YaHei";
					color: rgb(95, 101, 108);
				}

				.active {
					background-color: rgb(5, 95, 194);
					color: #fff;
				}
			}
		}
	}

	.title {
		width: 1600px;
		height: 50px;
		margin: 16px auto;
		border-radius: 10px;
		border: 1px solid rgba(174, 214, 255, 1);
		background-color: rgba(246, 250, 255, 1);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		display: flex;
		align-items: center;
		position: relative;
		cursor: pointer;

		.title-one {
			margin-left: 23px;
			font-family: "Source Han Sans CN";
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			letter-spacing: 0px;
			text-align: justify;
			color: rgb(59, 65, 75);
		}

		.title-two {
			font-family: "Source Han Sans CN";
			font-weight: 700;
			font-size: 16px;
			line-height: 24px;
			letter-spacing: 0px;
			text-align: justify;
			color: rgb(5, 95, 194);
			cursor: pointer;
		}

		img {
			width: 24px;
			height: 24px;
			position: absolute;
			top: 13px;
			right: 13px;
			cursor: pointer;
		}
	}

	.main {
		width: 1600px;

		margin: 0 auto;
		display: flex;
		margin-top: 16px;

		.left {
			width: 520px;

			margin-right: 17px;

			.left-top {
				margin-bottom: 16px;
				width: 520px;
				// height: 386px;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				position: relative;
				box-sizing: border-box;
				overflow: hidden;


				.box1-main {

					display: flex;
					flex-direction: column;
					height: 100%;
					padding-bottom: 33px;

					.left-top-content {
						width: 470px;
						margin-top: 4px;
						margin-left: 26px;
						border-radius: 4px;
						border: 1px solid rgba(231, 243, 255, 1);
						background: linear-gradient(to bottom, rgba(231, 243, 255, 1), rgba(231, 243, 255, 0));
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 16px 24px;

						span {
							font-size: 16px;
							font-weight: 700;
							line-height: 30px;
							font-family: "Microsoft YaHei";
							color: rgb(5, 95, 194);
						}
					}

					.left-top-bottom {
						width: 460px;
						height: 184px;
						margin-top: 19px;
						margin-left: 26px;

						div {
							height: 24px;
							margin-bottom: 16px;

							.tit1 {
								display: inline-block;
								width: 120px;
								font-size: 16px;
								height: 26px;
								font-weight: 700;
								font-family: "Source Han Sans CN";
								line-height: 24px;
								color: rgb(59, 65, 75);
							}

							.tit2 {
								font-size: 16px;
								font-weight: 400;
								font-family: "Source Han Sans CN";
								line-height: 30px;
								color: rgb(59, 65, 75);
							}

							.tit3 {
								color: rgb(5, 95, 194);
								font-family: "Source Han Sans CN";
								line-height: 30px;
								font-size: 16px;
								font-weight: 400;
								cursor: pointer;
							}

							.tit4 {
								display: inline-block;
								font-family: "Source Han Sans CN";
								border-radius: 4px;
								line-height: 24px !important;
								background-color: rgb(231, 243, 255);
								color: rgb(5, 95, 194);
								padding: 2px 4px;
							}
						}
					}
				}

			}

			.left-bottom {
				width: 520px;

				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);

				.left-bottom-main {
					width: 520px;
					padding: 6px 21px 22px 21px;
					display: flex;
					flex-direction: column;
					gap: 12px;

					.main-box {
						width: 480px;
						height: 48px;
						border-radius: 50px;
						border: 1px solid rgb(234, 236, 238);

						display: flex;
						padding-left: 16px;
						padding-top: 12px;
						padding-bottom: 12px;
						background-color: rgb(247, 248, 249);

						cursor: pointer;

						img {
							width: 24px;
							height: 24px;
							border-radius: 50%;
							display: inline-block;
							object-fit: cover;
							object-position: center;


						}

						.name {
							font-family: "Source Han Sans CN";
							font-weight: 700;
							font-size: 16px;
							line-height: 24px;
							letter-spacing: 0;
							text-align: left;
							color: rgb(59, 65, 75);
							margin-left: 12px;
						}

						.type {
							font-family: "Source Han Sans CN";
							font-weight: 400;
							font-size: 16px;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: right;
							color: rgb(95, 101, 108);
							margin-left: auto;
							margin-right: 18px;

						}
					}
				}
			}

			/* 仅本页左侧两个 AnalysisBox：头部高度改为 54px（放在 .left 作用域，避免 SCSS 嵌套导致选择器失效） */
			:deep(.left-top .analysis-box-wrapper .wrapper-header),
			:deep(.left-bottom .analysis-box-wrapper .wrapper-header) {
				height: 54px !important;
			}

			:deep(.left-top .analysis-box-wrapper .wrapper-header .header-title > div),
			:deep(.left-bottom .analysis-box-wrapper .wrapper-header .header-title > div) {
				line-height: 54px !important;
			}
		}

		.right {
			width: 1063px;


			.right-top {
				margin-bottom: 16px;
				width: 1063px;

				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				position: relative;
				padding: 60px 19px 24px 22px;

				.right-top-title {
					font-size: 20px;
					font-weight: 700;
					line-height: 26px;
					font-family: "Microsoft YaHei";
					color: rgb(5, 95, 194);
					position: absolute;
					top: 14px;
					left: 22px;
				}

				.img1 {
					width: 8px;
					height: 20px;
					position: absolute;
					left: 0px;
					top: 18px;
				}

				.right-top-content {
					width: 1022px;


					.right-top-item {
						width: 1022px;
						padding: 12px 0px;
						position: relative;
						display: flex;
						align-items: center;
						overflow: auto;
					}

					.right-top-item:nth-child(odd) {
						background-color: rgb(247, 248, 249);
						border-top: 1px solid rgb(234, 236, 238);
						border-bottom: 1px solid rgb(234, 236, 238);
					}

					.right-top-item .id {
						display: inline-block;
						width: 24px;
						height: 24px;
						font-size: 12px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(5, 95, 194);
						background-color: rgba(231, 243, 255, 1);
						text-align: center;
						border-radius: 50%;
						position: absolute;
						top: 16px;
						left: 24px;
					}

					.right-top-item .name {
						display: inline-block;
						width: 902px;
						font-family: "Source Han Sans CN";
						font-weight: 400;
						font-size: 16px;
						line-height: 30px;
						letter-spacing: 0px;
						text-align: justify;
						color: rgb(59, 65, 75);
						margin-left: 64px;
					}

					.right-top-item img {
						width: 16px;
						height: 31px;
						position: absolute;
						top: 12px;
						right: 24px;
						cursor: pointer;
					}
				}

				.btn {
					padding: 2px 8px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(59, 65, 75);
					border-radius: 4px;
					border: 1px solid rgb(230, 231, 232);
					background-color: #fff;
					cursor: pointer;
					position: absolute;

				}

				.cl1 {
					top: 14px;
					right: 107px;
				}

				.cl2 {
					top: 14px;
					right: 19px;
				}

				.active {
					color: rgb(5, 95, 194);
					background-color: rgba(246, 250, 255, 1);
					border-color: rgb(5, 95, 194);
				}
			}

			.right-bottom {
				width: 1063px;

				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				position: relative;
				padding: 60px 19px 0px 22px;


				.right-bottom-title {
					font-size: 20px;
					font-weight: 700;
					line-height: 26px;
					font-family: "Microsoft YaHei";
					color: rgb(5, 95, 194);
					position: absolute;
					top: 14px;
					left: 22px;
				}

				.img1 {
					width: 8px;
					height: 20px;
					position: absolute;
					left: 0px;
					top: 18px;
				}

				.btn {
					padding: 2px 8px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(59, 65, 75);
					border-radius: 4px;
					border: 1px solid rgb(230, 231, 232);
					background-color: #fff;
					cursor: pointer;
					position: absolute;

				}

				.cl1 {
					top: 14px;
					right: 107px;
				}

				.cl2 {
					top: 14px;
					right: 19px;
				}

				.active {
					color: rgb(5, 95, 194);
					background-color: rgba(246, 250, 255, 1);
					border-color: rgb(5, 95, 194);
				}

				.right-bottom-content {
					width: 1022px;

					overflow: auto;

					.clause-item {
						margin-bottom: 24px;

						.clause-item-title {
							width: 1022px;
							height: 55px;
							padding: 14px 24px 17px 24px;
							display: flex;
							align-items: center;
							justify-content: space-between;

							background-color: rgb(247, 248, 249);
							border-top: 1px solid rgb(234, 236, 238);
							border-bottom: 1px solid rgb(234, 236, 238);

							span {
								font-size: 18px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(59, 65, 75);
							}

							img {
								width: 16px;
								height: 31px;

								right: 24px;
								top: 14px;
								cursor: pointer;
							}
						}

						.clause-item-content-list {
							width: 1022px;
						}

						/* 每条段落的展示：padding / 描边 / 间距保持与旧版单条 CONTENT 一致 */
						.clause-item-content-row {
							width: 1022px;
							padding: 12px 24px 12px 54px;
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 30px;
							color: rgb(59, 65, 75);
							border-bottom: 1px solid rgb(234, 236, 238);
							white-space: pre-line;
							display: flex;
							gap: 8px;

							.row-index {
								flex: 0 0 auto;
							}

							.row-text {
								flex: 1;
								min-width: 0;
							}
						}
					}
				}
			}
		}
	}
}
</style>
