<template>
	<div class="introduction-page">
		<div class="left">
			<div class="left-top">
				<div class="title">
					<div class="box"></div>
					<div class="text">基本信息</div>
					<div class="btn">
						<img src="../../../../assets/下载按钮.png" alt="" />
						<img src="../../../../assets/收藏按钮.png" alt="" />
					</div>
				</div>
				<div class="left-top-main">
					<div class="left-top-main-title">
						{{ entityInfo.description }}
					</div>
					<div class="left-top-main-content">
						<div class="content-item">
							<span class="label">常见列入原因：</span>
							<span class="text">{{ entityInfo.commonReason }}</span>
						</div>
						<div class="content-item">
							<span class="label">核心限制措施：</span>
							<span class="text">{{ entityInfo.restrictiveMeasure }}</span>
						</div>
						<div class="content-item">
							<span class="label">负责机构：</span>
							<span class="text">{{ entityInfo.responsibleOrganization }}</span>
						</div>
						<div class="content-item">
							<span class="label">移除机制：</span>
							<span class="text">{{ entityInfo.removalMechanism }}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="left-bottom">
				<div class="title">
					<div class="box"></div>
					<div class="text">实体清单更新历史</div>
					<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>
					<div class="btn">
						<img src="../../../../assets/下载按钮.png" alt="" />
						<img src="../../../../assets/收藏按钮.png" alt="" />
					</div>
				</div>
				<div class="left-bottom-main">
					<div class="sanction-list" v-for="item in sanctionList" :key="item.id">
						<div class="time">
							<div class="year">{{ item.year }}</div>
							<div class="date">{{ item.date }}</div>
						</div>
						<img :src="item.icon || title" alt="" />
						<div class="main">
							<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>
			</div>
		</div>
		<div class="right">
			<div class="title">
				<div class="box"></div>
				<div class="text">发布机构</div>
				<div class="btn">
					<img src="../../../../assets/下载按钮.png" alt="" />
					<img src="../../../../assets/收藏按钮.png" alt="" />
				</div>
			</div>
			<div class="right-main">
				<div class="right-main-title">
					<img :src="publishInfo.imageUrl" alt="" />
					<div>
						<div class="title-text">{{ publishInfo.orgNameZh }} ></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">
								<div class="name">{{ item.name }}</div>
								<div class="title1">{{ item.position }}</div>
							</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>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch } 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 { getEntityInfo, getPublishInfo, getPublishOrgInfo, getEntityUpdateInfo } from "@/api/exportControlV2.0.js";

// 跳转到详情页
const handleClick = item => {
	const route = router.resolve({
		path: "/exportControl/singleSanction",
		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 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 keyPersonList = [
//     { name: '杰弗里·凯斯勒', title: '副秘书', avatar: defaultIcon },
//     { name: '保罗·达巴尔', title: '副部长', avatar: defaultIcon },
//     { name: '朱莉娅·赫尔森斯基', title: '战略贸易副助理部长', avatar: defaultIcon },
//     { name: '约翰·斯奎尔斯', title: '专利商标局局长', avatar: defaultIcon },
// ];

// const dynamicList = [
//     {
//         date: '2025-07-31',
//         content: '美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。'
//     },
//     {
//         date: '2025-07-30',
//         content: '美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。'
//     },
//     {
//         date: '2025-07-30',
//         content: '美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口'
//     }
// ];

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: "实体清单",
		pageNum: currentPageAll.value,
		pageSize: pageSizeAll.value
	};
	try {
		const res = await getEntityUpdateInfo(data);
		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 publishInfo = ref({});
const getPublishInfoFn = async () => {
	const params = {
		sanTypeId: 1 // 实体清单固定1
	};
	try {
		const res = await getPublishInfo(params);
		if (res && res.code === 200) {
			publishInfo.value = 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);
};

// 获取实体清单基本信息
const entityInfo = ref({});
const getEntityInfoFn = async () => {
	try {
		const res = await getEntityInfo();
		if (res && res.code === 200) {
			entityInfo.value = res.data;
		}
	} catch (error) {
		console.error("获取实体清单基本信息失败:", error);
	}
};

onMounted(() => {
	// 获取实体清单基本信息
	getEntityInfoFn();
	// 获取实体清单发布机构
	getPublishInfoFn();
	// 获取实体清单更新历史
	getSanctionUpdate();
});
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.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 {
				width: 100%;
				padding: 8px 26px 0 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-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 {
				padding: 16px 42px 0 25px;
				.sanction-list {
					width: 1169px;
					padding: 0px 0 12px 0;
					display: flex;
					// justify-content: flex-start;
					.time {
						width: 100px;
						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 {
						width: 30px;
						height: 30px;
						border-radius: 50%;
						margin-top: 14px;
						margin-right: 16px;
					}
					.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 {
			padding: 7px 24px 0px 23px;
			.right-main-title {
				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;
				img {
					width: 64px;
					height: 64px;
					margin-right: 14px;
				}
				.title-text {
					font-size: 20px;
					font-weight: 700;
					line-height: 26px;
					font-family: "Microsoft YaHei";
					color: rgb(59, 65, 75);
					margin-bottom: 6px;
				}
				.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 {
							.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: 8px;

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