<template>
	<div class="introduction-wrap">
		<WarningPane v-if="riskSignal" class="risk-signal-pane-top" :warnningLevel="riskSignal.riskLevel"
			:warnningContent="riskSignal.riskContent" />
		<div class="introduction-wrap-content">
			<div class="introduction-wrap-left">
				<div class="introduction-wrap-left-box1">

					<AnalysisBox title="基本信息" :showAllBtn="false">
						<div class="box1-main">
							<div class="box1-left">
								<img :src="basicInfo.imageUrl || defaultBill" alt="" />
							</div>
							<div class="box1-right">
								<div class="box1-right-item">
									<div class="item-left">提案人：</div>
									<div class="item-right">{{ basicInfo.tarName }}</div>
								</div>

								<div class="box1-right-item">
									<div class="item-left">提出时间：</div>
									<div class="item-right">{{ basicInfo.introductionDate }}</div>
								</div>
								<div class="box1-right-item">
									<div class="item-left">相关领域：</div>
									<div class="item-right1">
										<AreaTag v-for="item in hylyList" :key="item" :tagName="item" />
									</div>
								</div>
								<div class="box1-right-item">
									<div class="item-left">委员会报告：</div>
									<div class="item-right2" v-if="reportList.length">
										<div class="right2-item" v-for="(item, index) in reportList" :key="getReportKey(item, index)">
											{{ item }}
										</div>
									</div>
								</div>
								<div class="box1-right-item">
									<div class="item-left">表决记录：</div>
									<div class="item-right3">{{ `全程共进行${basicInfo.votetotal}次唱名表决` }}​</div>
								</div>
								<div class="box1-right-item">
									<div class="item-left">最近状态：</div>
									<div class="item-right3">{{ basicInfo.status }}​</div>
								</div>
								<div class="box1-right-item">
									<div class="item-left">立案流程：</div>
									<div class="item-right4">
										<div v-for="(item, index) in reversedStageList" :key="getStageKey(item, index)" class="step"
											:style="{ zIndex: getStageZIndex(index) }">
											<div class="step-box" :class="{ 'step-box-active': index === stageActiveIndex }">
												{{ item }}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</AnalysisBox>
				</div>
				<div class="introduction-wrap-left-box2">
					<AnalysisBox title="法案进展" :showAllBtn="false">
						<template #header-btn>
						</template>
						<div class="box2-main">
							<div class="box2-main-center">
								<STimeline :dataList="timelineData" :mode="progressMode" :maxCount="5" />
							</div>
						</div>
					</AnalysisBox>
				</div>
			</div>
			<div class="introduction-wrap-right">
				<AnalysisBox title="提出人" :showAllBtn="false">
					<div class="introduction-wrap-right-main">
						<div class="right-main-box1">
							<div class="name-box">
								<div class="person-box">
									<div class="person-item" :class="{ nameItemActive: box3BtnActive === item.name }"
										@click="handleClcikBox3Btn(item.name, index)" v-for="(item, index) in personList" :key="index">
										{{ item.name }}
									</div>
								</div>
							</div>
							<div class="info-box">
								<div class="info-left">
									<img class="person-avatar" :src="curPerson.imageUrl || defaultAvatar" alt=""
										@click="handleClickAvatar(curPerson)" />
									<div class="usr-icon1">
										<img :src="partyIconUrl" alt="" />
									</div>
									<div class="usr-icon2">
										<img :src="congressIconUrl" alt="" />
									</div>
								</div>
								<div class="info-right">
									<div class="info-right-title" @click="handleClickAvatar(curPerson)">{{
										curPerson.name }}</div>
									<div class="info-right-item">
										<div class="item-left">英文名:</div>
										<div class="item-right">{{ curPerson.ename }}</div>
									</div>
									<div class="info-right-item">
										<div class="item-left">党派:</div>
										<div class="item-right">{{ curPerson.dp }}</div>
									</div>
									<div class="info-right-item">
										<div class="item-left">选区:</div>
										<div class="item-right">{{ curPerson.xq }}</div>
									</div>
									<div class="info-right-item">
										<div class="item-left">职位:</div>
										<div class="item-right">{{ curPerson.zw }}</div>
									</div>
								</div>
							</div>
						</div>
						<div class="right-main-box2" v-if="curPerson.tagList && curPerson.tagList.length">
							<div class="tag-box status" v-for="(tag, index) in curPerson.tagList" :key="index">
								{{ tag }}
							</div>
						</div>
						<div class="right-main-box3">
							<div class="right-main-box3-header">
								<div class="icon">
									<img src="./assets/images/right-main-box3-header-icon.svg" alt="" />
								</div>
								<div class="title">人物动态</div>
							</div>
							<div class="right-main-box3-main">
								<el-timeline style="max-width: 500px">
									<el-timeline-item :timestamp="item.newsDate" placement="top"
										v-for="(item, index) in curPerson.newsList?.slice(0, 3)" :key="index">
										<div class="timeline-content">
											{{ item.newsContent }}
										</div>
									</el-timeline-item>
								</el-timeline>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import WordCloudMap from "./WordCloudMap.vue";
import STimeline from "./STimeline.vue";
import WarningPane from "@/components/base/WarningPane/index.vue";
import { getBillInfo, getBillPerson, getBillEvent, getBillDyqk } from "@/api/bill";
import { getPersonSummaryInfo } from "@/api/common/index";
import defaultAvatar from "../assets/images/default-icon1.png";
import defaultNew from "../assets/images/default-icon-news.png";
import defaultBill from "./assets/images/image1.png"
import defaultUsrIcon1 from "./assets/images/usr-icon1.png";
import defaultUsrIcon2 from "./assets/images/usr-icon2.png";
import cyyIcon from "@/assets/icons/cyy.png";
import zyyIcon from "@/assets/icons/zyy.png";
import ghdIcon from "@/assets/icons/ghd.png";
import mzdIcon from "@/assets/icons/mzd.png";
import { ElMessage } from "element-plus";

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

// 跳转到人物页面
const handleClickAvatar = async item => {
	if (!item?.id) return;
	const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList") || "[]");
	let type = 0;
	let personTypeName = "";
	const params = {
		personId: item.id
	};
	try {
		const res = await getPersonSummaryInfo(params);
		if (res.code === 200 && res.data) {
			const arr = personTypeList.filter(val => val.typeId === res.data.personType);
			if (arr && arr.length > 0) {
				personTypeName = arr[0].typeName;
				if (personTypeName === "科技企业领袖") {
					type = 1;
				} else if (personTypeName === "国会议员") {
					type = 2;
				} else if (personTypeName === "智库研究人员") {
					type = 3;
				} else {
					personTypeName = "";
					ElMessage.warning("找不到当前人员的类型值！");
					return;
				}
				window.sessionStorage.setItem("curTabName", item.name || "");
				const routeData = router.resolve({
					path: "/characterPage",
					query: {
						type,
						personId: item.id
					}
				});
				window.open(routeData.href, "_blank");
				// router.push({
				// 	path: "/characterPage",
				// 	query: {
				// 		type,
				// 		personId: item.id
				// 	}
				// })
			} else {
				personTypeName = "";
				ElMessage.warning("找不到当前人员的类型值！");
			}
		} else {
			ElMessage.warning("找不到当前人员的类型值！");
		}
	} catch (error) { }
};
// 获取URL地址里面的billId
const billId = ref(route.query.billId);
const dialogBoxBtnActive = ref(0);
const handleClcikDialogBoxBtn = index => {
	dialogBoxBtnActive.value = index;
};

const timelineData = ref([]);
const progressMode = ref("latest");

const handleSwitchProgressMode = mode => {
	progressMode.value = mode;
};

// 获取基本信息

const basicInfo = ref({});

const riskSignal = computed(() => basicInfo.value?.riskSignalVO || null);
const hylyList = computed(() => (Array.isArray(basicInfo.value?.hylyList) ? basicInfo.value.hylyList : []));
const reportList = computed(() => (Array.isArray(basicInfo.value?.reportList) ? basicInfo.value.reportList : []));

// 提出人头像下方标志：参/众议院 + 党派
const congressIconUrl = computed(() => {
	const congress = curPerson.value?.congress;
	if (congress === "参议院") return cyyIcon;
	if (congress === "众议院") return zyyIcon;
	return defaultUsrIcon1;
});

const partyIconUrl = computed(() => {
	const dp = curPerson.value?.dp;
	if (dp === "共和党") return ghdIcon;
	if (dp === "民主党") return mzdIcon;
	return defaultUsrIcon2;
});

const reversedStageList = computed(() => {
	const list = Array.isArray(basicInfo.value?.stageList) ? basicInfo.value.stageList : [];
	return [...list];
});
const stageListLength = computed(() => (Array.isArray(basicInfo.value?.stageList) ? basicInfo.value.stageList.length : 0));
const stageActiveIndex = computed(() => stageListLength.value - 1);
const getStageZIndex = index => stageListLength.value - index;
const getStageKey = (item, index) => `${item}-${index}`;
const getReportKey = (item, index) => `${item}-${index}`;

const handleGetBasicInfo = async () => {
	const params = {
		id: billId.value
	};
	try {
		const res = await getBillInfo(params);
		console.log("基本信息", res);
		basicInfo.value = res.data || {};
	} catch (error) {
		console.error(error);
	}
};

// 法案进展 获取前期进展 --也是提出人左上角列表
const handleGetBillDyqk = async () => {
	const params = {
		id: billId.value
	};
	try {
		const res = await getBillDyqk(params);
		console.log("前期进展", res);
		timelineData.value = res.data || [];

	} catch (error) {
		console.error(error);
	}
};

const personList = ref([]);
const curPerson = ref({});
const box3BtnActive = ref("");

const handleClcikBox3Btn = (name, index) => {
	box3BtnActive.value = name;
	curPerson.value = personList.value[index];
};

// 法案提出人
const handleGetBillPerson = async () => {
	const params = {
		billId: billId.value
	};
	try {
		const res = await getBillPerson(params);
		console.log("提出人", res);
		personList.value = res.data || [];
		if (personList.value.length > 0) {
			box3BtnActive.value = personList.value[0].name;
			curPerson.value = personList.value[0];
		} else {
			box3BtnActive.value = "";
			curPerson.value = {};
		}
	} catch (error) {
		console.error(error);
	}
};

onMounted(() => {
	handleGetBasicInfo();
	// handleGetBillEvent();
	handleGetBillDyqk();
	handleGetBillPerson();
});
</script>

<style lang="scss" scoped>
.introduction-wrap {
	width: 100%;
	min-height: 880px;
	height: auto;
	display: flex;
	flex-direction: column;

	.progress-header-btns {
		display: flex;
		gap: 8px;

		.btn {
			height: 28px;
			padding: 0 12px;
			box-sizing: border-box;
			border: 1px solid var(--btn-plain-border-color);
			border-radius: 4px;
			background: var(--btn-plain-bg-color);
			color: var(--btn-plain-text-color);
			font-family: Microsoft YaHei;
			font-size: 14px;
			font-weight: 400;
			line-height: 26px;
			cursor: pointer;
		}

		.btnActive {
			border: 1px solid var(--btn-active-border-color);
			background: var(--btn-active-bg-color);
			color: var(--btn-active-text-color);
		}
	}

	.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;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
		}

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

			.btn {
				margin-left: 20px;
			}
		}

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

	.risk-signal-pane-top {
		// width: 1600px;
		margin-top: 16px;
		margin-right: 18px;
		padding-bottom: 16px;
		min-height: 116px;
		height: auto;
		flex-shrink: 0;
	}

	.introduction-wrap-content {
		display: flex;
	}

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

		.introduction-wrap-left-box1 {
			width: 1064px;
			height: 415px;

			.box1-main {
				display: flex;
				// height: 360px;

				.box1-left {
					margin-left: 23px;
					width: 280px;
					height: 340px;
					border-radius: 4px;
					border: 1px solid var(--border-black-5);

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

				.box1-right {
					margin-left: 31px;
					margin-top: 5px;
					// width: 623px;
					height: 350px;

					.box1-right-item {
						display: flex;
						margin-bottom: 21px;

						.item-left {
							width: 100px;
							height: 14px;
							color: rgba(59, 65, 75, 1);
							font-family: "Microsoft YaHei";
							font-size: 16px;
							font-weight: 700;
							line-height: 14px;
							text-align: left;
						}

						.item-right {
							height: 14px;
							color: var(--color-main-active);
							font-family: "Microsoft YaHei";
							font-size: 16px;
							font-weight: 700;
							line-height: 14px;
							letter-spacing: 0px;
							text-align: left;
						}

						.item-right1 {
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							width: 700px;
							min-height: 40px;
							gap: 8px;

							.right1-item {
								margin-right: 10px;
								margin-bottom: 8px;
								padding: 1px 8px;
								box-sizing: border-box;
								border: 1px solid rgba(186, 224, 255, 1);
								border-radius: 4px;
								background: rgba(230, 244, 255, 1);
								color: rgba(22, 119, 255, 1);
								font-family: "Microsoft YaHei";
								font-size: 14px;
								font-weight: 400;
								line-height: 20px;
							}
						}

						.item-right2 {
							.right2-item {
								height: 14px;
								color: rgba(95, 101, 108, 1);
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 400;
								line-height: 14px;
								text-align: left;
								margin-bottom: 12px;
							}
						}

						.item-right3 {
							height: 14px;
							color: rgba(95, 101, 108, 1);
							font-family: "Microsoft YaHei";
							font-size: 16px;
							font-weight: 400;
							line-height: 14px;
							text-align: left;
						}

						.item-right4 {
							margin-top: -4px;
							height: 28px;
							display: flex;

							.step {
								height: 28px;
								line-height: 26px;
								font-size: 16px;
								text-align: center;
								position: relative;
								background: transparent;

								.step-box {
									padding: 0 15px 0 30px;
									color: rgb(59, 65, 75);
									position: relative;
									font-size: 14px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									margin-left: -10px;
									background: rgba(243, 243, 244, 1);
									border-top: 1px solid rgb(59, 65, 75);
									border-bottom: 1px solid rgb(59, 65, 75);
									border-right: none;
									height: 100%;
									box-sizing: border-box;

									&::after {
										content: "";
										position: absolute;
										top: 50%;
										right: -9.9px;
										width: 19.8px;
										height: 19.8px;
										background: inherit;
										border-top: 1px solid rgb(59, 65, 75);
										border-right: 1px solid rgb(59, 65, 75);
										transform: translateY(-50%) rotate(45deg);
										z-index: 1;
										box-sizing: border-box;
									}
								}

								&:first-child {
									.step-box {
										margin-left: 0;
										padding-left: 10px;
										border-left: 1px solid rgb(59, 65, 75);
									}
								}

								.step-box-active {
									color: rgba(255, 255, 255, 1);
									background: rgb(206, 79, 81);
									border-color: rgba(52, 24, 24, 1);

									&::after {
										border-color: rgba(52, 24, 24, 1);
									}
								}

								&:last-child {
									.step-box {
										padding-right: 15px;
										border-right: 1px solid rgb(59, 65, 75);

										&::after {
											display: none;
										}
									}

									.step-box-active {
										border-right: none;

										&::after {
											display: block;
											right: -9.9px;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.introduction-wrap-left-box2 {
			margin-top: 15px;
			width: 1064px;
			height: 415px;
			position: relative;

			.box2-main {
				margin-top: 10px;
				height: calc(100% - 70px); // Subtract header height
				width: 100%;

				.box2-main-center {
					margin-left: 23px;
					width: calc(100% - 46px); // Subtract margin
					height: 100%;

					// background: orange;
					.box2-center-item {
						display: flex;
						height: 53px;
						box-sizing: border-box;
						border-bottom: 1px solid rgba(243, 243, 244, 1);

						.tip {
							margin: 20px;
							width: 8px;
							height: 8px;
							border-radius: 8px;
						}

						.tipActive {
							background: rgba(255, 77, 79, 1);
						}

						.date {
							width: 100px;
							margin-top: 13px;
							height: 22px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 600;
							line-height: 22px;
						}

						.title {
							width: 770px;
							margin-left: 10px;
							margin-top: 13px;
							height: 22px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
						}

						.info {
							width: 120px;
							display: flex;
							justify-content: flex-end;

							.info-box {
								margin-top: 13px;
								height: 24px;
								line-height: 24px;
								box-sizing: border-box;
								border-radius: 4px;
								text-align: center;
							}

							.danger-box4 {
								width: 100px;
								background: rgba(255, 241, 240, 1);
								border: 1px solid rgba(255, 204, 199, 1);
								color: rgba(255, 77, 79, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
							}

							.danger-box3 {
								width: 72px;
								color: rgba(255, 172, 77, 1);
								box-sizing: border-box;
								border: 1px solid rgba(255, 225, 199, 1);
								border-radius: 4px;

								background: rgba(255, 245, 240, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
							}

							.danger-box2 {
								width: 72px;
								color: rgba(250, 173, 20, 1);
								box-sizing: border-box;
								border: 1px solid rgba(255, 241, 184, 1);
								border-radius: 4px;

								background: rgba(255, 251, 230, 1);

								font-family: Microsoft YaHei;
								font-size: 14px;
							}

							.danger-box1 {
								width: 58px;
								color: rgba(82, 196, 26, 1);
								box-sizing: border-box;
								border: 1px solid rgba(217, 247, 190, 1);
								border-radius: 4px;

								background: rgba(246, 255, 237, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
							}
						}

						.more {
							margin-top: 13px;
							margin-left: 40px;
							cursor: pointer;
						}
					}
				}
			}

			.box2-footer {
				margin-top: 7px;
				display: flex;
				justify-content: center;
				position: absolute;
				bottom: 10px;
				left: 50%;
				transform: translateX(-50%);
				z-index: 99;
			}
		}
	}

	.introduction-wrap-right {
		margin-top: 16px;
		margin-left: 16px;
		margin-right: 18px;
		width: 520px;
		height: 845px;

		.introduction-wrap-right-main {
			.right-main-box1 {
				// height: 218px; 将选择框去掉后高度变化
				min-height: 171px;
				height: auto;
				padding-bottom: 15px;

				// border-bottom: 1px solid rgb(243, 243, 244);
				.name-box {
					width: 480px;
					display: flex;
					justify-content: flex-start;
					margin-left: 22px;
					margin-top: 10px;

					.person-box {
						width: 500px;
						overflow-x: hidden;
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						padding-bottom: 5px;

						&::-webkit-scrollbar {
							height: 4px;
						}

						&::-webkit-scrollbar-thumb {
							border-radius: 4px;
							background: #e1e1e1;
						}

						&::-webkit-scrollbar-track {
							background: transparent;
						}

						.person-item {
							min-height: 28px;
							height: auto;
							box-sizing: border-box;
							border: 1px solid var(--btn-plain-border-color);
							border-radius: 4px;
							background: var(--btn-plain-bg-color);
							color: var(--btn-plain-text-color);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							margin-right: 8px;
							padding: 1px 12px;
							cursor: pointer;
							white-space: normal;
							word-break: break-all;
							line-height: 18px;
							flex-shrink: 1;
							max-width: 170px;
							text-align: center;
						}

						.nameItemActive {
							border: 1px solid var(--btn-active-border-color);
							background: var(--btn-active-bg-color);
							color: var(--btn-active-text-color);
						}
					}
				}

				.info-box {
					margin-left: 29px;
					margin-top: 25px;
					display: flex;

					.info-left {
						cursor: pointer;

						.person-avatar {
							width: 128px;
							height: 128px;
							border-radius: 50%;
							object-fit: cover;
						}

						img {
							width: 128px;
							height: 128px;
						}

						position: relative;

						.usr-icon1 {
							position: absolute;
							bottom: 0;
							left: 18px;
							width: 48px;
							height: 48px;
							border-radius: 24px;
							background: rgba(255, 255, 255, 0.9);
							box-sizing: border-box;
							padding: 4px;

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

						.usr-icon2 {
							position: absolute;
							bottom: 0px;
							right: 18px;
							width: 48px;
							height: 48px;
							border-radius: 24px;
							background: rgba(255, 255, 255, 0.9);
							box-sizing: border-box;
							padding: 4px;

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

					.info-right {
						margin-left: 22px;

						.info-right-title {
							height: 22px;
							margin-bottom: 24px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 600;
							line-height: 22px;
							cursor: pointer;
						}

						.info-right-item {
							margin-top: 8px;
							display: flex;
							color: rgba(95, 101, 108, 1);

							.item-left {
								height: 22px;
								width: 60px;
							}

							.item-right {
								height: 22px;
								margin-left: 10px;
							}
						}
					}
				}
			}

			.right-main-box2 {
				// width: 576px;
				max-height: 120px;
				overflow-y: auto;
				box-sizing: border-box;
				padding: 10px 26px;

				&::-webkit-scrollbar {
					width: 4px;
				}

				&::-webkit-scrollbar-thumb {
					border-radius: 4px;
					background: #e1e1e1;
				}

				&::-webkit-scrollbar-track {
					background: transparent;
				}

				// border-bottom: 1px solid rgb(243, 243, 244);
				// display: flex;
				// flex-wrap: wrap;
				// align-items: center;
				.tag-box {
					height: 22px;
					padding: 1px 8px;
					border-radius: 4px;
					box-sizing: border-box;
					margin-right: 8px;
					margin-bottom: 9px;
					font-size: 14px;
					display: inline-block;
				}

				.status {
					// border: 1px solid rgba(217, 247, 190, 1);
					color: rgb(5, 95, 194);
					background: rgb(231, 243, 255);
				}
			}

			.right-main-box3 {
				.right-main-box3-header {
					margin-left: 22px;
					margin-top: 24px;
					display: flex;
					align-items: center;

					.icon {
						width: 16px;
						height: 16px;
					}

					.title {
						margin-left: 12px;
						height: 24px;
						color: rgb(59, 65, 75);
						font-family: Microsoft YaHei;
						font-size: 18px;
						font-weight: 700;
						line-height: 24px;
					}
				}

				.right-main-box3-main {
					margin-top: 18px;
					overflow-y: auto;
				}
			}
		}
	}
}

.dialog-box {
	.dialog-inner-box {
		display: flex;

		.inner-left {
			width: 360px;
			height: 960px;
			box-sizing: border-box;
			border-right: 1px solid rgba(241, 243, 246, 1);
			background: rgba(246, 251, 255, 1);
			margin-top: -16px;
			position: relative;

			.info-box {
				.info-top {
					position: relative;
					width: 200px;
					height: 200px;
					margin-left: 81px;
					margin-top: 38px;

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

					.usr-icon1 {
						position: absolute;
						bottom: -15px;
						left: 55px;
						width: 48px;
						height: 48px;
						border-radius: 24px;
						background: rgba(255, 255, 255, 0.9);
						box-sizing: border-box;
						padding: 0px;

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

					.usr-icon2 {
						position: absolute;
						bottom: -15px;
						right: 55px;
						width: 48px;
						height: 48px;
						border-radius: 24px;
						background: rgba(255, 255, 255, 0.9);
						box-sizing: border-box;
						padding: 0px;

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

				.info-footer {
					width: 100%;
					margin-top: 30px;

					.info-right-title {
						// height: 22px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 700;
						line-height: 22px;
						text-align: center;
						margin-bottom: 50px;
						cursor: pointer;
					}

					.info-right-item {
						margin-top: 8px;
						margin-left: 38px;
						display: flex;
						color: rgba(59, 65, 75, 1);
						font-size: 16px;
						font-weight: 400;

						.item-left {
							height: 24px;
							width: 60px;
						}

						.item-right {
							height: 24px;
							margin-left: 10px;
						}
					}
				}
			}

			.tag-wrapper {
				width: 287px;
				max-height: 150px;
				overflow-y: auto;
				box-sizing: border-box;
				margin-top: 30px;
				margin-left: 38px;
				padding-right: 5px;

				&::-webkit-scrollbar {
					width: 4px;
				}

				&::-webkit-scrollbar-thumb {
					border-radius: 4px;
					background: #e1e1e1;
				}

				&::-webkit-scrollbar-track {
					background: transparent;
				}

				// border-bottom: 1px solid rgb(243, 243, 244);
				// display: flex;
				// flex-wrap: wrap;
				// align-items: center;
				.tag-box {
					height: 22px;
					padding: 1px 8px;
					border-radius: 4px;
					box-sizing: border-box;
					margin-right: 8px;
					margin-bottom: 9px;
					font-size: 14px;
					display: inline-block;
				}

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

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

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

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

			.more {
				position: absolute;
				left: 140px;
				bottom: 32px;
				width: 81px;
				height: 16px;
				color: var(--color-main-active);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 16px;
			}
		}

		.inner-right {
			height: 960px;

			.btn-box {
				display: flex;
				height: 80px;
				margin-left: 35px;

				.btn {
					width: 80px;
					text-align: center;
					height: 28px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding: 1px 8px;
					box-sizing: border-box;
					border-radius: 4px;
					border: 1px solid var(--btn-plain-border-color);
					background: var(--btn-plain-bg-color);
					color: var(--btn-plain-text-color);
					margin: 20px 8px;
					cursor: pointer;
				}

				.btnActive {
					border: 1px solid var(--btn-active-border-color);
					background: var(--btn-active-bg-color);
					color: var(--btn-active-text-color);
				}
			}

			.inner-right-main {
				height: 860px;
				overflow: auto;
			}
		}
	}
}

:deep(.el-dialog) {
	margin-top: 60px;
	height: 960px;
	padding: 0;
}

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

:deep(.el-timeline) {
	padding: 8px 0px 0px 25px !important;
}

:deep(.el-timeline-item__node) {
	border: 4px solid var(--color-main-active) !important;
	background-color: #fff;
}

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

:deep(.el-timeline-item__timestamp) {
	color: var(--color-main-active) !important;
	font-family: Microsoft YaHei !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	padding-top: 0px !important;
}

.timeline-content {
	color: var(--text-primary-65-color);
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 26px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
}

.timeline-content1 {
	color: var(--text-primary-65-color);
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	margin-bottom: 30px;
	display: flex;

	.text {
		flex: 1;
	}

	.pic {
		width: 98px;
		height: 72px;
		border-radius: 4px;
		margin-left: 10px;

		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
