<template>
	<div class="entity-list">
		<div class="header">
			<div class="header-title">
				<img :src="headerTitle.img" alt="" />
				<div>
					<div class="title">
						{{ headerTitle.title }}
						<!-- <span>{{ headerTitle.titleEn }}</span> -->
					</div>
					<div class="department">
						{{ headerTitle.department }}
					</div>
				</div>
				<div class="btn" @click="openSanctionModal"><img :src="icon01" alt="" />切换</div>
			</div>
			<div class="header-nav">
				<div
					class="nav-item"
					v-for="(item, index) in headerNavList"
					:key="index"
					:class="{ active: activeIndex === index }"
					@click="activeIndex = index"
				>
					<img :src="activeIndex === index ? item.imgActive : item.img" alt="" />
					<span>{{ item.title }}</span>
					<div class="active-line" v-if="activeIndex === index"></div>
				</div>
				<div class="original-text-btn" @click="handleClickOriginalText">
					<img :src="icon1" alt="" />
					<span>实体清单原文</span>
				</div>
				<div class="btn3" @click="handleAnalysisClick">
					<div class="icon">
						<img src="./assets/btn-icon3.png" alt="" />
					</div>
					<div class="text">{{ "分析报告" }}</div>
				</div>
			</div>
		</div>
		<div class="main">
			<sanctions-overview v-if="activeIndex === 0" :data="singleSanctionOverview"></sanctions-overview>
			<data-statistics v-if="activeIndex === 1"></data-statistics>
			<deep-mining v-if="activeIndex === 2"></deep-mining>
			<impact-analysis v-if="activeIndex === 3"></impact-analysis>
		</div>

		<el-dialog
			v-model="sanctionModalVisible"
			title="制裁事件列表"
			width="600px"
			:close-on-click-modal="false"
			@close="resetModal"
		>
			<div class="sanction-list">
				<div
					v-for="item in sanctionList"
					:key="item.id"
					class="sanction-item"
					:class="{ active: selectedSanctionId === item.id }"
					@click="selectSanction(item)"
				>
					{{ item.name }}
				</div>
			</div>

			<template #footer>
				<div class="pagination-footer">
					<el-pagination
						v-model:current-page="currentPage"
						v-model:page-size="pageSize"
						:total="totalElements"
						:page-sizes="[10]"
						layout="total, prev, pager, next"
						background
						@current-change="handlePageChange"
					/>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElDialog, ElPagination } from "element-plus";
import sanctionsOverview from "./components/sanctionsOverview/index.vue";
import dataStatistics from "./components/dataStatistics/index.vue";
import deepMining from "./components/deepMining/index.vue";
import impactAnalysis from "./components/impactAnalysis/index.vue";

import title from "./assets/title.png";
import icon01 from "./assets/icon01.png";
import icon1 from "../assets/icons/icon1.png";
import icon1Active from "../assets/icons/icon1_active.png";
import icon5 from "../assets/icons/icon5.png";
import icon5Active from "../assets/icons/icon5_active.png";
import icon2 from "../assets/icons/icon2.png";
import icon2Active from "../assets/icons/icon2_active.png";
import icon3 from "../assets/icons/icon3.png";
import icon3Active from "../assets/icons/icon3_active.png";

import { getSingleSanctionOverview } from "@/api/exportControlV2.0.js";
import { getSanctionProcess } from "@/api/exportControl";
import router from "@/router";

// 处理点击实体清单原文按钮
const handleClickOriginalText = () => {
	// 打开新标签页
	window.open(`/exportControl/origin?id=${sanRecordId.value}`, "_blank");
};

// 获取URL参数
const sanRecordId = ref("");
const getUrlParams = () => {
	const urlParams = new URLSearchParams(window.location.search);
	sanRecordId.value = urlParams.get("id") || "";
};

// console.log(sanRecordId.value)
// 单次制裁-制裁概况-基本信息
const singleSanctionOverview = ref({});
const getSingleSanctionOverviewData = async () => {
	if (!sanRecordId.value) return;
	try {
		const res = await getSingleSanctionOverview({
			sanRecordId: sanRecordId.value
		});
		if (res.code === 200) {
			singleSanctionOverview.value = res.data || {};

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

			// 更新头部信息
			headerTitle.value = {
				...headerTitle.value,
				title: `${dateStr}《${singleSanctionOverview.value.sanTitleZh || singleSanctionOverview.value.sanTitle}》`,
				titleEn: singleSanctionOverview.value.sanTitle || "",
				department: singleSanctionOverview.value.fileCode || ""
			};
		}
	} catch (error) {
		console.error("获取制裁概况失败:", error);
	}
};

const headerTitle = ref({
	img: title
});

const activeIndex = ref(0);

const headerNavList = ref([
	{
		img: icon1,
		imgActive: icon1Active,
		title: "制裁概况"
	},
	{
		img: icon5,
		imgActive: icon5Active,
		title: "数据统计"
	},
	{
		img: icon2,
		imgActive: icon2Active,
		title: "深度挖掘"
	},
	{
		img: icon3,
		imgActive: icon3Active,
		title: "影响分析"
	}
]);

const handleAnalysisClick = () => {
	router.push({
		path: "/writtingAsstaint",
		query: {
			topic: "清单",
			fileId: singleSanctionOverview.value.postDate
		}
	});
};

// ========== 新增响应式状态 ==========
const sanctionModalVisible = ref(false);
const sanctionList = ref([]);
const selectedSanctionId = ref(null);
const currentPage = ref(1);
const pageSize = ref(10);
const totalElements = ref(0);

// ========== 打开弹窗并加载第一页 ==========
const openSanctionModal = async () => {
	sanctionModalVisible.value = true;
	console.log("制裁事件列表11:", sanctionList.value);
	await fetchSanctionData();
};

// ========== 获取制裁数据 ==========
const fetchSanctionData = async () => {
	try {
		const res = await getSanctionProcess([1], currentPage.value, 10);
		if (res && !!res.content) {
			sanctionList.value = res.content || [];
			totalElements.value = res.totalElements || 0;
			// 如果当前选中的不在新数据中，清空选中
			if (selectedSanctionId.value && !sanctionList.value.some(item => item.id === selectedSanctionId.value)) {
				selectedSanctionId.value = null;
			}
			console.log("制裁事件列表:", sanctionList.value);
		} else {
			sanctionList.value = [];
			totalElements.value = 0;
		}
	} catch (error) {
		console.error("获取制裁事件失败:", error);
		sanctionList.value = [];
		totalElements.value = 0;
	}
};

// ========== 翻页处理 ==========
const handlePageChange = async newPage => {
	currentPage.value = newPage;
	await fetchSanctionData();
};

// ========== 选择某项 ==========
const selectSanction = item => {
	selectedSanctionId.value = item.id;
	// 可在此处触发其他逻辑，如查看详情
	// 替换当前路由参数，并重新加载数据
	router.replace({
		path: window.location.pathname,
		query: {
			id: item.id,
			sanTypeId: item.sanTypeId
		}
	});
	// 3. 立即重新加载数据（关键！）
	getSingleSanctionOverviewData();

	// 4. 可选：关闭弹窗
	sanctionModalVisible.value = false;
};

// ========== 关闭弹窗时重置 ==========
const resetModal = () => {
	sanctionList.value = [];
	selectedSanctionId.value = null;
	currentPage.value = 1;
	totalElements.value = 0;
};

onMounted(() => {
	getUrlParams();
	getSingleSanctionOverviewData();
});
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.entity-list {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	.header {
		width: 100%;
		height: 148px;
		background-color: #fff;
		padding-top: 16px;
		position: sticky;
		top: 0;
		z-index: 1000;
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
		.header-title {
			width: 1601px;
			height: 72px;
			background-color: rgba(246, 250, 255, 1);
			margin: 0 auto;
			border-radius: 10px;
			border: 2px solid rgba(174, 214, 255, 1);
			display: flex;
			align-items: center;
			margin-bottom: 12px;
			position: relative;
			img {
				width: 54px;
				height: 54px;
				margin-left: 15px;
				margin-right: 11px;
			}
			.title {
				font-size: 20px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 26px;
				color: rgb(59, 65, 75);
				span {
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(95, 101, 108);
					margin-left: 11px;
				}
			}
			.department {
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(95, 101, 108);
			}
			.btn {
				cursor: pointer;
				display: flex;
				align-items: center;
				position: absolute;
				right: 16px;
				top: 25px;
				font-size: 18px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(5, 95, 194);
				img {
					width: 20px;
					height: 20px;
					margin-right: 7px;
				}
			}
		}
		.header-nav {
			width: 1601px;
			margin: 0 auto;
			height: 48px;
			display: flex;
			align-items: center;

			.nav-item {
				display: flex;
				align-items: center;
				height: 100%;
				margin-right: 32px;
				cursor: pointer;
				position: relative;
				font-size: 18px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				color: rgb(59, 65, 75);

				&:last-child {
					margin-right: 0;
				}

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

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

				.active-line {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 3px;
					background-color: #055fc2;
					border-radius: 1.5px;
				}
			}

			.original-text-btn {
				margin-left: auto;
				width: 152px;
				height: 36px;
				background: #ffffff;
				border-radius: 4px;
				border: 1px solid rgba(230, 231, 232, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

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

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

			.btn3 {
				cursor: pointer;
				width: 120px;
				height: 36px;
				border-radius: 6px;
				background: rgba(5, 95, 194, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 8px;
				margin-left: 8px;
				.icon {
					width: 16px;
					height: 16px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.text {
					height: 24px;
					color: rgba(255, 255, 255, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: left;
				}
			}
		}
	}
	.main {
		width: 100%;
		height: auto;
		min-height: calc(100% - 148px);
		background-color: #f7f8f9;
	}
}

.sanction-list {
	max-height: 400px;
	overflow-y: auto;
	padding: 0 10px;
}

.sanction-item {
	padding: 7px;
	margin: 6px 0;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	color: #333;
	transition: background-color 0.2s;
}

.sanction-item:hover {
	background-color: #f5f7fa;
}

.sanction-item.active {
	background-color: #e6f0ff;
	color: #1890ff;
	font-weight: bold;
}

.pagination-footer {
	display: flex;
	justify-content: center;
	margin-top: 12px;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
	background-color: #0e78f1;
}
</style>
