<template>
	<div class="introduction-page">
		<div class="left">
			<div class="left-top">
				<AnalysisBox title="基本信息" :showAllBtn="false">
					<div class="left-top-main">
						<div class="left-top-main-title">{{ CCLInfo.description }}</div>
						<div class="left-top-main-content">
							<div class="content-item">
								<span class="label">法律依据：</span>
								<span class="text">{{ CCLInfo.legalBasis }}</span>
							</div>
							<div class="content-item">
								<span class="label">管制对象：</span>
								<span class="text">{{ CCLInfo.controlledObject }}</span>
							</div>
							<div class="content-item">
								<span class="label">核心限制措施：</span>
								<span class="text">{{ CCLInfo.restrictiveMeasure }}</span>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="left-center">
				<AnalysisBox title="出口管制分类编码（ECCN）" :showAllBtn="false">
					<div class="button-list">
						<div
							:class="['button', { click: item.isClick }]"
							@click="changeECCN(item)"
							v-for="(item, i) in ECCNList"
							:key="i"
						>
							<span>第{{ item.ranking }}位 {{ item.name }}</span>
						</div>
					</div>
					<div class="description">
						<li>{{ currentECCN.description }}</li>
					</div>
					<el-table :data="tableData" stripe class="table-class">
						<el-table-column prop="categoryCode" label="第一项" />
						<el-table-column prop="name" label="物项类别" width="460" />
						<el-table-column prop="nameZh" label="说明" width="460" />
					</el-table>
				</AnalysisBox>
			</div>
			<div class="left-bottom">
				<AnalysisBox title="商业管制清单更新历史" :showAllBtn="false">
					<template #header-btn>
						<div class="filters">
							<el-select
								v-model="selectedDomain"
								placeholder="Select"
								style="width: 150px; height: 32px; margin-right: 16px"
							>
								<el-option
									v-for="item in domainOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
							<!-- <el-checkbox v-model="onlyChina">只看涉华动态</el-checkbox> -->
						</div>
					</template>
					<div class="left-bottom-main">
						<div class="sanction-list" v-for="(item, i) in sanctionList" :key="item.id">
							<div class="time">
								<div class="year">{{ item.year }}</div>
								<div class="date">{{ item.date }}</div>
							</div>
							<div class="img-zone">
								<img :src="item.icon || title" alt />
								<div
									v-if="i < sanctionList.length - 1"
									:class="['img-line', { 'img-line-last': i === sanctionList.length - 1 }]"
								></div>
							</div>
							<div class="main">
								<div class="main-title">{{ item.name }}</div>
								<!-- <div class="main-title" @click="handleClick(item)">{{ item.name }}</div> -->
								<el-tooltip
									effect="dark"
									:content="item.summary"
									popper-class="common-prompt-popper"
									placement="top"
									:show-after="500"
								>
									<div class="main-desc">{{ item.summary }}</div>
								</el-tooltip>
								<div class="tag-box">
									<div v-for="tag in item.techDomainList" :key="tag" class="tag-item">{{ tag }}</div>
								</div>

								<div :class="{ 'count-tag': item.cnEntityCount }">
									{{ item.cnEntityCount ? `${item.cnEntityCount}家中国实体` : "" }}
								</div>
							</div>
						</div>
					</div>
					<div class="left-footer">
						<div class="total-count">共 {{ totalAll }} 项</div>
						<el-pagination
							v-model:current-page="currentPageAll"
							:page-size="pageSizeAll"
							:total="totalAll"
							layout="prev, pager, next"
							background
							@current-change="handlePageChangeAll"
						/>
					</div>
				</AnalysisBox>
			</div>
		</div>
		<div class="right">
			<AnalysisBox title="发布机构" :showAllBtn="false">
				<div class="right-main">
					<div class="right-main-title">
						<img :src="publishInfo.imageUrl" alt />
						<div class="title-zone">
							<div class="title-line">
								<div class="title-text">{{ publishInfo.orgNameZh }} ></div>
								<div class="title-detail" @click="handleClickOrg(publishInfo)">
									<span>查看官网</span>
									<img src="../../../../assets/dakai.png" alt />
								</div>
							</div>
							<div class="title-entext">{{ publishInfo.orgName }}</div>
						</div>
					</div>
					<!-- 关键人物 -->
					<div class="right-main-key-person">
						<div class="key-person-title">
							<img :src="icon01" alt />
							<span>关键人物</span>
						</div>
						<div class="key-person-list">
							<div
								class="person-item"
								v-for="(item, index) in publishInfo.personList"
								:key="index"
								@click="handlePerClick(item)"
							>
								<img :src="item.imageUrl" alt />

								<div class="person-info">
									<el-tooltip
										effect="dark"
										:content="item.name"
										popper-class="common-prompt-popper"
										placement="top"
										:show-after="500"
									>
										<div class="name">{{ item.name }}</div>
									</el-tooltip>
									<el-tooltip
										effect="dark"
										:content="item.position"
										popper-class="common-prompt-popper"
										placement="top"
										:show-after="500"
									>
										<div class="title1">{{ item.position }}</div>
									</el-tooltip>
								</div>
							</div>
						</div>
					</div>
					<!-- 机构动态 -->
					<div class="right-main-dynamic">
						<div class="dynamic-title">
							<img :src="icon02" alt />
							<span>机构动态</span>
						</div>
						<div class="dynamic-list">
							<div class="dynamic-item" v-for="(item, index) in publishOrgInfo" :key="item.newsId">
								<div class="dot-line">
									<div class="dot"></div>
									<div class="line" v-if="index !== publishOrgInfo.length - 1"></div>
								</div>
								<div class="content-box">
									<div class="date">{{ item.publishDate }}</div>
									<div class="text">{{ item.newsContent }}</div>
								</div>
							</div>
						</div>
						<div class="more-btn" v-if="publishOrgInfo.length < dynamicTotal" @click="handleLoadMoreDynamic">
							<span>查看更多</span>
							<el-icon>
								<ArrowDown />
							</el-icon>
						</div>
					</div>
				</div>
			</AnalysisBox>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch, onBeforeMount } from "vue";
import router from "@/router";
import title from "../../../../assets/title.png";
import defaultIcon from "../../../../../assets/icons/default-avatar.png";
import icon01 from "../../assets/icon01.png";
import icon02 from "../../assets/icon02.png";
import { ArrowDown } from "@element-plus/icons-vue";
import { ElTable, ElTableColumn, ElButton, ElSelect, ElOption, ElInput } from "element-plus";
import {
	getCCLInfo,
	getECCN,
	getECCNList,
	getPublishInfo,
	getPublishOrgInfo,
	getEntityUpdateInfo
} from "@/api/exportControlV2.0.js";
import { useRoute } from "vue-router";

const route = useRoute();
// 处理点击发布机构的方法
const handleClickOrg = item => {
	// console.log("点击了发布机构:", item);
	const route = router.resolve({
		path: "/institution",
		query: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};

// 处理点击关键人物的方法
const handlePerClick = item => {
	console.log("点击了关键人物:", item);
	const route = router.resolve({
		path: "/characterPage",
		query: {
			type: item.type,
			personId: item.id
		}
	});
	window.open(route.href, "_blank");
};

// 处理点击实体名称的方法
const handleClick = item => {
	// console.log("点击了实体名称:", item);
	const route = router.resolve({
		path: "/exportControl/singleSanction",
		query: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};

const selectedDomain = ref(0);
const onlyChina = ref(false);
const domainOptions = [
	{ label: "全部领域", value: 0 },
	{ 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 sanctionList = ref([]);
const currentPageAll = ref(1);
const pageSizeAll = ref(10);
const totalAll = ref(0);
// 获取商业管制清单更新历史
const getSanctionUpdate = async () => {
	// 传递的参数
	// {"isCn":false,"techDomainIds":[1],"typeName":"商业管制清单","pageNum":1,"pageSize":10}
	const data = {
		isCn: onlyChina.value,
		techDomainIds: selectedDomain.value ? [selectedDomain.value] : [],
		// typeName: "实体清单",
		// typeName: "商业管制清单",
		pageNum: currentPageAll.value,
		pageSize: pageSizeAll.value,
		sanTypeIds: [Number(sanTypeId.value)] || 13 // 商业管制清单固定13
	};
	try {
		const res = await getEntityUpdateInfo(data);
		console.log("-----getSanctionUpdate", res);
		if (res && res.code === 200) {
			console.log(res.data.content);
			sanctionList.value = (res.data.content || []).map(item => ({
				...item,
				year: item.postDate ? item.postDate.split("-")[0] : "",
				date: item.postDate ? `${item.postDate.split("-")[1]}月${item.postDate.split("-")[2]}日` : "",
				techDomainList: item.techDomainList || [],
				icon: ""
			}));
			totalAll.value = res.data.totalElements || 0;
		}
	} catch (error) {
		console.error("获取商业管制清单更新历史失败:", error);
	}
};

// 监听筛选条件变化
watch([selectedDomain, onlyChina], () => {
	currentPageAll.value = 1;
	getSanctionUpdate();
});

const handlePageChangeAll = val => {
	currentPageAll.value = val;
	getSanctionUpdate();
	const container = document.querySelector(".entity-list");
	const target = document.querySelector(".left-bottom");
	if (container && target) {
		const containerRect = container.getBoundingClientRect();
		const targetRect = target.getBoundingClientRect();
		// 148是吸顶头部的高度，减去它以避免标题被遮挡
		const top = targetRect.top - containerRect.top + container.scrollTop - 148;
		container.scrollTo({
			top: top,
			behavior: "smooth"
		});
	}
};

// 获取商业管制清单发布机构
const publishInfo = ref({});
const getPublishInfoFn = async () => {
	const params = {
		sanTypeId: sanTypeId.value || 13 // 商业管制清单固定13
	};
	try {
		const res = await getPublishInfo(params);
		if (res && res.code === 200) {
			publishInfo.value = res.data;
			console.log("------getPublishInfoFn", res.data);
			// 获取发布机构动态
			getPublishOrgInfoFn();
		}
	} catch (error) {
		console.error("获取商业管制清单发布机构失败:", error);
	}
};
// 获取发布机构动态
const publishOrgInfo = ref([]);
const dynamicPage = ref(1);
const dynamicPageSize = ref(3);
const dynamicTotal = ref(0);

const getPublishOrgInfoFn = async (isLoadMore = false) => {
	if (publishInfo.value && !publishInfo.value.id) return;

	const params = {
		orgId: publishInfo.value.id,
		pageNum: dynamicPage.value,
		pageSize: dynamicPageSize.value
	};
	try {
		const res = await getPublishOrgInfo(params);
		if (res && res.code === 200) {
			const newRows = (res.data.content || []).map(item => ({
				...item,
				publishDate: item.newsDate,
				title: item.newsTitle
			}));

			if (isLoadMore) {
				publishOrgInfo.value = [...publishOrgInfo.value, ...newRows];
			} else {
				publishOrgInfo.value = newRows;
			}
			dynamicTotal.value = res.data.totalElements || 0;
		}
	} catch (error) {
		console.error("获取发布机构动态失败:", error);
	}
};

const handleLoadMoreDynamic = () => {
	dynamicPage.value++;
	getPublishOrgInfoFn(true);
};

// 获取商业管制清单基本信息
// todo: 待对接后端接口
const CCLInfo = ref({
	description: "xxxxx",
	legalBasis: "法律依据",
	controlledObject: "管制对象",
	name: "",
	orgId: "",
	orgLogoUrl: "",
	orgName: "",
	originalName: "",
	shortName: "",
	restrictiveMeasure: "核心限制措施"
});
const getCCLInfoFn = async () => {
	try {
		const res = await getCCLInfo();
		if (res && res.code === 200) {
			CCLInfo.value = res.data;
			console.log("getCCLInfoFn", CCLInfo.value);
		}
	} catch (error) {
		console.error("获取商业管制清单基本信息失败:", error);
	}
};

// 定义ECCN列表
const ECCNList = ref([
	{
		name: "第1位: 物项类别",
		isClick: true,
		description:
			"ECCN的第一位是一个数字，它指明了受控物项所属的技术或行业类别，对于快速定位物项在《商业管制清单》中的位置至关重要",
		key: "wxlb" // 用于和后端对接的
	}
]);

const getCCL_ECCN_Type = async () => {
	try {
		const res = await getECCN();
		if (res && res.code === 200) {
			ECCNList.value = res.data;
			console.log("getCCL_ECCN_Type", ECCNList.value);
			// 为每个对象增加是否点击对象
			ECCNList.value.forEach(item => {
				item.isClick = false;
			});
			// 默认点击第一个
			ECCNList.value[0].isClick = true;
			// 默认将第一个赋值给currentECCN
			currentECCN.value = ECCNList.value[0];
		}
	} catch (error) {
		console.error("获取商业管制清单出口管制分类编码失败:", error);
	}
};

// 表格数据
const tableData = ref([
	{
		categoryCode: "0",
		categoryId: 1,
		code: null,
		description: null,
		descriptionZh: null,
		id: 1,
		name: "Nuclear Materials, Facilities and Equipment and Miscellaneous",
		nameZh: "核材料、设备设施及其他类似物项"
	}
]);
const currentECCN = ref({
	name: "第1位: 物项类别",
	isClick: true,
	description:
		"ECCN的第一位是一个数字，它指明了受控物项所属的技术或行业类别，对于快速定位物项在《商业管制清单》中的位置至关重要",
	id: 1,
	ranking: 1
});

/**
 * 修改ECCN
 */
function changeECCN(item) {
	ECCNList.value.forEach(i => (i.isClick = false));
	item.isClick = true;
	currentECCN.value = item;
}

// 监听当前的ECCN，更新获取列表数据
watch(
	() => currentECCN.value,
	async newValue => {
		// 调用接口更新table数据
		const params = {
			id: currentECCN.value.id
		};
		try {
			const res = await getECCNList(params);
			if (res && res.code === 200) {
				tableData.value = res.data;
				console.log("getECCNList", tableData.value);
			}
		} catch (error) {
			console.error("获取商业管制清单出口管制分类编码信息列表列表数据:", error);
		}
	},
	{ deep: true }
);
const sanTypeId = ref("");
onMounted(() => {
	// 获取路由参数sanTypeId
	sanTypeId.value = route.query.sanTypeId || "13";
	console.log("商业管制清单介绍页面接收到的 sanTypeId:", sanTypeId.value);
	// 获取商业管制清单基本信息
	getCCLInfoFn();
	// 获取商业管制清单的分类编码
	getCCL_ECCN_Type();
	// 获取商业管制清单发布机构
	getPublishInfoFn();
	// 获取商业管制清单更新历史
	getSanctionUpdate();
});
</script>

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

.introduction-page {
	width: 1601px;
	margin: 0 auto;
	padding-top: 16px;
	padding-bottom: 50px;
	display: flex;
	justify-content: space-between;

	.left {
		width: 1064px;

		.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-main {
				margin-top: 11px;
				width: 100%;
				padding: 8px 26px 20px 26px;

				.left-top-main-title {
					padding: 16px 24px;
					border-radius: 4px;
					border: 1px solid rgba(231, 243, 255, 1);
					background: linear-gradient(to bottom right, rgba(231, 243, 255, 1), rgba(231, 243, 255, 0));
					font-size: 16px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 30px;
					color: rgb(5, 95, 194);
					margin-bottom: 17px;
				}

				.left-top-main-content {
					.content-item {
						margin-bottom: 13px;
						font-size: 16px;
						font-family: "Microsoft YaHei";
						display: flex;

						.label {
							width: 120px;
							flex-shrink: 0;
							font-weight: 700;
							color: rgb(59, 65, 75);
							white-space: nowrap;
						}

						.text {
							color: rgb(59, 65, 75);
							text-align: justify;
						}
					}
				}
			}
		}

		.left-center {
			width: 100%;
			// height: 705px;
			height: auto;
			// border-radius: 10px;
			// background-color: #fff;
			margin-bottom: 16px;

			.button-list {
				margin-top: 11px;
				width: 1012px;
				height: 32px;
				margin-left: 26px;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.button {
					width: 196px;
					height: 32px;
					border-radius: 4px;
					border: 1px solid rgba($color: #eeeeee, $alpha: 0.8);
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgb(59, 65, 75);

					span {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						letter-spacing: 0px;
						font-style: Regular;
					}
				}

				.click {
					background: rgba(231, 243, 255, 1);
					border: 1px solid rgba(231, 243, 255, 1);
					color: rgb(5, 95, 194);
				}
			}

			.description {
				width: 991px;
				height: auto;
				min-height: 30px;
				margin-top: 16px;
				margin-left: 63px;
			}

			.table-class {
				width: 1013px;
				height: auto;
				padding-bottom: 10px;
				margin-top: 16px;
				margin-left: 24px;
				color: rgb(59, 65, 75);
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				letter-spacing: 0px;
				font-style: Regular;
			}
		}

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

			.title {
				border-bottom: 1px solid rgb(234, 236, 238);

				.filters {
					margin-left: auto;
					display: flex;
					align-items: center;
					margin-right: 20px;
				}

				.btn {
					margin-left: 0;
				}
			}

			.left-bottom-main {
				margin-top: 11px;
				border-top: 1px solid rgb(234, 236, 238);
				padding: 16px 42px 20px 25px;

				.sanction-list {
					width: 1169px;
					// padding: 0px 0 12px 0;
					display: flex;

					// justify-content: flex-start;
					// height: 154px;
					.time {
						width: 80px;
						height: 50px;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						justify-content: center;
						margin-right: 16px;
						font-family: "Microsoft YaHei";
						color: rgb(5, 95, 194);
						font-weight: 700;

						.year {
							font-size: 16px;
							line-height: 24px;
						}

						.date {
							font-size: 16px;
							line-height: 24px;
						}
					}

					.img-zone {
						display: flex;
						flex-direction: column;
						align-items: center;
						// justify-content: center;
						// width: 30px;
						margin-top: 14px;
						// margin-right: 16px;
						// height: calc(100% - 16px);
						margin-right: 16px;

						img {
							width: 30px;
							height: 30px;
							border-radius: 50%;
							z-index: 2;
						}

						.img-line {
							width: 1px;
							border: 1px solid rgba($color: #eeeeee, $alpha: 1);
							// height: calc(100% - 30px);
							position: absolute;
							height: 154px;
						}

						.img-line-last {
							height: 140px;
						}
					}

					.main {
						width: 855px;
						padding-top: 14px;
						position: relative;

						.main-title {
							cursor: pointer;
							width: 700px;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
							font-family: "Microsoft YaHei";
							color: rgb(59, 65, 75);
							margin-bottom: 11px;
						}

						.main-desc {
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
							font-family: "Microsoft YaHei";
							color: rgb(95, 101, 108);
							margin-bottom: 9px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.tag-box {
							display: flex;

							.tag-item {
								padding: 1px 8px;
								margin-right: 8px;
								border-radius: 4px;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
								font-family: "Microsoft YaHei";
								color: rgb(5, 95, 194);
								background-color: rgba(231, 243, 255, 1);
							}
						}

						.count-tag {
							position: absolute;
							padding: 2px 8px;
							top: 0;
							right: 0;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							font-family: "Microsoft YaHei";
							color: rgb(206, 79, 81);
							border-radius: 20px;
							background-color: rgba(206, 79, 81, 0.1);
						}
					}
				}
			}

			.left-footer {
				width: 100%;
				height: 73px;
				border-top: 1px solid rgb(234, 236, 238);
				padding: 0 31px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.total-count {
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					font-family: "Microsoft YaHei";
					color: rgb(59, 65, 75);
				}
			}
		}
	}

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

		.right-main {
			margin-top: 11px;
			padding: 7px 24px 0px 23px;

			.right-main-title {
				cursor: pointer;
				width: 473px;
				height: auto;
				border-radius: 4px;
				background-color: rgb(247, 248, 249);
				border: 1px solid rgb(234, 236, 238);
				display: flex;
				margin-bottom: 20px;
				padding: 16px;

				.title-zone {
					width: calc(100% - 64px);
				}

				img {
					width: 64px;
					height: 64px;
					margin-right: 14px;
				}

				.title-line {
					display: flex;
					height: 26px;
					margin-bottom: 6px;
					justify-content: space-between;
					align-items: center;
				}

				.title-detail {
					display: flex;
					align-items: center;
					justify-content: center;

					span {
						font-family: Microsoft YaHei;
						color: rgba(5, 95, 194, 1);
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: center;
						margin-top: 1px;
					}

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

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

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

			.right-main-key-person {
				width: 100%;
				padding-bottom: 20px;
				border-bottom: 1px solid rgb(234, 236, 238);
				margin-bottom: 18px;

				.key-person-title {
					display: flex;
					align-items: center;
					margin-bottom: 19px;

					img {
						width: 14px;
						height: 14px;
						margin-right: 12px;
					}

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

				.key-person-list {
					display: flex;
					flex-wrap: wrap;

					.person-item {
						width: 185px;
						cursor: pointer;
						display: flex;
						align-items: center;
						margin-bottom: 16px;

						&:nth-child(2n-1) {
							margin-left: 28px;
							margin-right: 39px;
						}

						img {
							width: 48px;
							height: 48px;
							border-radius: 50%;
							margin-right: 8px;
							object-fit: cover;
							flex-shrink: 0;
						}

						.person-info {
							width: calc(100% - 48px - 8px);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

							/* 防止文本换行 */
							.name {
								font-size: 16px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								color: rgb(59, 65, 75);
								margin-bottom: 1px;
								white-space: nowrap;
							}

							.title1 {
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								color: rgb(95, 101, 108);
								line-height: 1.2;
								// white-space: nowrap;
							}
						}
					}
				}
			}

			.right-main-dynamic {
				width: 100%;

				.dynamic-title {
					display: flex;
					align-items: center;
					margin-bottom: 19px;

					img {
						width: 14px;
						height: 14px;
						margin-right: 12px;
					}

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

				.dynamic-list {
					max-height: 500px;
					overflow-y: auto;
					padding-right: 10px;

					/* 滚动条样式 */
					&::-webkit-scrollbar {
						width: 6px;
					}

					&::-webkit-scrollbar-track {
						background: #f1f1f1;
						border-radius: 3px;
					}

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

						&:hover {
							background: #a8a8a8;
						}
					}

					.dynamic-item {
						display: flex;
						position: relative;
						padding-bottom: 24px;

						.dot-line {
							width: 12px;
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-right: 12px;
							margin-top: 6px;

							.dot {
								width: 8px;
								height: 8px;
								border-radius: 50%;
								border: 2px solid rgb(5, 95, 194);
								background-color: #fff;
								z-index: 1;
							}

							.line {
								width: 1px;
								height: calc(100% - 2px);
								background-color: rgb(234, 236, 238);
								position: absolute;
								top: 12px;
								left: 5px;
							}
						}

						.content-box {
							flex: 1;

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

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

				.more-btn {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 14px;
					color: rgb(5, 95, 194);
					cursor: pointer;
					margin-top: 16px;

					span {
						margin-right: 4px;
					}
				}
			}
		}
	}
}

.title {
	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>
<style scoped>
.common-prompt-popper.el-popper {
	padding: 8px 16px !important;
	border-radius: 10px !important;
	background-color: rgb(59, 65, 75) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-family: "Microsoft YaHei" !important;
	line-height: 30px !important;
	color: #fff !important;
	border: none !important;
	max-width: 500px !important;
}

.common-prompt-popper.el-popper .el-popper__arrow::before {
	background-color: rgb(59, 65, 75) !important;
	border-color: rgb(59, 65, 75) !important;
}

:deep(.el-table thead) {
	color: rgb(59, 65, 75);
}

:deep(.el-table tr) {
	height: 48px;
}

.filters {
	margin-left: auto;
	display: flex;
	align-items: center;
	margin-right: 20px;
}
</style>
