<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="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.effectiveDate }}</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">{{ formattedData.administrativeOrderId }}</div>
							</div>
							<div class="info-row">
								<div class="label">发布人：</div>
								<div class="value link">
									<img :src="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" v-for="(item, index) in entityDistribution" :key="index">
									<img :src="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: index === 0 }">{{ 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">
					<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">
							<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>
										</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="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>
		</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 { DArrowRight, Search } from "@element-plus/icons-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 {
	getSingleSanctionEntityCountry,
	getSingleSanctionBackground,
	getSingleSanctionOverviewList
} from "@/api/exportControlV2.0";
import RuleSubsidiaryDialog from "../../../v2.0EntityList/components/sanctionsOverview/components/listPage/RuleSubsidiaryDialog.vue";
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");
	router.push({
		path: "/institution",
		query: {
			id: props.data.postOrgId
		}
	})
};

// 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 = data.sanList || [];
			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(3);
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 res = await getSingleSanctionEntityCountry({
			sanRecordId: sanRecordId.value,
			sanTypeId: sanTypeId.value || 1 // 实体清单固定1
		});
		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 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");
	router.push({
		path: "/characterPage",
		query: {
			// type: props.data.type,
			personId: props.data.postPersonId
		}
	})

};

// 计算属性处理数据
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
	};
});

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 sanTypeId = ref("");
onMounted(() => {
	// 获取路由参数中的sanTypeId
	sanTypeId.value = route.query.sanTypeId || "1";
	// 获取URL参数
	getUrlParams();
	// 单次制裁-制裁概况-制裁实体国家分布
	getEntityCountry();
	// 单次制裁-制裁概况-制裁背景
	getSanctionBackground();
	// 单次制裁-制裁概况-制裁清单
	getSanctionOverviewList();
});
</script>

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

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

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

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

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

					.timeline-list {
						display: flex;
						flex-direction: column;
						gap: 24px;
						margin-bottom: 24px;
						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: 16px;
						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;

						:deep(.el-table__header-wrapper) {
							th {
								background-color: var(--color-primary-100) !important;
								height: 48px;
								padding: 0;
								color: #fff;
								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: "Microsoft YaHei";
								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;
						}
					}
				}
			}
		}
	}
}

.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>
