<template>
	<div class="introduction-wrap">
		<div class="introduction-wrap-left">
			<div class="introduction-wrap-left-box1">
				<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="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">
								<div class="right1-item" v-for="item in basicInfo.hylyList" :key="item">{{ item }}</div>
							</div>
						</div>
						<!-- <div class="box1-right-item">
							<div class="item-left">法案类别：</div>
							<div class="item-right">{{ basicInfo.typeName }}</div>
						</div> -->
						<div class="box1-right-item">
							<div class="item-left">委员会报告：</div>
							<div class="item-right2" v-if="basicInfo.reportList">
								<div class="right2-item" v-for="(item, index) in basicInfo.reportList" :key="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
									class="step"
									v-for="(item, index) in basicInfo.stageList ? [...basicInfo.stageList].reverse() : []"
									:key="index"
									:style="{ zIndex: (basicInfo.stageList?.length || 0) - index }"
								>
									<div
										class="step-box"
										:class="{ 'step-box-active': index === (basicInfo.stageList?.length || 0) - 1 }"
									>
										{{ item }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="introduction-wrap-left-box2">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">法案进展</div>
					<!-- <div class="header-btn-box">
						<div class="btn" @click="handleClcikBox2Btn(1)">
							<el-badge :value="warningNum">
								<el-button type="primary" plain v-if="box2BtnActive === 1">最新进展</el-button>
								<el-button type="info" plain v-else>最新进展</el-button>
							</el-badge>
						</div>
						<div class="btn" @click="handleClcikBox2Btn(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="box2-main">
					<div class="box2-main-center">
						<STimeline :dataList="timelineData" />
						<!-- <div class="box2-center-item-box" v-if="box2BtnActive == 1">
							<div class="box2-center-item" v-for="(item, index) in progressList" :key="index">
								<div class="tip" :class="{ tipActive: item.fxdj }"></div>
								<div class="date">{{ item.actionDate }}</div>
								<div class="title">{{ item.actionContentCn }}</div>
								<div class="info">
									<div class="info-box danger-box4" v-if="item.fxdj === '特别重大风险'">
										{{ item.fxdj }}
									</div>
									<div class="info-box danger-box3" v-if="item.fxdj === '重大风险'">
										{{ item.fxdj }}
									</div>
									<div class="info-box danger-box2" v-if="item.fxdj === '较大风险'">
										{{ item.fxdj }}
									</div>
									<div class="info-box danger-box1" v-if="item.fxdj === '低风险'">
										{{ item.fxdj }}
									</div>
								</div>
								<div class="more">
									<el-icon size="22" color="#777"><ArrowRightBold /></el-icon>
								</div>
							</div>
						</div> -->
					</div>
				</div>
				<!-- <div class="box2-footer">
					<div class="btn-more">
						<img src="../assets/images/btn-more.png" alt="" />
					</div>
				</div> -->
			</div>
		</div>
		<div class="introduction-wrap-right">
			<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="introduction-wrap-right-main">
				<div class="right-main-box1">
					<div class="name-box">
						<!-- <el-select
							v-model="selectValue"
							placeholder="请选择"
							style="width: 180px; margin: 0 10px"
							@change="handleChangeFaId"
						>
							<el-option v-for="item in faList" :key="item.value" :label="item.label" :value="item.id" />
						</el-select> -->
						<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 :src="defaultAvatar" alt="" @click="handleClickAvatar(curPerson)"/>
							<div class="usr-icon1">
								<img src="./assets/images/usr-icon1.png" alt="" />
							</div>
							<div class="usr-icon2">
								<img src="./assets/images/usr-icon2.png" alt="" />
							</div>
						</div>
						<div class="info-right">
							<div class="info-right-title">{{ 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">
					<!-- <WordCloudMap :data="wordCloudData" :shape="circle" /> -->
					<div
						class="tag-box"
						:class="{
							status0: index % 4 === 0,
							status1: index % 4 === 1,
							status2: index % 4 === 2,
							status3: index % 4 === 3
						}"
						v-for="(tag, index) in curPerson.tagList"
						:key="index"
					>
						{{ tag.industryName }}
					</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.png" 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"
								:key="index"
							>
								<div class="timeline-content">
									{{ item.newsContent }}
								</div>
							</el-timeline-item>
							<!-- <el-timeline-item timestamp="2018/4/3" placement="top">
                <div class="timeline-content">
                  借OBBBA通过势头，在得州巩固军工、能源集团支持，为2026年连任铺路，同时协调党内资源争夺关键摇摆选区。
                </div>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/2" placement="top">
                <div class="timeline-content">
                  特朗普力挺阿灵顿，白宫声明强调法案“美丽且必要”，双方矛盾凸显共和党内
                  ​商业资本与传统能源势力裂痕。
                </div>
              </el-timeline-item> -->
						</el-timeline>
					</div>
					<div class="right-main-box3-footer">
						<div class="btn-more" @click="handleClickMore2">
							<img src="../assets/images/btn-more.png" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog v-model="isShowDialog" class="dialog-box" width="1280">
			<div class="dialog-inner-box">
				<div class="inner-left">
					<div class="info-box">
						<div class="info-top">
							<img :src="defaultAvatar" alt="" />
							<div class="usr-icon1">
								<img src="./assets/images/usr-icon1.png" alt="" />
							</div>
							<div class="usr-icon2">
								<img src="./assets/images/usr-icon2.png" alt="" />
							</div>
						</div>
						<div class="info-footer">
							<div class="info-right-title">{{ 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 class="tag-wrapper" v-if="curPerson.tagList && curPerson.tagList.length">
						<div
							class="tag-box"
							:class="{
								status0: index % 4 === 0,
								status1: index % 4 === 1,
								status2: index % 4 === 2,
								status3: index % 4 === 3
							}"
							v-for="(tag, index) in curPerson.tagList"
							:key="index"
						>
							{{ tag.industryName }}
						</div>
					</div>
					<div class="more">更多议员 ></div>
				</div>
				<div class="inner-right">
					<div class="btn-box">
						<div class="btn" :class="{ btnActive: dialogBoxBtnActive === 0 }" @click="handleClcikDialogBoxBtn(0)">
							新闻动态
						</div>
						<div class="btn" :class="{ btnActive: dialogBoxBtnActive === 1 }" @click="handleClcikDialogBoxBtn(1)">
							人物履历
						</div>
					</div>
					<div class="inner-right-main">
						<el-timeline style="max-width: 840px">
							<el-timeline-item
								:timestamp="item.newsDate"
								placement="top"
								v-for="(item, index) in curPerson.newsList"
								:key="index"
							>
								<div class="timeline-content1">
									<div class="text">
										{{ item.newsContent }}
									</div>
									<div class="pic">
										<img :src="defaultNew" alt="" />
									</div>
								</div>
							</el-timeline-item>
						</el-timeline>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import WordCloudMap from "./WordCloudMap.vue";
import STimeline from "./STimeline.vue";
import { getBillInfo, getBillPerson, getBillEvent, getBillDyqk } from "@/api/bill";
import defaultAvatar from "../assets/images/default-icon1.png";
import defaultNew from "../assets/images/default-icon-news.png";
import defaultBill from "./assets/images/image1.png"

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

// 跳转到人物页面
const handleClickAvatar = item => {
		window.sessionStorage.setItem('curTabName', item.name)
	const routeData = router.resolve({
		path: "/characterPage",
		query: {
			personId: item.id
		}
	});
	window.open(routeData.href, "_blank");
};
// 获取URL地址里面的billId
const billId = ref(route.query.billId);
const dialogBoxBtnActive = ref(0);
const handleClcikDialogBoxBtn = index => {
	dialogBoxBtnActive.value = index;
};

const timelineData = ref([]);

const isShowDialog = ref(false);

const handleClickMore2 = () => {
	isShowDialog.value = true;
};

// 获取基本信息

const basicInfo = ref({});

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%;
	height: 880px;
	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;
			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%;
				}
			}
		}
	}
	.introduction-wrap-left {
		width: 1064px;
		margin-top: 16px;
		.introduction-wrap-left-box1 {
			width: 1064px;
			height: 415px;
			background: #fff;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			.box1-main {
				display: flex;
				height: 394px;
				.box1-left {
					margin-left: 23px;
					width: 247px;
					height: 350px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.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;
							.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;
			background: #fff;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			position: relative;
			.box2-main {
				margin-top: 10px;
				height: calc(100% - 70px); // Subtract header height
				width: 100%;
				.box2-main-center {
					margin-left: 23px;
					border-top: 1px solid rgba(243, 243, 244, 1);
					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;
				.btn-more {
					width: 108px;
					height: 32px;
					cursor: pointer;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.introduction-wrap-right {
		margin-top: 16px;
		margin-left: 16px;
		margin-right: 18px;
		width: 520px;
		height: 845px;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		.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: auto;
						display: flex;
						justify-content: flex-start;
						padding-bottom: 5px;
						&::-webkit-scrollbar {
							height: 4px;
						}
						&::-webkit-scrollbar-thumb {
							border-radius: 4px;
							background: #e1e1e1;
						}
						&::-webkit-scrollbar-track {
							background: transparent;
						}
						.person-item {
							height: 28px;
							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: nowrap;
							flex-shrink: 0;
						}
						.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 {
						img {
							width: 128px;
							height: 128px;
						}
						position: relative;
						.usr-icon1 {
							position: absolute;
							bottom: 0px;
							left: 18px;
							width: 48px;
							height: 48px;
							border-radius: 16px;
							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: 16px;
							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;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 600;
							line-height: 22px;
						}
						.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;
				}
				.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);
				}
			}
			.right-main-box3 {
				.right-main-box3-header {
					margin-left: 22px;
					margin-top: 24px;
					display: flex;
					.icon {
					}
					.title {
						margin-left: 12px;
						height: 22px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 600;
						line-height: 22px;
					}
				}
				.right-main-box3-main {
					margin-top: 18px;
					height: 412px;
					overflow-y: auto;
				}
				.right-main-box3-footer {
					margin-top: 1px;
					display: flex;
					justify-content: center;
					.btn-more {
						width: 108px;
						height: 32px;
						cursor: pointer;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
}

.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: 4px;
						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: 4px;
						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;
					}
					.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-item) {
	padding-bottom: 5px !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;
}
.timeline-content {
	color: rgba(132, 136, 142, 1);
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
}
.timeline-content1 {
	color: rgba(132, 136, 142, 1);
	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>
