<template>
	<div class="wrap">
		<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-for="(author, idx) in reportAuthors" :key="idx">
											{{ author.name }}
											<span v-if="idx < reportAuthors.length - 1">、</span>
										</span>
									</template>
								</div>
							</div>
						</div>
						<div class="author-box" v-for="(author, idx) in reportAuthors" :key="idx"
							v-if="Array.isArray(reportAuthors) && reportAuthors.length">
							<div class="author-item">
								<div class="image"><img :src="author.avatar" :alt="reportAuthors[0].name" /></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="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">
						<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">
						<div class="box3-top">
							<div class="top-title">
								<div class="title-image">
									<img src="../images/title-image.png" alt="" />
								</div>
							</div>
						</div>
						<div class="box3-text"> {{ box1Data }}</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="box4">
				<AnalysisBox title="核心论点" :showAllBtn="true">
					<div class="box4-main">
						<div class="box4-main-main">
							<div class="box4-item" v-for="(item, index) in majorOpinions" :key="index">
								<div class="left">
									{{ index + 1 }}
								</div>
								<div class="center">
									<div class="title">{{ item.content }}</div>
									<div>
										<img src="../images/image-open.png" alt="" class="center-image"
											@click="handleOpenReportOriginal(item)" />
									</div>
									<!-- <div class="desc">{{ item.econtent }}</div> -->
								</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">共{{ total }}条核心论点</div>
							<div class="page-box">
								<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
									@current-change="handleCurrentChange" :current-page="currentPage" />
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, computed, defineProps } from "vue";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./utils/worldCloudChart";
import {
	getThinkTankReportAbstract,
	getThinkTankReportContent,
	getThinkTankReportIndustry,
	getThinkTankReportIndustryCloud
} from "@/api/thinkTank/overview";
import { getChartAnalysis } from "@/api/aiAnalysis/index";
import { useRouter } from "vue-router";
const router = useRouter();
import "echarts-wordcloud";

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

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 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 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 => {
				data.push({
					name: item.clause,
					value: item.count
				});
				box2Data.value = data;
				const box2Chart = getWordCloudChart(box2Data.value);
				setChart(box2Chart, "box2Chart");
			});
		}
	} catch (error) {
		console.error("获取科技领域词云error", error);
	}
};
//涉及科技领域
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;
	handleGetThinkTankReportContent();
};
//获取报告主要观点
const handleGetThinkTankReportContent = async () => {
	try {
		const params = {
			id: router.currentRoute._value.params.id,
			currentPage: currentPage.value - 1,
			pageSize: pageSize.value
		};
		const res = await getThinkTankReportContent(params);
		console.log("主要观点", res.data);
		if (res.code === 200 && res.data) {
			majorOpinions.value = res.data.content || [];
			handleGetBox3AnalysisContent(majorOpinions.value);
			total.value = res.data.totalElements || 0;
		}
	} 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();
	handleGetThinkTankReportContent();
	handleGetThinkTankReportIndustry();

	handleGetThinkTankReportIndustryCloud();
});
</script>

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

	.box-header {
		width: 100%;
		height: 50px;
		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: 15px;
			right: 83px;
			display: flex;
			justify-content: flex-end;
			gap: 8px;

			.btn {
				height: 28px;
				padding: 0 8px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 28px;
			}

			.btnActive {
				color: var(--color-main-active);
				border: 1px solid var(--color-main-active);
			}
		}

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

	.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 {
						height: 24px;
						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: 220px;
					margin-top: 34px;
					margin-left: 18px;

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

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

					}

				}
			}


		}

		.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: 545px;

			// 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: 466px;
				margin-top: 3px;
				margin-left: 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;

			.box4-main {
				width: 1057px;

				margin: 0 auto;

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

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

						.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 {
							height: 64px;
							width: 910px;
							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%;
							}
						}
					}

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