<template>
	<div class="wrap">
		<div class="top">
			<WarningPane :warnningLevel="riskSignal?.level" :warnningContent="riskSignal?.content">
			</WarningPane>
		</div>
		<div class="bottom-row">
			<div class="left">
				<div class="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">
					{{ box1Data }}
				</div> -->
					<AnalysisBox title="基本信息" :showAllBtn="true">
						<div class="box1-main">
							<div class="text-box">
								<div class="time">
									<div class="time-title">发布时间:</div>
									<div class="time-content">{{ publishTime }}</div>
								</div>
								<div class="topic">
									<div class="topic-title">报告主题:</div>
									<div class="topic-content">{{ reportTopic }}</div>
								</div>
								<div class="author">
									<div class="author-title">报告作者:</div>
									<div class="author-content">
										<template v-if="Array.isArray(reportAuthors) && reportAuthors.length">
											<span v-if="reportAuthors.length === 1">
												{{ reportAuthors[0].name }}
											</span>

											<!-- 多个作者：显示第一个 + 等 -->
											<span v-else>
												{{ reportAuthors[0].name }}等
											</span>

										</template>
									</div>
								</div>
							</div>
							<div class="author-box">
								<div class="author-item" v-for="(author, idx) in reportAuthors" :key="idx"
									v-if="Array.isArray(reportAuthors) && reportAuthors.length">
									<div class="image"><img :src="author.avatar" alt="" /></div>
									<div class="author-text">
										<div class="author-name">{{ author.name }}</div>
										<div class="author-position">{{ author.job }}</div>
									</div>
								</div>
							</div>
						</div>
					</AnalysisBox>
				</div>
				<div class="box5">
					<AnalysisBox title="报告关键词云" :showAllBtn="true">
						<div class="box5-main">
							<div id="box5Chart"></div>
						</div>
					</AnalysisBox>
				</div>
				<div class="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-content" id="box2Chart"></div>
				</div> -->
					<AnalysisBox title="相关报告" :showAllBtn="true">
						<div class="box2-main">
							<div class="box2-item" v-for="(report, idx) in reportList" :key="idx">
								<div class="box2-item-content">
									<div class="left"><img :src="report.image" alt="" /></div>
									<div class="right-content">
										<div class="report-title">{{ report.name }}</div>
										<div class="report-footer">
											<div class="report-time">{{ report.postDate }}</div>
											<div class="report-footer-right">
												<div class="footer-image">
													<img :src="report.thinktankLogo" alt="" />
												</div>
												<div class="think-name">{{ report.thinktankName }}</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="box2-btn" @click="goToAllThinkTank">
							<div class="btn-text">
								多智库报告观点汇聚分析
							</div>
							<div class="btn-image">
								<img src="../images/btn-right.png" alt="">
							</div>
						</div>
					</AnalysisBox>
				</div>
			</div>
			<div class="right">
				<div class="box3">
					<AnalysisBox title="报告摘要" :showAllBtn="true">
						<div class="box3-main">
							<AiSummary>
								<template #summary-content>
									{{ box1Data }}
								</template>
							</AiSummary>

						</div>
					</AnalysisBox>
				</div>
				<div class="box4">
					<AnalysisBox title="核心论点" :showAllBtn="true">
						<div class="search-box">
							<el-input placeholder="搜索观点" v-model="searchOpinions" style="width: 180px"
								@keyup.enter="handleSearchOpinions" />
							<div class="icon">
								<img src="../images/Line_Search.png" alt="" @click="handleSearchOpinions" />
							</div>
						</div>
						<div class="box4-main">
							<div class="box4-main-main">
								<div class="box4-item" v-for="(item, index) in filteredOpinions" :key="index">
									<div class="top-row">
										<div class="left">
											{{ index + 1 }}
										</div>
										<div class="center">
											<div class="title">{{ item.titleZh }}</div>
											<div>
												<img src="../images/image-open.png" alt="" class="center-image"
													@click="handleOpenReportOriginal(item)" />
											</div>
											<div>
												<img v-if="expandedIndex !== index" src="../images/image-down.png" alt="" class="center-image"
													@click="toggleOpinion(index)" />
												<img v-else src="../images/image-up.png" alt="" class="center-image"
													@click="toggleOpinion(index)" />
											</div>
										</div>
									</div>
									<div v-if="expandedIndex === index" class="desc">
										{{ item.contentZh }}
									</div>
									<!-- <div class="right"> -->
									<!-- <div class="tag" v-for="(val, idx) in item.hylyList" :key="idx">
										{{ val }}
									</div>
									<div class="tag" v-for="(val, idx) in item.serialNum" :key="idx">
										{{ val }}
									</div> -->
									<!-- <AreaTag v-for="(val, idx) in item.hylyList" :key="idx" :tagName="val"></AreaTag>
								</div> -->
									<!-- <div class="more">
								<img src="@/assets/icons/open.png" alt="" />
							</div> -->
								</div>
							</div>
							<div class="box4-main-footer">
								<div class="info">共{{ opinionsTotal }}条核心论点</div>
								<div class="page-box">
									<el-pagination :page-size="pageSize" background layout="prev, pager, next" :total="opinionsTotal"
										@current-change="handleCurrentChange" :current-page="currentPage" />
								</div>
							</div>
						</div>
					</AnalysisBox>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import WarningPane from "@/components/base/WarningPane/index.vue"
import SearchContainer from "@/components/SearchContainer.vue";
import { ref, onMounted, computed, defineProps, nextTick } from "vue";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./utils/worldCloudChart";
import {
	getThinkTankReportAbstract,
	getThinkTankReportContent,
	getThinkTankReportIndustry,
	getThinkTankReportIndustryCloud,
	getThinkTankReportViewpoint
} from "@/api/thinkTank/overview";
import { getChartAnalysis } from "@/api/aiAnalysis/index";
import { useRouter } from "vue-router";
import "echarts-wordcloud";
import AiSummary from '@/components/base/Ai/AiSummary/index.vue'


const router = useRouter();
const goToAllThinkTank = () => {
	const thinkTankId = props?.thinkInfo?.thinkTankId || props?.thinkInfo?.id;
	const route = router.resolve({
		name: "MultiThinkTankViewAnalysis",
		params: { id: thinkTankId }
	});
	window.open(route.href, "_blank");
};


const props = defineProps({
	thinkInfo: {
		type: Object,
		default: () => ({})
	},
	reportList: {
		type: Object,
		default: () => ({})
	}
});

const searchOpinions = ref('');

const handleSearchOpinions = () => {
	currentPage.value = 1;
	handleGetThinkTankReportViewpoint();
};

// 当前展开的核心论点下标（同一时刻只展开一条）
const expandedIndex = ref(null);

const filteredOpinions = computed(() => majorOpinions.value);

const opinionsTotal = computed(() => total.value);

const toggleOpinion = index => {
	if (expandedIndex.value === index) {
		expandedIndex.value = null;
	} else {
		expandedIndex.value = index;
	}
};

const publishTime = computed(() => {
	const info = props.thinkInfo || {};
	// 优先用 times，其次用 reportTime 的日期部分
	if (info.times) return info.times;
	if (info.reportTime && typeof info.reportTime === "string") {
		return info.reportTime.split("T")[0];
	}
	return "";
});

const reportTopic = computed(() => {
	const info = props.thinkInfo || {};
	return info.summary;
});

const reportAuthors = computed(() => {
	const info = props.thinkInfo || {};
	if (Array.isArray(info.authors) && info.authors.length) {
		return info.authors;
	}
	return [];
});
const riskSignal = computed(() => {
	const info = props.thinkInfo || {};
	return info.riskSignal;

});


// 内容摘要
const box1Data =
	ref(`包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。
       为了应对这一挑战,兰德大学的研究人员对美中竞争进行了经济和制度分析,进行了参与式的远见练习,以了解确保美国经济健康的长期路径,并创建了两个经济竞争游戏,探索多个国家在相互交流的同时确保经济健康的动态...`);

//获取内容摘要
const handleGetThinkTankReportAbstract = async () => {
	try {
		const res = await getThinkTankReportAbstract(router.currentRoute._value.params.id);
		console.log("内容摘要", res);
		if (res.code === 200 && res.data) {
			box1Data.value = res.data;
		}
	} catch (error) {
		console.error("获取内容摘要error", error);
	}
};

// 涉及科技领域
const areaList = ref([]);
const activeArea = ref(6);
const handleClickArea = area => {
	activeArea.value = area;
	handleGetThinkTankReportIndustryCloud();
};
const box2Data = ref([
	// {
	// 	name: "通用人工智能",
	// 	value: 100
	// },
	// {
	// 	name: "AI芯片",
	// 	value: 66
	// },
	// {
	// 	name: "计算能力又是",
	// 	value: 72
	// },
	// {
	// 	name: "基准测试",
	// 	value: 88
	// },
	// {
	// 	name: "出口管制",
	// 	value: 78
	// },
	// {
	// 	name: "军事AI",
	// 	value: 85
	// },
	// {
	// 	name: "生态系统",
	// 	value: 88
	// },
	// {
	// 	name: "模型能力",
	// 	value: 89
	// }
]);
// 报告关键词云
const box5Data = ref([]);

//获取科技领域词云
const handleGetThinkTankReportIndustryCloud = async () => {
	try {
		const params = {
			id: router.currentRoute._value.params.id
			// industryId: activeArea.value
		};
		const res = await getThinkTankReportIndustryCloud(params);
		console.log("科技领域词云", res);
		if (res.code === 200 && res.data) {
			const data = (res.data || []).map(item => ({
				name: item.clause,
				value: item.count
			}));
			// 该接口数据用于「报告关键词云」
			box5Data.value = data;

			await nextTick();
			const box5Chart = getWordCloudChart(box5Data.value);
			setChart(box5Chart, "box5Chart");
		} else {
			box5Data.value = [];
		}
	} catch (error) {
		console.error("获取科技领域词云error", error);
		box5Data.value = [];
	}
};
//涉及科技领域
const handleGetThinkTankReportIndustry = async () => {
	try {
		const res = await getThinkTankReportIndustry(router.currentRoute._value.params.id);
		console.log("涉及科技领域", res);
		if (res.code === 200 && res.data) {
			areaList.value = res.data;
		}
	} catch (error) {
		console.error("获取涉及科技领域error", error);
	}
};
// 主要观点
const majorOpinions = ref([
	{
		id: 1,
		title: "我是示例标题",
		desc: "我是示例内容",
		tagList: [
			{
				name: "关税",
				status: 2
			},
			{
				name: "跨境电商",
				status: 1
			}
		]
	},
	{
		id: 2,
		title: "我是示例标题",
		desc: "我是示例内容",
		tagList: [
			{
				name: "私有经济",
				status: 2
			}
		]
	}
]);
//处理点击详情页事件
const handleOpenReportOriginal = item => {
	const route = router.resolve({
		name: "ReportOriginal",
		params: {
			id: router.currentRoute._value.params.id
		},
		query: {
			currentPage: currentPage.value,
			pageSize: pageSize.value,
			opinionId: item?.id ?? "",
			opinionContent: item?.content ?? ""
		}
	});
	window.open(route.href, "_blank");
};
const tabActiveName = ref("报告分析");

const switchTab = name => {
	tabActiveName.value = name;
};
// 处理页码改变事件
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const handleCurrentChange = page => {
	currentPage.value = page;
	handleGetThinkTankReportViewpoint();
};

// 获取报告核心论点（支持搜索）
const handleGetThinkTankReportViewpoint = async () => {
	try {
		const params = {
			reportId: router.currentRoute._value.params.id,
			currentPage: currentPage.value - 1,
			pageSize: pageSize.value,
			keyword: (searchOpinions.value || "").trim(),
			orgIds: ""
		};
		const res = await getThinkTankReportViewpoint(params);
		console.log("核心论点", res.data);
		if (res.code === 200 && res.data) {
			majorOpinions.value = res.data.content || [];

			total.value = res.data.totalElements || 0;
			// 重置展开状态
			expandedIndex.value = null;
		}
	} catch (error) {
		console.error("获取主要观点error", error);
	}
};

// 获取图表分析内容
const box3AnalysisContent = ref("");
const handleGetBox3AnalysisContent = async textJson => {
	const params = {
		text: textJson
	};
	const res = await getChartAnalysis(params);
	console.log("图表解析内容", res);
};

onMounted(() => {
	handleGetThinkTankReportAbstract();
	handleGetThinkTankReportViewpoint();
	handleGetThinkTankReportIndustry();

	handleGetThinkTankReportIndustryCloud();
});
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	justify-content: center;
	gap: 16px;
	padding-bottom: 16px;
	flex-direction: column;

	.top {
		margin-top: 16px;
		width: 100%;
		height: 100%;
		justify-content: center;
		display: flex;
	}

	.bottom-row {

		flex-direction: row;
		justify-content: center;
		display: flex;
		gap: 16px;


		.left {
			gap: 16px;
			display: flex;
			flex-direction: column;

			.box1 {
				margin-top: 17px;
				width: 480px;
				height: 486px;

				// border: 1px solid rgba(234, 236, 238, 1);
				// border-radius: 10px;
				// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				// background: rgba(255, 255, 255, 1);
				.box1-main {
					width: 480px;
					height: 438px;

					.text-box {
						width: 437px;

						margin-left: 22px;
						margin-top: 8px;
						gap: 12px;
						display: flex;
						flex-direction: column;

						.time {
							height: 24px;
							display: flex;
							gap: 4px;

							.time-title {
								width: 88px;

								font-family: "Source Han Sans CN";
								font-weight: 700;
								font-size: 16px;
								line-height: 24px;
								letter-spacing: 1px;
								text-align: left;
								color: rgb(59, 65, 75);
							}

							.time-content {

								width: 345px;
								font-family: "Source Han Sans CN";
								font-weight: 400;
								font-size: 16px;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
								color: rgb(59, 65, 75);
							}
						}

						.topic {

							display: flex;
							gap: 4px;

							.topic-title {
								width: 88px;

								font-family: "Source Han Sans CN";
								font-weight: 700;
								font-size: 16px;
								line-height: 24px;
								letter-spacing: 1px;
								text-align: left;
								color: rgb(59, 65, 75);


							}

							.topic-content {

								width: 345px;
								font-family: "Source Han Sans CN";
								font-weight: 400;
								font-size: 16px;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: left;
								color: rgb(59, 65, 75);
							}
						}

						.author {

							display: flex;
							gap: 4px;

							.author-title {
								width: 88px;

								font-family: "Source Han Sans CN";
								font-weight: 700;
								font-size: 16px;
								line-height: 24px;
								letter-spacing: 1px;
								text-align: left;
								color: rgb(59, 65, 75);
							}

							.author-content {

								width: 345px;
								font-family: "Source Han Sans CN";
								font-weight: 400;
								font-size: 16px;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
								color: rgb(59, 65, 75);
							}
						}
					}

					.author-box {
						width: 437px;
						height: auto;
						/* 改为自适应高度，不要固定 220px */
						max-height: 220px;
						margin-top: 34px;
						margin-left: 18px;
						display: grid;
						grid-template-columns: 1fr 1fr;
						/* 两列等宽 */
						column-gap: 4px;
						/* 左右间距（同一行） */
						row-gap: 8px;
						/* 上下间距（同一列） */

						.author-item {
							width: 213px;
							height: 49px;
							display: flex;
							gap: 11px;

							.image {
								width: 42px;
								height: 42px;
								margin-top: 3px;
								margin-left: 3px;
								display: inline-block;


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

							.author-text {
								width: 154px;
								height: 49px;

								.author-name {
									width: 154px;
									height: 24px;
									font-family: "Source Han Sans CN";
									font-weight: 700;
									font-size: 16px;
									line-height: 24px;
									letter-spacing: 0;
									text-align: left;
									color: rgb(59, 65, 75);
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}

								.author-position {
									width: 154px;
									height: 22px;
									font-family: "Source Han Sans CN";
									font-weight: 400;
									font-size: 14px;
									line-height: 22px;
									letter-spacing: 0;
									text-align: left;
									color: rgb(95, 101, 108);
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
							}

						}

					}
				}


			}

			.box5 {
				width: 480px;
				height: 415px;

				.box5-main {
					width: 480px;
					height: 361px;
					padding-left: 31px;
					padding-right: 32px;
					padding-top: 26px;
					padding-bottom: 43px;
					display: flex;
					box-sizing: border-box;
					overflow: hidden;

					#box5Chart {
						width: 100%;
						height: 100%;
						margin: 0 auto;
						overflow: hidden;
					}
				}
			}

			.box2 {

				width: 480px;
				height: 648px;
				// border: 1px solid rgba(234, 236, 238, 1);
				// border-radius: 10px;
				// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				// background: rgba(255, 255, 255, 1);

				.box2-main {
					width: 436px;
					margin-top: 5px;
					margin-left: 23px;

					.box2-item {
						height: 103px;
						width: 100%;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						border-top: 1px solid rgba(234, 236, 238, 1);

						.box2-item-content {
							width: 100%;
							height: 90px;
							margin-top: 7px;
							display: flex;

							.left {
								width: 56px;
								height: 74px;
								margin-top: 8px;

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

							.right-content {
								margin-left: 13px;
								width: 365px;
								height: 76px;
								margin-top: 7px;

								.report-title {
									height: 48px;
									font-family: "Source Han Sans CN";
									font-weight: 700;
									font-size: 16px;
									line-height: 24px;
									letter-spacing: 0;
									text-align: left;
								}

								.report-footer {
									margin-top: 4px;
									height: 22px;
									justify-content: space-between;
									display: flex;

									.report-time {
										height: 22px;
										width: 97px;
										font-family: "Source Han Sans CN";
										font-weight: 400;
										font-size: 14px;
										line-height: 22px;
										letter-spacing: 0;
										text-align: left;
										color: rgb(95, 101, 108);
									}

									.report-footer-right {
										height: 22px;
										display: flex;
										gap: 6px;

										.footer-image {
											width: 16px;
											height: 16px;
											margin-top: 3px;

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

										.think-name {
											height: 22px;
										}
									}
								}
							}
						}
					}
				}

				.box2-btn {
					margin-top: 16px;
					margin-left: 23px;
					width: 436px;
					height: 36px;
					background-color: rgb(5, 95, 194);
					border-radius: 6px;
					display: flex;

					.btn-text {
						color: rgb(255, 255, 255);
						font-family: "Source Han Sans CN";
						font-weight: 400;
						font-size: 16px;
						line-height: 22px;
						letter-spacing: 0;
						margin-left: 120px;
						margin-top: 7px;


					}

					.btn-image {
						width: 13px;
						height: 8px;

						margin-left: 8px;
						display: inline-block;
						margin-top: 14px;

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

		.right {
			margin-top: 17px;
			gap: 16px;
			display: flex;
			flex-direction: column;

			.box3 {
				width: 1103px;
				height: 890px;

				// border: 1px solid rgba(234, 236, 238, 1);
				// border-radius: 10px;
				// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				// background: rgba(255, 255, 255, 1);
				.box3-main {
					width: 1058px;
					height: 830px;
					margin-top: 3px;
					margin-left: 22px;
					padding-bottom: 22px;




					.box3-top {
						width: 1058px;
						height: 48px;
						background: linear-gradient(rgb(137, 193, 255, 0.1), rgb(255, 255, 255));
						display: flex;

						.top-title {
							width: 1010px;
							height: 32px;
							margin-left: 24px;
							margin-top: 16px;

							.title-image {
								width: 199px;
								height: 32px;

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

						}



					}

					.box3-text {
						width: 1006px;
						margin-top: 24px;
						margin-left: 26px;
						font-family: "Source Han Sans CN";
						font-weight: 400;
						font-size: 16px;
						line-height: 30px;
						letter-spacing: 0px;
						text-align: justify;
						text-justify: inter-ideograph;
					}
				}


			}

			.box4 {
				width: 1103px;
				height: 965px;
				// border: 1px solid rgba(234, 236, 238, 1);
				// border-radius: 10px;
				// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				// background: rgba(255, 255, 255, 1);
				position: relative;

				.search-box {
					display: flex;
					width: 180px;
					height: 32px;
					box-sizing: border-box;
					border: 1px solid rgba(230, 231, 232, 1);
					border-radius: 4px;
					background: rgba(255, 255, 255, 1);
					position: relative;
					margin-top: 3px;
					margin-bottom: 16px;
					margin-left: 23px;

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

						cursor: pointer;
						position: absolute;
						right: 8px;
						top: 8px;

						display: flex;
						justify-content: flex-end;

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

				.box4-main {
					width: 1057px;

					margin: 0 auto;

					.box4-main-main {
						height: 767px;
						overflow: hidden;

						.box4-item {
							width: 1057px;
							box-sizing: border-box;
							border-radius: 4px;
							display: flex;
							flex-direction: column;
							position: relative;

							.top-row {
								display: flex;
								align-items: flex-start;
							}

							.left {
								margin-top: 24px;
								margin-left: 15px;
								width: 24px;
								height: 24px;
								border-radius: 12px;
								line-height: 24px;
								text-align: center;
								background: rgba(231, 243, 255, 1);
								color: var(--color-main-active);
								font-family: Microsoft YaHei;
								font-size: 12px;
								font-weight: 400;
								letter-spacing: 0px;
							}

							.center {
								min-height: 64px;

								margin-left: 13px;
								display: flex;
								align-items: center;
								// overflow: hidden;
								// text-overflow: ellipsis;
								// white-space: nowrap;

								.title {
									margin-top: 12px;
									width: 918px;
									// height: 55px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 26px;
									letter-spacing: 0px;
									text-align: left;
									overflow: hidden;
									// text-overflow: ellipsis;
									// white-space: nowrap;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
								}

								.center-image {
									width: 16px;
									height: 24px;
									margin-top: 12px;
									margin-left: 18px;
								}


							}

							.right {
								margin-top: 26px;
								width: 180px;
								height: 22px;
								display: flex;
								margin-top: 26px;
								margin-left: 20px;

								height: 22px;
								display: flex;
								gap: 4px;

								.tag {
									height: 22px;
									padding: 0 8px;
									box-sizing: border-box;
									border: 1px solid rgba(217, 247, 190, 1);
									border-radius: 4px;
									background: rgba(246, 255, 237, 1);
									color: rgba(82, 196, 26, 1);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
									line-height: 20px;
								}
							}

							.more {
								width: 16px;
								height: 16px;
								position: absolute;
								top: 28px;
								right: 20px;

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

							.desc {
								width: 950px;
								margin-top: 22px;
								margin-left: 52px; // 24(left) + 13(center margin) + 一点间距

								color: rgb(59, 65, 75);
								font-family: "Source Han Sans CN";
								font-weight: 400;
								/* Regular 常规 */
								font-size: 16px;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
								/* 两端对齐 */
							}
						}

						.box4-item {
							border-bottom: 1px solid rgba(234, 236, 238, 1);
							border-top: 1px solid rgba(234, 236, 238, 1);

						}
					}

					.box4-main-footer {
						height: 80px;
						display: flex;
						justify-content: space-between;
						padding: 30px 5px;

						.info {
							color: rgba(132, 136, 142, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 18px;
							letter-spacing: 0px;
							text-align: left;
						}
					}
				}

				.box4-footer {
					position: absolute;
					left: 22px;
					bottom: 19px;
					width: 1057px;
					height: 64px;
					box-sizing: border-box;
					border: 1px solid rgba(231, 243, 255, 1);
					border-radius: 4px;
					background: rgba(246, 250, 255, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 13px;

					.footer-left {
						width: 19px;
						height: 20px;

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

					.footer-center {
						width: 964px;
						height: 48px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
					}

					.footer-right {
						width: 24px;
						height: 24px;

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

:deep(.analysis-box-wrapper .wrapper-header) {
	height: 54px !important;
	display: flex;
	align-items: center;

	.header-title>div {
		line-height: 54px;
	}
}
</style>
