<template>
	<div class="sanctions-overview">
		<div class="main">
			<div class="left">
				<div class="left-top">
					<AnalysisBox title="基本信息" :showAllBtn="false">
						<div class="left-top-title">
							<div class="info-row">
								<div class="label">发布机构：</div>
								<div class="value link">
									<img :src="formattedData.postOrgLogoUrl || title" alt="" class="icon" />
									<span @click="handleClickDp">{{ formattedData.postOrgName }} ></span>
								</div>
							</div>
							<div class="info-row">
								<div class="label">发布时间：</div>
								<div class="value">{{ formattedData.postDate }}</div>
							</div>
							<div class="info-row">
								<div class="label">发布文件：</div>
								<div class="value">{{ formattedData.fileCode }}</div>
							</div>
							<div class="info-row">
								<div class="label">发布人：</div>
								<div class="value link">
									<img :src="formattedData.avartar || defaultTitle" alt="" class="icon avatar" />
									<span @click="handleClick">{{ formattedData.postPersonName }} ></span>
								</div>
							</div>
							<div class="info-row">
								<div class="label">制裁领域：</div>
								<div class="value tags">
									<AreaTag v-for="(domain, index) in formattedData.domains" :key="index" :tagName="domain" />
								</div>
							</div>
						</div>
						<div class="left-top-content">
							<div class="content-title">新闻链接：</div>
							<div class="distribution-list">
								<div class="list-item news-item" v-for="item in newsList" :key="item.newsId">
									<div class="item-title">{{ item.newsTitle }}</div>
									<img :src="openIcon" class="flag" />
								</div>
							</div>
						</div>
						<div class="left-top-content">
							<div class="content-title">制裁实体分布：</div>
							<div class="distribution-list">
								<div
									class="list-item"
									v-for="(item, index) in entityDistribution"
									:key="index"
									@click="handleToDataLibrary(item)"
								>
									<img :src="item.imageUrl || flag" alt="" class="flag" />
									<div class="country-name">{{ item.name }}</div>
									<div class="progress-bar-container">
										<div
											class="progress-bar"
											:style="{
												width: item.width,
												background: item.gradient
											}"
										></div>
									</div>
									<div class="count" :class="{ highlight: item.name === '中国' }">{{ item.count }}家</div>
								</div>
							</div>
						</div>
					</AnalysisBox>
				</div>
				<div class="left-bottom">
					<AnalysisBox title="制裁背景" :showAllBtn="false">
						<div class="left-bottom-content">
							<div class="timeline-list">
								<div class="timeline-item" v-for="(item, index) in timelineData" :key="index">
									<div class="date-row">
										<div class="dot"></div>
										<div class="date">{{ item.date }}</div>
									</div>
									<div class="content">{{ item.content }}</div>
								</div>
							</div>
							<div class="view-more" v-if="hasMore" @click="loadMore">
								查看更多
								<el-icon class="icon-more">
									<DArrowRight />
								</el-icon>
							</div>
						</div>
					</AnalysisBox>
				</div>
			</div>
			<div class="right" v-loading="isLoading">
				<AnalysisBox title="制裁清单" :showAllBtn="false" style="height: auto">
					<div class="right-title">
						<div class="filter-row">
							<div class="filter-left">
								<el-select v-model="filterEntity" placeholder="受制裁实体" style="width: 184px">
									<el-option label="受制裁实体" value="2" />
									<el-option label="受制裁地址" value="7" />
									<el-option label="受制裁个人" value="1" />
								</el-select>
							</div>
							<div class="filter-right">
								<el-checkbox v-model="onlyChina" label="只看中国实体" />
								<el-select
									v-model="filterField"
									placeholder="全部领域"
									style="width: 150px; margin: 0 12px 0 16px"
								>
									<el-option label="全部领域" value="" />
									<el-option
										v-for="item in domainOptions"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
								<el-input
									v-model="searchKeyword"
									placeholder="搜索实体"
									style="width: 150px; border: 1px solid rgba(170, 173, 177, 0.4); border-radius: 5px"
									:suffix-icon="Search"
								/>
							</div>
						</div>
						<div class="stats-row">
							<div class="tabs">
								<div class="tab-btn" :class="{ active: activeTab === 'add' }" @click="activeTab = 'add'">
									新增实体
								</div>
								<div class="tab-btn" :class="{ active: activeTab === 'remove' }" @click="activeTab = 'remove'">
									移除实体
								</div>
							</div>
							<div class="stats-info">
								<div class="stat-item">
									<span class="dot red"></span>
									<span class="text"
										>新增 <span class="num red">{{ addCount }}</span> 家 (50%规则涉及<span class="num red">{{
											addRuleCount
										}}</span
										>家)</span
									>
								</div>
								<div class="stat-item">
									<span class="dot green"></span>
									<span class="text"
										>移除 <span class="num green">{{ removeCount }}</span> 家 (50%规则涉及<span
											class="num green"
											>{{ removeRuleCount }}</span
										>家)</span
									>
								</div>
							</div>
						</div>
					</div>
					<div class="right-content">
						<div class="sanction-group-list">
							<el-empty v-if="sanctionList.length === 0" description="暂无制裁清单" />
							<div class="sanction-group" v-for="(group, index) in sanctionList" :key="index">
								<el-table :data="group.entities" style="width: 100%">
									<el-table-column label="实体名称" min-width="280">
										<template #default="scope">
											<div class="name-cell">
												<!-- <div class="dot"></div> -->
												<img :src="defaultTitle" class="company-icon" />
												<span class="company-name" @click="handleCompClick(scope.row)">{{
													scope.row.name
												}}</span>
											</div>
										</template>
									</el-table-column>
									<el-table-column label="涉及领域" width="180" align="center">
										<template #default="scope">
											<!-- <span
												v-for="(item, index) in scope.row.fields"
												:key="index"
												class="tag"
												:style="getTagStyle(item)"
												style="margin: 0 2px"
												>{{ item }}</span
											> -->
											<div class="domain-box">
												<AreaTag
													v-for="(domain, index) in scope.row.fields"
													:key="index"
													:tagName="domain"
												/>
											</div>
										</template>
									</el-table-column>
									<el-table-column prop="location" label="上市地点" width="90" align="center" />
									<el-table-column prop="date" label="制裁时间" width="150" align="center" />
									<el-table-column prop="entityTypeId" label="类型" width="120" align="center">
										<template #default="scope">
											<div style="display: flex; gap: 4px; justify-content: center">
												<AreaTag
													:tagName="
														scope.row.entityType === 1
															? '个人'
															: scope.row.entityType === 2
																? '实体'
																: '公司'
													"
												/>
											</div>
										</template>
									</el-table-column>
									<!-- <el-table-column prop="revenue" label="营收(亿元)" width="110" align="center" /> -->
									<el-table-column label="50%规则子企业" width="180" align="center">
										<template #default="scope">
											<span
												v-if="scope.row.subsidiaryCount"
												class="subsidiary-link"
												@click="handleSubsidiaryClick(scope.row)"
											>
												{{ scope.row.subsidiaryText }}
												<span class="blue-text">{{ scope.row.subsidiaryCount }}家 ></span>
											</span>
											<span v-else>--</span>
										</template>
									</el-table-column>
								</el-table>
								<div class="reason-box">
									{{ group.reason }}
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
				<div :style="{ height: '20px' }"></div>
				<AnalysisBox title="制裁原因及相关历史制裁" :showAllBtn="false" style="height: auto">
					<div class="reason-history">
						<div class="reason-history-item" v-for="(item, index) in reasonHistoryList" :key="item.id">
							<div class="item-header">
								<div class="item-header-title">
									<div class="item-header-title-idx">{{ index + 1 }}</div>
									<div class="item-header-title-text">{{ item.sanReason }}</div>
								</div>
								<div class="item-header-domain">
									<AreaTag v-for="(domain, index) in item.techDomains" :key="index" :tagName="domain" />
								</div>
							</div>
							<div class="item-content" v-for="(record, index) in item.relateSanRecords" :key="index">
								<div class="item-content-record">
									<div class="item-content-record-header">
										{{ record.postDate + " " + record.title }}
									</div>
									<div class="item-content-record-content">
										{{ record.content }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
		<!-- 50%规则子企业弹框 -->
		<RuleSubsidiaryDialog
			v-model="subsidiaryDialogVisible"
			:company-name="currentSubsidiaryCompanyName"
			:total-count="currentSubsidiaryCount"
			:data-list="currentSubsidiaryList"
		/>
	</div>
</template>

<script setup>
import { ref, defineProps, computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import AreaTag from "@/components/base/AreaTag/index.vue";
import { debounce } from "lodash";
import title from "../../assets/title.png";
import defaultTitle from "../../assets/default-icon1.png";
import flag from "../../assets/default-icon2.png";
import openIcon from "../../../assets/icons/icon-open.png";
import {
	getSingleSanctionEntityCountry,
	getSingleSanctionBackground,
	getSingleSanctionOverviewList
} from "@/api/exportControlV2.0";
import { getRelateNews } from "@/api/finance";
import RuleSubsidiaryDialog from "../../../entityList/components/sanctionsOverview/components/listPage/RuleSubsidiaryDialog.vue";
import { getReasonAndSan } from "@/api/finance";
import { useRoute } from "vue-router";

import { useGotoCompanyPages } from "@/router/modules/company";
const gotoCompanyPages = useGotoCompanyPages();

const route = useRoute();
// 跳转公司详情页
const handleCompClick = item => {
	if (!item.entityId) {
		ElMessage.warning("暂无数据");
		return;
	}
	window.sessionStorage.setItem("curTabName", item.name);
	gotoCompanyPages(item.entityId);
	// const curRoute = router.resolve({ name: "companyPages", params: { id: item.entityId } });
	// window.open(curRoute.href, "_blank");
};

// 跳转发布机构详情页
const handleClickDp = () => {
	// console.log("点击了发布机构:", props.data);
	window.sessionStorage.setItem("curTabName", props.data.postOrgName);
	const route = router.resolve({
		path: "/institution",
		query: {
			id: props.data.postOrgId
		}
	});
	window.open(route.href, "_blank");
};

// 50%规则子企业弹框逻辑
const subsidiaryDialogVisible = ref(false);
const currentSubsidiaryCompanyName = ref("");
const currentSubsidiaryCount = ref(0);
const currentSubsidiaryList = ref([]);

const handleSubsidiaryClick = row => {
	currentSubsidiaryCompanyName.value = row.name;
	currentSubsidiaryCount.value = row.subsidiaryCount;
	currentSubsidiaryList.value = row.ruleOrgList || [];
	subsidiaryDialogVisible.value = true;
};

// 单次制裁-制裁概况-制裁清单
const sanctionList = ref([]);
const addCount = ref(0);
const addRuleCount = ref(0);
const removeCount = ref(0);
const removeRuleCount = ref(0);

const isLoading = ref(false);

// 调用单次制裁-制裁概况-制裁清单接口
const getSanctionOverviewList = async () => {
	isLoading.value = true;
	try {
		const res = await getSingleSanctionOverviewList({
			sanRecordId: sanRecordId.value,
			isOnlyCn: onlyChina.value,
			domainId: filterField.value || undefined,
			searchText: searchKeyword.value || undefined,
			searchType: searchType.value,
			entityTypeId: filterEntity.value || undefined
		});
		isLoading.value = false;
		if (res.code === 200) {
			const data = res.data || {};
			addCount.value = data.addCount || 0;
			addRuleCount.value = data.addRuleCount || 0;
			removeCount.value = data.removeCount || 0;
			removeRuleCount.value = data.removeRuleCount || 0;

			const list = activeTab.value === "add" ? data.sanList : data.removeList || [];
			sanctionList.value = list.map(item => ({
				reason: item.sanReason,
				entities: (item.orgList || []).map(org => ({
					...org,
					name: org.entityNameZh || org.entityName,
					fields: org.techDomains || [],
					location: "--", // 接口暂无数据
					date: org.startTime ? org.startTime.replace(/^(\d{4})-(\d{2})-(\d{2}).*$/, "$1年$2月$3日") : "--", // 格式化日期
					revenue: "--", // 接口暂无数据
					subsidiaryCount: org.ruleOrgCount || 0,
					subsidiaryText:
						org.ruleOrgList && org.ruleOrgList.length > 0
							? (org.ruleOrgList[0].orgName.length > 10
									? org.ruleOrgList[0].orgName.slice(0, 10) + "..."
									: org.ruleOrgList[0].orgName) + "...等"
							: ""
				}))
			}));
		}
	} catch (error) {
		console.log(error);
	}
};

// 单次制裁-制裁概况-制裁背景
const timelinePage = ref(1);
const timelinePageSize = ref(5);
const hasMore = ref(true);

const getSanctionBackground = async (isLoadMore = false) => {
	try {
		const res = await getSingleSanctionBackground({
			sanRecordId: sanRecordId.value,
			pageNum: timelinePage.value,
			pageSize: timelinePageSize.value
		});
		if (res.code === 200) {
			const list = res.data.content || [];
			const formattedList = list.map(item => ({
				...item,
				date: item.createTime ? item.createTime.split(" ")[0] : "", // 提取日期部分
				content: item.summaryZh
			}));

			if (isLoadMore) {
				timelineData.value = [...timelineData.value, ...formattedList];
			} else {
				timelineData.value = formattedList;
			}

			// 判断是否还有更多数据
			const totalElements = res.data.totalElements || 0;
			hasMore.value = timelineData.value.length < totalElements;
		}
	} catch (error) {
		console.log(error);
	}
};

const loadMore = () => {
	timelinePage.value++;
	getSanctionBackground(true);
};

const router = useRouter();
const sanRecordId = ref("");
const getUrlParams = () => {
	const urlParams = new URLSearchParams(window.location.search);
	sanRecordId.value = urlParams.get("id") || "";
};

// 单次制裁-制裁概况-制裁实体国家分布
const getEntityCountry = async () => {
	try {
		const params = {
			sanRecordId: sanRecordId.value,
			sanTypeId: sanTypeId.value || 1 // 默认为1
		};
		console.log("params --:", params);
		const res = await getSingleSanctionEntityCountry(params);
		if (res.code === 200) {
			const rawData = res.data || [];
			const maxCount = Math.max(...rawData.map(item => item.count || 0), 1);

			// 颜色池 - 用于循环分配
			const gradientPool = [
				"linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)", // 橙
				"linear-gradient(270deg, rgba(5,95,194,1) 0%, rgba(255,255,255,0) 100%)", // 蓝
				"linear-gradient(270deg, rgba(114,46,209,1) 0%, rgba(255,255,255,0) 100%)", // 紫
				"linear-gradient(270deg, rgba(16,178,166,1) 0%, rgba(255,255,255,0) 100%)" // 青
			];

			// 固定颜色映射 - 特定国家使用固定颜色
			const fixedColorMap = {
				中国: "linear-gradient(270deg, rgba(206,79,81,1) 0%, rgba(255,255,255,0) 100%)" // 红
			};

			entityDistribution.value = rawData.map((item, index) => ({
				...item,
				width: `${((item.count || 0) / maxCount) * 100}%`,
				// 优先使用固定颜色，否则循环使用颜色池中的颜色
				gradient: fixedColorMap[item.name] || gradientPool[index % gradientPool.length]
			}));
		}
	} catch (error) {
		console.log(error);
	}
};

const newsList = ref([]);

// 调用新闻链接接口
const getNewsList = async () => {
	try {
		const res = await getRelateNews(sanRecordId.value);
		console.log("res --:", res);
		newsList.value = res;
	} catch (error) {
		console.log(error);
	}
};

const props = defineProps({
	data: {
		type: Object,
		default: () => ({})
	}
});
// 跳转到人物页
const handleClick = () => {
	window.sessionStorage.setItem("curTabName", props.data.postPersonName);
	const route = router.resolve({
		path: "/characterPage",
		query: {
			// type: props.data.type,
			personId: props.data.postPersonId
		}
	});
	window.open(route.href, "_blank");
};

// 计算属性处理数据
const formattedData = computed(() => {
	const info = props.data || {};

	// 日期格式化
	const formatDate = dateStr => {
		if (!dateStr) return "";
		const date = new Date(dateStr);
		if (isNaN(date.getTime())) return dateStr;
		return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
	};

	return {
		postOrgName: info.postOrgName,
		postDate: formatDate(info.postDate),
		effectiveDate: formatDate(info.effectiveDate),
		fileCode: info.fileCode ? `${info.fileCode} ` : "",
		administrativeOrderId: info.administrativeOrderId ? `No. ${info.administrativeOrderId}` : "",
		postPersonName: info.postPersonName,
		domains: info.domainNames,
		avartar: info.postPersonAvatarUrl,
		postOrgLogoUrl: info.postOrgLogoUrl
	};
});

const filterEntity = ref("2");
const onlyChina = ref(false);
const filterField = ref("");
const searchKeyword = ref("");
const activeTab = ref("add");
const searchType = computed(() => activeTab.value);

// 监听筛选条件变化
watch([onlyChina, filterField, activeTab, filterEntity], () => {
	getSanctionOverviewList();
});

// 搜索框防抖
const debouncedSearch = debounce(() => {
	getSanctionOverviewList();
}, 500);

watch(searchKeyword, () => {
	debouncedSearch();
});

const domainOptions = ref([
	{ label: "人工智能", value: "1" },
	{ label: "生物科技", value: "2" },
	{ label: "新一代信息技术", value: "3" },
	{ label: "量子科技", value: "4" },
	{ label: "新能源", value: "5" },
	{ label: "集成电路", value: "6" },
	{ label: "海洋", value: "7" },
	{ label: "先进制造", value: "8" },
	{ label: "新材料", value: "9" },
	{ label: "航空航天", value: "10" },
	{ label: "深海", value: "11" },
	{ label: "极地", value: "12" },
	{ label: "太空", value: "13" },
	{ label: "核", value: "14" }
]);

const tagColors = [
	{ bg: "rgb(242, 235, 255)", border: "rgb(211, 190, 255)", text: "rgb(114, 46, 209)" }, // Purple
	{ bg: "rgb(225, 250, 248)", border: "rgb(178, 242, 238)", text: "rgb(16, 178, 166)" }, // Cyan
	{ bg: "rgb(231, 243, 255)", border: "rgb(186, 224, 255)", text: "rgb(5, 95, 194)" }, // Blue
	{ bg: "rgb(255, 247, 230)", border: "rgb(255, 213, 145)", text: "rgb(250, 140, 22)" }, // Orange
	{ bg: "rgb(255, 241, 240)", border: "rgb(255, 204, 199)", text: "rgb(245, 34, 45)" }, // Red
	{ bg: "rgb(246, 255, 237)", border: "rgb(183, 235, 143)", text: "rgb(82, 196, 26)" } // Green
];

const getTagStyle = tagName => {
	if (!tagName) return {};
	let hash = 0;
	for (let i = 0; i < tagName.length; i++) {
		hash = tagName.charCodeAt(i) + ((hash << 5) - hash);
	}
	const index = Math.abs(hash) % tagColors.length;
	const color = tagColors[index];
	return {
		backgroundColor: color.bg,
		borderColor: color.border,
		color: color.text
	};
};

const timelineData = ref([]);

const entityDistribution = ref([
	{
		name: "中国",
		count: 24,
		width: "100%",
		gradient: "linear-gradient(270deg, rgba(206,79,81,1) 0%, rgba(255,255,255,0) 100%)"
	},
	{
		name: "沙特阿拉伯",
		count: 2,
		width: "60%",
		gradient: "linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)"
	},
	{
		name: "俄罗斯",
		count: 2,
		width: "60%",
		gradient: "linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)"
	},
	{
		name: "中国香港",
		count: 1,
		width: "50%",
		gradient: "linear-gradient(270deg, rgba(5,95,194,1) 0%, rgba(255,255,255,0) 100%)"
	}
]);

const reasonHistoryList = ref([]);
const getReasonHistoryList = async () => {
	try {
		const res = await getReasonAndSan(sanRecordId.value);
		console.log("制裁原因及相关历史制裁", res);
		reasonHistoryList.value = res;
	} catch (error) {
		console.log(error);
	}
};

const sanTypeId = ref("");

// 跳转到数据资源库
const handleToDataLibrary = item => {
	console.log("item", item);
	const dateStr = formattedData.value.postDate.replace(
		/(\d{4})年(\d{1,2})月(\d{1,2})日/,
		(_, y, m, d) => `${y}-${m.padStart(2, "0")}-${d.padStart(2, "0")}`
	);

	const route = router.resolve({
		path: "/dataLibrary/sDNList",
		query: {
			selectedDate: JSON.stringify([dateStr, dateStr]),
			selectedCountryId: item.id
		}
	});
	window.open(route.href, "_blank");
};

onMounted(() => {
	// 获取路由参数中的sanTypeId
	console.log("route.query.sanTypeId --:", route.query.sanTypeId);
	sanTypeId.value = route.query.sanTypeId || "1";
	// 获取URL参数
	getUrlParams();
	// 单次制裁-制裁概况-制裁实体国家分布
	getEntityCountry();
	// 新闻链接
	getNewsList();
	// 单次制裁-制裁概况-制裁背景
	getSanctionBackground();
	// 单次制裁-制裁概况-制裁清单
	getSanctionOverviewList();
	// 单次制裁-制裁概况-制裁原因及相关历史制裁
	getReasonHistoryList();
});
</script>

<style scoped lang="scss">
.sanctions-overview {
	width: 1601px;
	margin: 0 auto;
	padding-top: 16px;
	padding-bottom: 16px;

	.main {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;

		.left {
			width: 520px;
			// height: 1119px;

			.left-top {
				width: 100%;
				height: auto;
				// padding-bottom: 20px;
				// border-radius: 10px;
				// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				// background-color: #fff;
				margin-bottom: 16px;

				.left-top-title {
					padding: 22px 20px 22px 27px;
					width: 100%;
					height: auto;
					border-bottom: 1px solid rgb(234, 236, 238);
					display: flex;
					flex-direction: column;
					// justify-content: space-between;
					gap: 12px;

					.info-row {
						display: flex;
						align-items: center;
						font-size: 16px;
						font-family: "Microsoft YaHei";
						line-height: 24px;

						.label {
							min-width: 92px;
							color: rgb(59, 65, 75);
							font-weight: 700;
							font-size: 16px;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							text-align: left;
						}

						.value {
							display: flex;
							align-items: center;
							color: rgb(59, 65, 75);
							font-weight: 400;
							font-size: 16px;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							overflow: hidden;

							&.link {
								color: rgb(5, 95, 194);
								cursor: pointer;
							}

							.icon {
								width: 20px;
								height: 20px;
								margin-right: 8px;
								object-fit: contain;

								&.avatar {
									border-radius: 50%;
									width: 24px;
									height: 24px;
								}
							}

							&.tags {
								gap: 8px;
								flex-wrap: wrap;
								overflow: visible;

								.tag {
									padding: 1px 8px;
									background: rgba(246, 250, 255, 1);
									border-radius: 4px;
									border: 1px solid rgba(231, 243, 255, 1);
									color: rgb(5, 95, 194);
									font-size: 14px;
									line-height: 20px;
								}
							}
						}
					}
				}

				.left-top-content {
					width: 100%;
					// height: 234px;
					padding: 19px 29px 22px 27px;
					overflow: auto;

					.content-title {
						font-size: 16px;
						font-weight: 700;
						color: rgb(59, 65, 75);
						font-family: "Microsoft YaHei";
						line-height: 24px;
						margin-bottom: 12px;
						text-align: left;
					}

					.distribution-list {
						display: flex;
						flex-direction: column;
						gap: 16px;
						overflow: auto;

						.list-item {
							display: flex;
							align-items: center;
							height: 24px;
							cursor: pointer;

							&:hover {
								background: var(--color-primary-2);
							}

							.flag {
								width: 24px;
								height: 24px;
								margin-right: 16px;
								border-radius: 50%;
								object-fit: cover;
							}

							.country-name {
								width: 96px;
								font-size: 16px;
								font-weight: 400;
								color: rgb(59, 65, 75);
								font-family: "Microsoft YaHei";
								line-height: 24px;
								margin-right: 12px;
								text-align: left;
							}

							.progress-bar-container {
								flex: 1;
								height: 8px;
								// background: #f0f2f5;
								// border-radius: 4px;
								// overflow: hidden;
								margin-right: 24px;
								display: flex;
								align-items: center;

								.progress-bar {
									height: 100%;
									border-radius: 4px;
								}
							}

							.count {
								// width: 40px;
								text-align: right;
								font-size: 16px;
								font-weight: 400;
								color: rgb(59, 65, 75);
								font-family: "Microsoft YaHei";
								line-height: 24px;

								&.highlight {
									color: rgb(206, 79, 81);
									font-weight: 700;
								}
							}
						}

						.news-item {
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-radius: 20px;
							width: 460px;
							background-color: rgb(246, 250, 255);
							padding: 5px 15px;
							font-size: 14px;
							height: 36px;
							cursor: pointer;

							.item-title {
								font-size: 14px;
								font-weight: 400;
								color: rgba(5, 95, 194, 1);
								font-family: Source Han Sans CN;
								line-height: 24px;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								max-width: 90%;
							}

							.flag {
								width: 16px;
								height: 16px;
								margin-right: 0px;
							}
						}
					}
				}
			}

			.left-bottom {
				width: 100%;
				height: 521px;

				.left-bottom-content {
					padding: 20px 25px 0 25px;
					height: calc(100% - 20px); // 减去标题高度
					display: flex;
					flex-direction: column;

					.timeline-list {
						display: flex;
						flex-direction: column;
						gap: 24px;
						margin-bottom: 5px;
						overflow-y: auto; // 允许垂直滚动
						flex: 1; // 占据剩余空间
						padding-right: 10px; // 防止滚动条遮挡内容

						/* Custom Scrollbar */
						&::-webkit-scrollbar {
							width: 6px;
						}

						&::-webkit-scrollbar-thumb {
							background: #ccc;
							border-radius: 3px;
						}

						&::-webkit-scrollbar-track {
							background: transparent;
						}
					}

					.timeline-item {
						display: flex;
						flex-direction: column;
						// margin-left: 12px;
						position: relative;

						&::before {
							content: "";
							position: absolute;
							left: 6px;
							top: 12px;
							height: calc(100% + 24px);
							width: 1px;
							background-color: rgb(234, 236, 238);
							transform: translateX(-50%);
						}

						&:last-child::before {
							display: none;
						}
					}

					.date-row {
						display: flex;
						align-items: center;
						margin-bottom: 3px;
					}

					.dot {
						width: 12px;
						height: 12px;
						border-radius: 50%;
						background-color: #fff;
						border: 3px solid rgb(5, 95, 194);
						box-sizing: border-box;
						margin-right: 13px;
						position: relative;
						z-index: 1;
					}

					.date {
						font-size: 16px;
						font-weight: 700;
						color: rgb(5, 95, 194);
						font-family: "Microsoft YaHei";
						line-height: 24px;
						// margin-bottom: 3px;
					}

					.content {
						font-size: 16px;
						font-weight: 400;
						color: rgb(59, 65, 75);
						line-height: 24px;
						margin-left: 25px;
						text-align: left;
						font-family: "Microsoft YaHei";
					}

					.view-more {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 14px;
						font-weight: 400;
						color: rgb(5, 95, 194);
						cursor: pointer;
						margin-top: 24px;
						font-family: "Microsoft YaHei";

						.icon-more {
							transform: rotate(90deg);
							margin-left: 8px;
						}
					}
				}
			}
		}

		.right {
			width: 1064px;
			// height: auto;
			// border-radius: 10px;
			// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			// background-color: #fff;

			.right-title {
				width: 100%;
				// height: 107px;
				padding: 4px 20px 20px 20px;
				box-sizing: border-box;

				.filter-row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20px;

					:deep(.el-input__inner) {
						font-size: 14px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(95, 101, 108);

						&::placeholder {
							color: rgb(95, 101, 108);
						}
					}

					:deep(.el-checkbox__label) {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(95, 101, 108);
					}

					.filter-right {
						display: flex;
						align-items: center;
					}
				}

				.stats-row {
					display: flex;
					// margin-bottom: 20px;
					justify-content: space-between;
					align-items: center;

					.tabs {
						display: flex;
						gap: 8px;

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

							&.active {
								color: rgb(5, 95, 194);
								border-color: rgb(5, 95, 194);
								font-weight: 700;
							}
						}
					}

					.stats-info {
						display: flex;
						gap: 24px;
						align-items: center;

						.stat-item {
							display: flex;
							align-items: center;
							font-size: 18px;
							color: rgb(59, 65, 75);
							font-family: "Microsoft YaHei";
							line-height: 24px;
							margin-right: 34px;

							.dot {
								width: 8px;
								height: 8px;
								border-radius: 50%;
								margin-right: 8px;

								&.red {
									background-color: rgb(206, 79, 81);
								}

								&.green {
									background-color: rgb(33, 129, 57);
								}
							}

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

								.num {
									font-weight: 700;

									&.red {
										color: rgb(206, 79, 81);
									}

									&.green {
										color: rgb(33, 129, 57);
									}
								}
							}
						}
					}
				}
			}

			.right-content {
				padding: 0 20px 17px 20px;

				.sanction-group-list {
					display: flex;
					flex-direction: column;
					gap: 16px;

					.sanction-group {
						border: 1px solid rgb(234, 236, 238);
						border-radius: 8px;
						overflow: hidden;

						.domain-box {
							display: flex;
							gap: 8px;
						}

						:deep(.el-table__header-wrapper) {
							th {
								// background-color: var(--color-primary-100) !important;
								height: 48px;
								padding: 0;
								color: rgb(34, 41, 52);
								font-weight: 700;
								font-size: 16px;
								font-family: "Microsoft YaHei";
								border-bottom: none;
							}

							th:first-child {
								border-top-left-radius: 8px;
							}

							th:last-child {
								border-top-right-radius: 8px;
							}
						}

						:deep(.el-table__body-wrapper) {
							tr:nth-child(odd) td {
								background-color: rgba(248, 249, 250, 1);
							}

							tr:nth-child(even) td {
								background-color: #fff;
							}

							td {
								height: 48px;
								padding: 0;
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								color: rgb(95, 101, 108);
								line-height: 24px;
							}
						}

						.name-cell {
							display: flex;
							align-items: center;

							.dot {
								width: 8px;
								height: 8px;
								border-radius: 50%;
								background-color: rgb(206, 79, 81);
								margin-right: 16px;
								flex-shrink: 0;
							}

							.company-icon {
								width: 24px;
								height: 24px;
								margin-right: 12px;
								border-radius: 50%;
								flex-shrink: 0;
							}

							.company-name {
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								font-family: "Source Han Sans CN";
								color: rgba(59, 65, 75, 1);
								cursor: pointer;
							}
						}

						.tag {
							padding: 1px 8px;
							border-radius: 4px;
							font-size: 14px;
							display: inline-block;
							border: 1px solid transparent;
						}

						.subsidiary-link {
							cursor: pointer;
							font-size: 14px;
							color: rgb(59, 65, 75);

							.blue-text {
								color: rgb(5, 95, 194);
							}
						}

						.reason-box {
							padding: 12px 19px 14px 39px;
							background-color: #fff;
							border-top: 1px solid rgb(234, 236, 238);
							font-size: 16px;
							color: rgb(59, 65, 75);
							line-height: 28px;
							font-family: "Microsoft YaHei";
							text-align: left;
						}
					}
				}
			}

			.reason-history {
				display: flex;
				flex-direction: column;
				gap: 16px;
				padding: 5px 24px;
				min-height: 500px;
				max-height: 1000px;
				margin-bottom: 15px;

				.reason-history-item {
					.item-header {
						border-top: 1px solid #ddd;
						border-bottom: 1px solid #ddd;
						padding: 15px;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.item-header-title {
							display: flex;
							align-items: center;
							width: 85%;

							.item-header-title-idx {
								width: 24px;
								height: 24px;
								border-radius: 50%;
								background-color: rgb(231, 243, 255);
								font-size: 12px;
								line-height: 24px;
								text-align: center;
							}

							.item-header-title-text {
								margin-left: 13px;
								font-size: 16px;
								font-weight: 700;
								line-height: 28px;
								font-family: "Source Han Sans CN";
								color: rgb(59, 65, 75);
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						.item-header-domain {
							// min-width: 100px;
						}
					}

					.item-content {
						padding: 10px 20px;
						border-radius: 4px;

						.item-content-record {
							position: relative;
							margin-top: 20px;
							// border-left: 3px solid rgb(5, 95, 194);
							background-color: rgb(247, 248, 249);
							padding: 10px 0;
							border-radius: 4px;

							&::before {
								content: "";
								position: absolute;
								left: 0;
								top: 10px;
								bottom: 10px;
								width: 4px;
								background-color: rgb(5, 95, 194);
							}

							.item-content-record-header {
								padding: 0px 15px;
								font-size: 16px;
								font-weight: 700;
								height: 30px;
								line-height: 30px;
								color: rgb(5, 95, 194);
								font-family: "Source Han Sans CN";
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.item-content-record-content {
								padding: 5px 15px;
								font-size: 16px;
								font-family: "Source Han Sans CN";
								color: rgb(59, 65, 75);
								line-height: 30px;
							}
						}
					}
				}
			}
		}
	}
}

.title-com {
	width: 100%;
	height: 56px;
	display: flex;
	align-items: center;
	padding: 14px 12px 16px 0;

	.box {
		width: 8px;
		height: 20px;
		background-color: rgb(5, 95, 194);
		border-bottom-right-radius: 4px;
		border-top-right-radius: 4px;
		margin-right: 14px;
	}

	.text {
		font-size: 20px;
		font-weight: 700;
		font-family: "Microsoft YaHei";
		line-height: 26px;
		color: rgb(5, 95, 194);
	}

	.btn {
		width: 60px;
		height: 28px;
		margin-left: auto;

		img {
			width: 28px;
			height: 28px;
			cursor: pointer;
		}

		img:first-child {
			margin-right: 4px;
		}
	}
}
</style>
