<template>
	<div class="background-wrap">
		<div class="background-wrap-left">
			<div class="background-wrap-left-box1">
				<!-- <div class="box-header">
					<div class="header-left"></div>
					<div class="title">立法背景</div>
					<div class="header-btn-box">
						<div class="btn" @click="handleClickBox1Btn(1)">
							<el-button type="primary" plain v-if="box1BtnActive === 1">涉华背景</el-button>
							<el-button type="info" plain v-else>涉华背景</el-button>
						</div>
						<div class="btn" @click="handleClickBox1Btn(2)">
							<el-button type="primary" plain v-if="box1BtnActive === 2">全部背景</el-button>
							<el-button type="info" plain v-else>全部背景</el-button>
						</div>
					</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-main">
					<div class="box1-main-center">
						<div class="box1-main-item" v-for="(item, index) in backgroundList" :key="item.id">
							<div class="id">{{ (currentPage - 1) * 10 + index + 1 }}</div>
							<div class="title">{{ item.backgroundTitle }}</div>
							<div class="share">
							</div>
						</div>
					</div>
					<div class="box1-main-footer">
						<div class="info">
							{{ `共 ${total} 项` }}
						</div>
						<div class="page-box">
							<el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="currentPage"
								@current-change="handleGetBillBackground" />
						</div>
					</div>
				</div> -->
				<AnalysisBox title="立法背景" :showAllBtn="false">
					<template #header-btn>
						<div class="header-btn-box">
							<div class="btn" @click="handleClickBox1Btn(1)">
								<el-button type="primary" plain v-if="box1BtnActive === 1">涉华背景</el-button>
								<el-button type="info" plain v-else>涉华背景</el-button>
							</div>
							<div class="btn" @click="handleClickBox1Btn(2)">
								<el-button type="primary" plain v-if="box1BtnActive === 2">全部背景</el-button>
								<el-button type="info" plain v-else>全部背景</el-button>
							</div>
						</div>
					</template>
					<div class="box1-main">
						<div class="box1-main-center">
							<div class="box1-main-item" v-for="(item, index) in backgroundList" :key="item.id">
								<div class="id">{{ (currentPage - 1) * 10 + index + 1 }}</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">
								{{ `共 ${total} 项` }}
							</div>
							<div class="page-box">
								<el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="currentPage"
									@current-change="handleGetBillBackground" />
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="background-wrap-left-box2">
				<!-- <div class="box-header">
					<div class="header-left"></div>
					<div class="title">相关事件</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box2-main">
					<div class="box2-main-item" v-for="(item, index) in eventList" :key="index" @click="handleClickEvent(item)">
						<div class="left">
							<img :src="item.imageUrl || defaultNew" @error="e => (e.target.src = defaultNew)" alt="" />
						</div>
						<div class="center">
							<CommonPrompt :content="item.sjbt">
								<div class="title">{{ item.sjbt }}</div>
							</CommonPrompt>
							<CommonPrompt :content="item.sjnr">
								<div class="content">{{ item.sjnr }}</div>
							</CommonPrompt>
						</div>
						<div class="right">{{ item.sjsj }}</div>
					</div>
				</div> -->
				<AnalysisBox title="相关事件" :showAllBtn="false">
					<div class="box2-main">
						<div class="box2-main-item" v-for="(item, index) in eventList" :key="index" @click="handleClickEvent(item)">
							<div class="left">
								<img :src="item.imageUrl || defaultNew" @error="e => (e.target.src = defaultNew)" alt="" />
							</div>
							<div class="center">
								<CommonPrompt :content="item.sjbt">
									<div class="title">{{ item.sjbt }}</div>
								</CommonPrompt>
								<CommonPrompt :content="item.sjnr">
									<div class="content">{{ item.sjnr }}</div>
								</CommonPrompt>
							</div>
							<div class="right">{{ item.sjsj }}</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
		<div class="background-wrap-right">
			<!-- <div class="box-header">
				<div class="header-left"></div>
				<div class="title">议员相关性分析</div>
				<div class="header-btn-box">
					<div class="btn" @click="handleClickBox2Btn(1)">
						<el-button type="primary" plain v-if="box2BtnActive === 1">赞成议员</el-button>
						<el-button type="info" plain v-else>赞成议员</el-button>
					</div>
					<div class="btn" @click="handleClickBox2Btn(2)">
						<el-button type="primary" plain v-if="box2BtnActive === 2">反对议员</el-button>
						<el-button type="info" plain v-else>反对议员</el-button>
					</div>
				</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="background-wrap-right-main">
				<div class="right-box1">
					<div class="right-box1-main">
						<div class="right-box1-main-top">
							<el-icon style="margin-top: 20px; cursor: pointer" size="20"
								:color="currentIndex > 0 ? '#5f656c' : '#ccc'" @click="handlePrev">
								<CaretLeft />
							</el-icon>
							<div class="user-list-container">
								<div class="user-list-wrapper" :style="{ transform: `translateX(-${currentIndex * 110}px)` }">
									<div class="user-box" v-for="(item, index) in personList" :key="index" @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 style="margin-top: 20px; cursor: pointer" size="20"
								:color="currentIndex < personList.length - 4 ? '#5f656c' : '#ccc'" @click="handleNext">
								<CaretRight />
							</el-icon>
						</div>
						<div class="right-box1-main-bottom">
							<WordCloudMap :data="wordCloudData" :selectedName="selectedIndustryName" shape="circle"
								@wordClick="handleWordClick" />
						</div>
					</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, index) in aboutUserList" :key="index" @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 title="议员相关性分析" :showAllBtn="false">
				<template #header-btn>
					<div class="header-btn-box">
						<div class="btn" @click="handleClickBox2Btn(1)">
							<el-button type="primary" plain v-if="box2BtnActive === 1">赞成议员</el-button>
							<el-button type="info" plain v-else>赞成议员</el-button>
						</div>
						<div class="btn" @click="handleClickBox2Btn(2)">
							<el-button type="primary" plain v-if="box2BtnActive === 2">反对议员</el-button>
							<el-button type="info" plain v-else>反对议员</el-button>
						</div>
					</div>
				</template>
				<div class="background-wrap-right-main">
					<div class="right-box1">
						<div class="right-box1-main">
							<div class="right-box1-main-top">
								<el-icon style="margin-top: 20px; cursor: pointer" size="20"
									:color="currentIndex > 0 ? '#5f656c' : '#ccc'" @click="handlePrev">
									<CaretLeft />
								</el-icon>
								<div class="user-list-container">
									<div class="user-list-wrapper" :style="{ transform: `translateX(-${currentIndex * 110}px)` }">
										<div class="user-box" v-for="(item, index) in personList" :key="index"
											@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 style="margin-top: 20px; cursor: pointer" size="20"
									:color="currentIndex < personList.length - 4 ? '#5f656c' : '#ccc'" @click="handleNext">
									<CaretRight />
								</el-icon>
							</div>
							<div class="right-box1-main-bottom">
								<WordCloudMap :data="wordCloudData" :selectedName="selectedIndustryName" shape="circle"
									@wordClick="handleWordClick" />
							</div>
						</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, index) in aboutUserList" :key="index" @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>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import WordCloudMap from "./WordCloudMap.vue";
import CommonPrompt from "../commonPrompt/index.vue";

const route = useRoute();
const router = useRouter();
import event1 from "./assets/images/event1.png";
import event2 from "./assets/images/event2.png";
import event3 from "./assets/images/event3.png";
import event4 from "./assets/images/event4.png";
import event5 from "./assets/images/event5.png";
import user1 from "./assets/images/user1.png";
import user2 from "./assets/images/user2.png";
import user3 from "./assets/images/user3.png";
import user4 from "./assets/images/user4.png";
import user5 from "./assets/images/user5.png";
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, getBillEvent, getBillPersonAnalyze, getBillInfoEvent, getBillPersonAnalyzeDy } from "@/api/bill";

// 跳转到相关新闻
const handleClickEvent = item => {
	const routeData = router.resolve({
		path: "/newsAnalysis",
		query: {
			newsId: item.id
		}
	});
	window.open(routeData.href, "_blank");
};



// 跳转人员详情
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 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 handleGetBillBackground = async () => {
	const cRelated = box1BtnActive.value === 1 ? "Y" : "N";
	const params = {
		cRelated: cRelated,
		id: route.query.billId,
		currentPage: currentPage.value - 1,
		pageSize: 10
	};
	try {
		const res = await getBillBackground(params);
		console.log("立法背景", res);
		backgroundList.value = res.data.content;
		total.value = res.data.totalElements; // 假设API返回totalElements
	} catch (error) { }
};

// 获取相关事件
const handleGetRelatedEvent = async () => {
	const params = {
		id: route.query.billId
	};
	try {
		const res = await getBillInfoEvent(params);
		console.log("相关事件", res);
		eventList.value = res.data;
		eventList.value.forEach((item, index) => {
			if (index === 0) {
				item.image = event1;
			} else if (index === 1) {
				item.image = event2;
			} else if (index === 2) {
				item.image = event3;
			} else if (index === 3) {
				item.image = event4;
			} else {
				item.image = event5;
			}
		});
	} catch (error) { }
};

// 议员相关性分析
const handleGetBillPersonAnalyze = async isOppose => {
	const params = {
		id: route.query.billId,
		isOppose: isOppose
	};
	try {
		const res = await getBillPersonAnalyze(params);
		console.log("议员相关性分析", res);
		const { members, industryCounts } = res.data;
		// 更新人员列表
		personList.value = members || [];
		personList.value.forEach((item, index) => {
			// 优先使用接口返回的图片，没有则使用默认头像 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);
		console.log("议员相关性分析领域人物动态", res);
		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;

	.btn {
		margin-left: 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-wrap {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: flex;

	.box-header {
		height: 56px;
		display: flex;
		position: relative;

		.header-left {
			margin-top: 18px;
			width: 8px;
			height: 20px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}

		.title {
			margin-left: 14px;
			margin-top: 14px;
			height: 26px;
			line-height: 26px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
		}

		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 84px;
			display: flex;

			.btn {
				margin-left: 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);
				}
			}
		}

		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;

			.icon {
				width: 28px;
				height: 28px;

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

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

		.background-wrap-left-box1 {
			width: 1064px;
			height: 415px;
			.box1-main {
				.box1-main-center {
					margin: 0 auto;
					width: 1016px;
					height: 280px;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-content: flex-start;

					.box1-main-item {
						width: 500px;
						height: 48px;
						box-sizing: border-box;
						border: 1px solid rgba(243, 243, 244, 1);
						border-radius: 2px;
						background: rgba(255, 255, 255, 1);
						display: flex;
						margin-top: 8px;

						.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: 12px 16px 12px 18px;
						}

						.title {
							width: 440px;
							height: 48px;
							line-height: 48px;
							color: rgb(59, 65, 75);
							font-family: "Microsoft YaHei";
							font-size: 16px;
							font-weight: 400;
							text-align: left;
							overflow: hidden;
						}

						.share {
							margin-left: 13px;
							margin-top: 16px;
							width: 16px;
							height: 16px;
							padding: 2px;
							cursor: pointer;

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

				.box1-main-footer {
					margin: 30px 22px 0 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;
					}
				}
			}
		}

		.background-wrap-left-box2 {
			margin-top: 15px;
			width: 1064px;
			height: 415px;
			.box2-main {
				width: 1010px;
				margin: 0 auto;
				height: 349px;
				overflow-y: auto;

				.box2-main-item {
					width: 1005px;
					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;
						width: 805px;

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

			.box2-footer {
				margin-top: 7px;
				display: flex;
				justify-content: center;

				.btn-more {
					width: 108px;
					height: 32px;
					cursor: pointer;

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

	.background-wrap-right {
		margin-right: 18px;
		margin-left: 16px;
		margin-top: 16px;
		width: 520px;
		height: 845px;
		.background-wrap-right-main {
			.right-box1 {
				height: 365px;
				overflow: hidden;

				.right-box1-header {
					height: 22px;
					margin: 0 auto;
					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: 14px;
						font-weight: 600;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: left;
					}
				}

				.right-box1-main {
					width: 502px;
					margin-top: 17px;

					.right-box1-main-top {
						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: 5px;
									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: 5px;
									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-box1-footer {
					display: flex;

					.left {
						width: 70px;
						height: 18px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 18px;
						margin-left: 26px;
						margin-top: 23px;
					}

					.right {
						flex: 1;
						display: flex;
						margin-left: 10px;
						margin-right: 20px;
						margin-top: 20px;
						justify-content: space-between;

						.right-tag {
							padding: 1px 8px 1px 8px;
							// box-sizing: border-box;
							border-radius: 4px;
							text-align: center;
							height: 20px;
							line-height: 20px;
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
						}

						.tag1 {
							border: 1px solid rgba(186, 224, 255, 1);
							background: rgba(230, 244, 255, 1);
							color: rgba(22, 119, 255, 1);
						}

						.tag2 {
							border: 1px solid rgba(217, 247, 190, 1);
							background: rgba(246, 255, 237, 1);
							color: rgba(82, 196, 26, 1);
						}

						.tag3 {
							border: 1px solid rgba(255, 204, 199, 1);
							background: rgba(255, 241, 240, 1);
							color: rgba(255, 77, 79, 1);
						}

						.tag4 {
							border: 1px solid rgba(255, 241, 184, 1);
							background: rgba(255, 251, 230, 1);
							color: rgba(250, 173, 20, 1);
						}
					}
				}
			}

			.right-box2 {
				height: 423px;

				.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: 345px;
					overflow: auto;
					overflow-y: auto;
					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;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}

				// .right-box2-footer {
				// 	margin-top: 7px;
				// 	display: flex;
				// 	justify-content: center;
				// 	.btn-more {
				// 		width: 108px;
				// 		height: 32px;
				// 		cursor: pointer;
				// 		img {
				// 			width: 100%;
				// 			height: 100%;
				// 		}
				// 	}
				// }
			}
		}
	}
}

:deep(.el-steps--simple) {
	padding: 6px 10px;
}

:deep(.el-timeline-item) {
	padding-bottom: 5px !important;
}

:deep(.el-timeline-item__timestamp) {
	color: rgba(95, 101, 108, 1) !important;
	font-family: Microsoft YaHei !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

.timeline-content {
	color: rgba(132, 136, 142, 1);
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
}
</style>
