<template>
	<BillPageShell class="background-page">
		<BillTwoColumn class="background-content" :stack-on-narrow="false">
			<template #left>
				<div class="background-wrap-left">
					<AnalysisBox class="left-box left-box--background" title="立法背景" :showAllBtn="false" :devTip="true">
						<template #header-btn>
							<div class="header-btn-box">
								<el-button :type="box1Btn1Type" plain @click="handleClickBox1Btn(1)">涉华背景</el-button>
								<el-button :type="box1Btn2Type" plain @click="handleClickBox1Btn(2)">全部背景</el-button>
							</div>
						</template>
						<div class="box1-main" v-loading="backgroundLoading">
							<div class="box1-main-center">
								<div class="box1-main-item" v-for="item in backgroundDisplayList" :key="item.id">
									<div class="id">{{ item.displayIndex }}</div>
									<div class="title">{{ item.backgroundTitle }}</div>
									<div class="share">
										<img src="./assets/icons/open.png" alt="打开" />
									</div>
								</div>
							</div>
							<div class="box1-main-footer">
								<div class="info">
									{{ totalText }}
								</div>
								<el-pagination
									background
									layout="prev, pager, next"
									:total="total"
									v-model:current-page="currentPage"
									@current-change="handleGetBillBackground"
								/>
							</div>
						</div>
					</AnalysisBox>

					<AnalysisBox class="left-box left-box--event" title="相关事件" :showAllBtn="false" :devTip="true">
						<div class="box2-main">
							<div class="box2-main-item" v-for="item in eventDisplayList" :key="item.id" @click="handleClickEvent(item)">
								<div class="left">
									<img :src="item.imgSrc" @error="handleNewsImgError" alt="" />
								</div>
								<div class="center">
									<div class="title">{{ item.sjbt }}</div>
									<div class="content">{{ item.sjnr }}</div>
								</div>
								<div class="right">{{ item.sjsj }}</div>
							</div>
						</div>
					</AnalysisBox>
				</div>
			</template>

			<template #right>
				<AnalysisBox class="right-panel" title="议员相关性分析" :showAllBtn="false" :devTip="true">
					<template #header-btn>
						<div class="header-btn-box">
							<el-button :type="box2Btn1Type" plain @click="handleClickBox2Btn(1)">赞成议员</el-button>
							<el-button :type="box2Btn2Type" plain @click="handleClickBox2Btn(2)">反对议员</el-button>
						</div>
					</template>
					<div class="background-wrap-right-main">
						<div class="right-box1">
							<div class="right-box1-main-top">
								<el-icon class="nav-icon" size="20" :color="prevIconColor" @click="handlePrev">
									<CaretLeft />
								</el-icon>
								<div class="user-list-container">
									<div class="user-list-wrapper" :style="userListWrapperStyle">
										<div class="user-box" v-for="item in personList" :key="item.id" @click="handleClickUser(item)">
											<div class="img-box">
												<img :src="item.image" alt="" />
												<div class="icon1">
													<img :src="item.icon" alt="" />
												</div>
												<div class="icon2">
													<img :src="item.icon1" alt="" />
												</div>
											</div>
											<CommonPrompt :content="item.name">
												<div class="name">{{ item.name }}</div>
											</CommonPrompt>
										</div>
									</div>
								</div>
								<el-icon class="nav-icon" size="20" :color="nextIconColor" @click="handleNext">
									<CaretRight />
								</el-icon>
							</div>
							<div class="right-box1-main-bottom">
								<WordCloudMap :data="wordCloudData" :selectedName="selectedIndustryName" shape="circle" @wordClick="handleWordClick" />
							</div>
						</div>
						<div class="right-box2">
							<div class="right-box2-header">
								<div class="title">
									<span class="title-active">"{{ selectedIndustryName }}"</span>涉及议员动态 >
								</div>
							</div>
							<div class="right-box2-center">
								<div class="user-box" v-for="item in aboutUserList" :key="item.id" @click="handleClickUser(item)">
									<div class="user-left">
										<div class="img-box">
											<img :src="item.img" alt="" />
										</div>
									</div>
									<div class="user-right">
										<div class="name">{{ item.name }}</div>
										<CommonPrompt :content="item.content">
											<div class="content">{{ item.content }}</div>
										</CommonPrompt>
									</div>
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</template>
		</BillTwoColumn>
	</BillPageShell>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import WordCloudMap from "./WordCloudMap.vue";
import CommonPrompt from "../commonPrompt/index.vue";
import { BillPageShell, BillTwoColumn } from "../components/layout";
import userIcon from "./assets/icons/user-icon.png";
import userIcon1 from "./assets/icons/user-icon1.png";
import userIcon2 from "./assets/icons/user-icon2.png";
import defaultNew from "../assets/images/default-icon-news.png";
import defaultA from "../assets/images/default-icon1.png";

import { getBillBackground, getBillPersonAnalyze, getBillInfoEvent, getBillPersonAnalyzeDy } from "@/api/bill";
import { useGotoNewsDetail } from "@/router/modules/news";

const route = useRoute();
const router = useRouter();
const gotoNewsDetail = useGotoNewsDetail();

const handleNewsImgError = e => {
	e.target.src = defaultNew;
};

// 跳转到相关新闻
const handleClickEvent = item => {
	const newsId = item?.id || item?.newsId;
	if (!newsId) return;
	gotoNewsDetail(newsId);
};



// 跳转人员详情
const handleClickUser = item => {
	window.sessionStorage.setItem('curTabName', item.name)
	const routeData = router.resolve({
		path: "/characterPage",
		query: {
			personId: item.id
		}
	});
	window.open(routeData.href, "_blank");
};

const box1BtnActive = ref(1);
const currentPage = ref(1);
const total = ref(0);

const handleClickBox1Btn = index => {
	box1BtnActive.value = index;
	currentPage.value = 1;
	handleGetBillBackground();
};

const box2BtnActive = ref(1);
const currentIndex = ref(0);

const handlePrev = () => {
	if (currentIndex.value > 0) {
		currentIndex.value--;
	}
};

const handleNext = () => {
	if (currentIndex.value < personList.value.length - 4) {
		currentIndex.value++;
	}
};

const handleClickBox2Btn = index => {
	box2BtnActive.value = index;
	currentIndex.value = 0; // 切换赞成/反对时重置索引
	// 切换赞成/反对时，重置选中的词云项
	selectedIndustryStatus.value = "";
	selectedIndustryName.value = "";
	if (index === 1) {
		handleGetBillPersonAnalyze(false);
	} else {
		handleGetBillPersonAnalyze(true);
	}
};

const aboutUserList = ref([]);

const backgroundList = ref([]);
const backgroundLoading = ref(false);
let backgroundAbortController = null;

const eventList = ref([]);

const personList = ref([]);

const selectedIndustryStatus = ref("");
const selectedIndustryName = ref("");

const handleWordClick = word => {
	selectedIndustryStatus.value = word.status;
	selectedIndustryName.value = word.name;
	handleGetBillPersonAnalyzeDy();
};

const wordCloudData = ref([]);

const totalText = computed(() => `共 ${total.value} 项`);

const backgroundDisplayList = computed(() =>
	backgroundList.value.map((item, index) => ({
		...item,
		displayIndex: (currentPage.value - 1) * 10 + index + 1
	}))
);

const eventDisplayList = computed(() =>
	eventList.value.map(item => ({
		...item,
		imgSrc: item.imageUrl || defaultNew
	}))
);

const userListWrapperStyle = computed(() => ({
	transform: `translateX(-${currentIndex.value * 110}px)`
}));

const box1Btn1Type = computed(() => (box1BtnActive.value === 1 ? "primary" : "info"));
const box1Btn2Type = computed(() => (box1BtnActive.value === 2 ? "primary" : "info"));
const box2Btn1Type = computed(() => (box2BtnActive.value === 1 ? "primary" : "info"));
const box2Btn2Type = computed(() => (box2BtnActive.value === 2 ? "primary" : "info"));

const prevIconColor = computed(() => (currentIndex.value > 0 ? "#5f656c" : "#ccc"));
const nextIconColor = computed(() => (currentIndex.value < personList.value.length - 4 ? "#5f656c" : "#ccc"));

// 获取立法背景内容
const handleGetBillBackground = async () => {
	if (backgroundAbortController) {
		backgroundAbortController.abort();
	}
	const controller = new AbortController();
	backgroundAbortController = controller;

	const cRelated = box1BtnActive.value === 1 ? "Y" : "N";
	const params = {
		cRelated: cRelated,
		id: route.query.billId,
		currentPage: currentPage.value - 1,
		pageSize: 10
	};
	backgroundLoading.value = true;
	try {
		const res = await getBillBackground(params, { signal: controller.signal });
		backgroundList.value = res.data.content;
		total.value = res.data.totalElements; // 假设API返回totalElements
	} catch (error) {
		if (error?.name !== "AbortError" && error?.code !== "ERR_CANCELED") {
			console.error(error);
		}
	} finally {
		if (backgroundAbortController === controller) {
			backgroundLoading.value = false;
			backgroundAbortController = null;
		}
	}
};

// 获取相关事件
const handleGetRelatedEvent = async () => {
	const params = {
		id: route.query.billId
	};
	try {
		const res = await getBillInfoEvent(params);
		eventList.value = res.data.slice(0, 5);
	} catch (error) { }
};

// 议员相关性分析
const handleGetBillPersonAnalyze = async isOppose => {
	const params = {
		id: route.query.billId,
		isOppose: isOppose
	};
	try {
		const res = await getBillPersonAnalyze(params);
		const { members, industryCounts } = res.data;
		// 更新人员列表
		personList.value = members || [];
		personList.value.forEach(item => {
			// 优先使用接口返回的图片，没有则使用默认头像 defaultA
			item.image = item.imageUrl || defaultA;
			item.icon = userIcon;
			// 根据党派动态设置图标 (民主党使用 userIcon1, 共和党使用 userIcon2)
			item.icon1 = item.party === "共和党" ? userIcon2 : userIcon1;
		});

		// 更新词云图数据
		if (industryCounts && industryCounts.length > 0) {
			wordCloudData.value = industryCounts.map(item => ({
				name: item.industryName,
				value: item.count,
				status: item.status // 真正选中的为status
			}));

			// 如果当前没有选中项，则默认选中第一个
			if (!selectedIndustryStatus.value) {
				selectedIndustryStatus.value = industryCounts[0].status;
				selectedIndustryName.value = industryCounts[0].industryName;
				handleGetBillPersonAnalyzeDy();
			}
		} else {
			wordCloudData.value = [];
			aboutUserList.value = [];
		}
	} catch (error) { }
};


// 获取议员相关性分析领域人物动态
const handleGetBillPersonAnalyzeDy = async () => {
	const params = {
		id: route.query.billId,
		areaId: selectedIndustryStatus.value,
		isOppose: box2BtnActive.value === 2
	};
	try {
		const res = await getBillPersonAnalyzeDy(params);
		aboutUserList.value = (res.data || []).map(m => ({
			id: m.id,
			img: m.imageUrl || defaultA,
			name: m.name,
			content: m.newsContent,
			icon: userIcon,
			icon1: m.party === "共和党" ? userIcon2 : userIcon1
		}));
	} catch (error) { }
};

onMounted(() => {
	handleGetBillBackground();
	handleGetRelatedEvent();
	handleGetBillPersonAnalyze(false);
});
</script>

<style lang="scss" scoped>
.header-btn-box {
	display: flex;
	gap: 8px;

	:deep(.el-button) {
		height: 28px;
		padding: 2px 8px;
		border-radius: 4px;
		font-size: 16px;
		font-weight: 400;
		font-family: Microsoft YaHei;
		line-height: 24px;
	}


	:deep(.el-button--primary.is-plain) {
		background-color: #f0f7ff;
		border-color: rgb(5, 95, 194);
		color: rgb(5, 95, 194);
		border-width: 1px;

		&:hover,
		&:focus {
			background-color: #f0f7ff;
			border-color: rgb(5, 95, 194);
			color: rgb(5, 95, 194);
		}
	}


	:deep(.el-button--info.is-plain) {
		background-color: #fff;
		border-color: rgb(230, 231, 232);
		color: rgb(59, 65, 75);

		&:hover,
		&:focus {
			background-color: #fff;
			border-color: rgb(230, 231, 232);
			color: rgb(59, 65, 75);
		}
	}
}

.background-page {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.background-content {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	align-items: flex-start;

	:deep(.bill-two-column__left) {
		width: 1064px;
	}

	:deep(.bill-two-column__right) {
		width: 520px;
		margin-right: 18px;
	}

	.background-wrap-left {
		width: 1064px;
		margin-top: 16px;
		margin-bottom: 30px;

		.left-box {
			width: 1064px;
		}

		.left-box--background {
			height: auto;

			.box1-main {
				.box1-main-center {
					margin: 0 auto;
					width: 1016px;
					height: auto;
					display: flex;
					flex-direction: column;
					gap: 8px;
					padding: 8px 0;
					box-sizing: border-box;

					.box1-main-item {
						width: 100%;
						box-sizing: border-box;
						border: none;
						background: #fff;
						display: flex;
						align-items: center;
						padding: 12px 16px 12px 18px;

						&:nth-child(odd) {
							background: rgb(247, 248, 249);
						}

						&:nth-child(even) {
							background: #fff;
						}

						.id {
							width: 24px;
							height: 24px;
							border-radius: 12px;
							background: rgba(231, 241, 255);
							color: var(--color-main-active);
							text-align: center;
							line-height: 24px;
							font-size: 12px;
							font-weight: 400;
							margin-right: 16px;
							flex: 0 0 auto;
						}

						.title {
							flex: 1 1 auto;
							min-width: 0;
							line-height: 24px;
							color: rgb(59, 65, 75);
							font-family: "Microsoft YaHei";
							font-size: 16px;
							font-weight: 400;
							text-align: left;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							word-break: break-word;
						}

						.share {
							margin-left: 12px;
							width: 16px;
							height: 16px;
							padding: 2px;
							cursor: pointer;
							flex: 0 0 auto;

							img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				.box1-main-footer {
					margin: 28px 22px;
					height: 22px;
					display: flex;
					justify-content: space-between;

					.info {
						height: 22px;
						line-height: 22px;
						color: rgb(132, 136, 142);
						font-family: "Microsoft YaHei";
						font-size: 14px;
						font-weight: 400;
						text-align: left;
					}
				}
			}
		}

		.left-box--event {
			margin-top: 15px;
			height: auto;

			.box2-main {
				--event-item-height: 60px;

				width: calc(100% - 44px);
				margin: 22px 22px;
				height: auto;
				max-height: calc(var(--event-item-height) * 5);
				overflow-y: auto;

				.box2-main-item {
					width: 100%;
					height: 60px;
					border-radius: 2px;
					box-sizing: border-box;
					padding: 6px 8px;
					display: flex;

					&:hover {
						background: rgba(225, 225, 225, 0.3);
					}

					.left {
						width: 64px;
						height: 48px;
						border-radius: 2px;

						img {
							width: 64px;
							height: 48px;
						}
					}

					.center {
						margin-left: 14px;
						flex: 1 1 auto;
						min-width: 0;

						.title {
							height: 22px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 600;
							line-height: 22px;
							letter-spacing: 0px;
							text-align: left;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.content {
							margin-top: 2px;
							height: 22px;
							color: rgba(132, 136, 142, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
							letter-spacing: 0px;
							text-align: left;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.right {
						margin-left: 25px;
						flex: 0 0 auto;
						line-height: 60px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: right;
					}
				}
			}
		}
	}


	.right-panel {
		margin-top: 16px;
		width: 520px;
		max-height: 824px;
		padding-bottom: 30px;
		height: auto !important;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		:deep(.wrapper-main) {
			height: auto !important;
			flex: 1 1 auto;
			min-height: 0;
			overflow-y: auto;
		}

		.background-wrap-right-main {
			.right-box1 {
				height: auto;
				overflow: hidden;

				.nav-icon {
					margin-top: 20px;
					cursor: pointer;
				}

				.right-box1-main-top {
					margin-top: 17px;
					margin-left: 16px;
					width: 490px;
					display: flex;
					justify-content: space-between;

					.user-list-container {
						width: 440px; // 4个 user-box 的宽度 (110 * 4)
						overflow: hidden;

						.user-list-wrapper {
							display: flex;
							transition: transform 0.3s ease;
						}
					}

					.user-box {
						width: 110px;
						flex-shrink: 0;
						height: 80px;

						.img-box {
							width: 48px;
							height: 48px;
							position: relative;
							margin: 0 auto;

							img {
								width: 100%;
								height: 100%;
								border-radius: 50%; // 圆形头像
								object-fit: cover;
							}

							.icon1 {
								position: absolute;
								left: 8px;
								bottom: -8px;
								width: 16px;
								height: 16px;
								border-radius: 10px;
								padding: 2px;
								background: rgba(255, 255, 255, 0.8);

								img {
									width: 100%;
									height: 100%;
								}
							}

							.icon2 {
								position: absolute;
								right: 8px;
								bottom: -8px;
								width: 16px;
								height: 16px;
								border-radius: 10px;
								padding: 2px;
								background: rgba(255, 255, 255, 0.8);

								img {
									width: 100%;
									height: 100%;
								}
							}
						}

						.name {
							margin-top: 10px;
							height: 14px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 14px;
							letter-spacing: 0px;
							text-align: center;
							// 名字过长处理
							width: 100px;
							margin-left: 5px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.right-box1-main-bottom {
					margin: 17px 16px 0 16px;
					border-top: 1px solid rgba(243, 243, 244, 1);
					border-bottom: 1px solid rgba(243, 243, 244, 1);
					width: 490px;
					height: 266px;
					background: rgba(249, 250, 252, 1);
					border-radius: 5px;
					display: flex;
					justify-content: space-between;
				}
			}

			.right-box2 {
				height: auto;

				.right-box2-header {
					height: 22px;
					margin-left: 22px;
					padding-top: 10px;
					display: flex;

					.icon {
						margin: 1px 12px 3px 0;
						width: 16px;
						height: 16px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						height: 22px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;

						.title-active {
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
						}
					}
				}

				.right-box2-center {
					height: auto;
					overflow: visible;
					margin-top: 19px;
					margin-left: 16px;
					width: 544px;

					.user-box {
						cursor: pointer;
						width: 490px;
						padding: 12px 0;
						box-sizing: border-box;
						border-bottom: 1px solid rgba(241, 243, 246, 1);
						margin-bottom: 0;
						display: flex;

						&:last-child {
							border-bottom: none;
						}

						.user-left {
							margin-left: 14px;
							margin-top: 12px;

							.img-box {
								width: 56px;
								height: 56px;
								position: relative;

								img {
									width: 100%;
									height: 100%;
									border-radius: 50%;
									object-fit: cover;
								}

								.icon1 {
									position: absolute;
									left: -2px;
									bottom: -2px;
									width: 18px;
									height: 18px;
									border-radius: 50%;
									padding: 2px;
									background: #fff;
									box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
									display: flex;
									align-items: center;
									justify-content: center;

									img {
										width: 14px;
										height: 14px;
										border-radius: 0;
									}
								}

								.icon2 {
									position: absolute;
									right: -2px;
									bottom: -2px;
									width: 18px;
									height: 18px;
									border-radius: 50%;
									padding: 2px;
									background: #fff;
									box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
									display: flex;
									align-items: center;
									justify-content: center;

									img {
										width: 14px;
										height: 14px;
										border-radius: 0;
									}
								}
							}
						}

						.user-right {
							margin-left: 16px;
							flex: 1;

							:deep(.text-ellipsis) {
								white-space: normal;
							}

							.name {
								margin-top: 10px;
								height: 24px;
								line-height: 24px;
								color: #333;
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
							}

							.content {
								margin-top: 4px;
								color: #666;
								font-family: Microsoft YaHei;
								font-size: 15px;
								font-weight: 400;
								line-height: 1.5;
								padding-right: 14px;
								text-align: justify;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}
	}
}
</style>
