<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>
				<!-- <div class="box1-footer">
					<div class="text">{{ "查看更多" }}</div>
					<div class="icon">
						<img src="@/assets/images/icon-double-down.png" alt="" />
					</div>
				</div> -->
			</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-main-tag-box">
						<div class="tag" :class="{ tagActive: activeArea === item }" v-for="(item, index) in areaList" :key="index"
							@click="handleClickArea(item.status)">
							{{ item.industryName }}
						</div>
					</div> -->
					<div class="box2-content" id="box2Chart"></div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="box3">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">主要观点</div>
					<!-- <div class="header-btn-box">
						<div class="btn btnActive">
							{{ "核心发现" }}
						</div>
						<div class="btn">
							{{ "政策建议" }}
						</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="box3-main">
					<div class="box3-main-main">
						<div class="box3-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 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>
							</div>
							<!-- <div class="more">
								<img src="@/assets/icons/open.png" alt="" />
							</div> -->
						</div>
					</div>
					<div class="box3-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>
				<div class="box3-footer">
					<div class="footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="footer-center">
						{{
							`中美经济深度交织，全面脱钩成本高昂且不现实。其核心揭示了三大纽带：生产网络相互依存使强行分离代价巨大；人才双向流动推动创新却成政策博弈焦点；能源领域合作与竞争并存，关乎全球气候治理与经济博弈。报告主张理性竞合，在竞争中找到合作路径。`
						}}
					</div>
					<div class="footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

// 内容摘要
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
			}
		]
	},
	{
		id: 3,
		title: "我是示例标题",
		desc: "我是示例内容",
		tagList: [
			{
				name: "半导体",
				status: 4
			}
		]
	},
	{
		id: 4,
		title: "我是示例标题",
		desc: "我是示例内容",
		tagList: [
			{
				name: "关税",
				status: 2
			},
			{
				name: "跨境电商",
				status: 1
			}
		]
	},
	{
		id: 5,
		title: "我是示例标题",
		desc: "我是示例内容",
		tagList: [
			{
				name: "关税",
				status: 2
			},
			{
				name: "跨境电商",
				status: 1
			}
		]
	},
	{
		id: 6,
		title: "我是示例标题",
		desc: "我是示例内容",
		tagList: [
			{
				name: "关税",
				status: 2
			},
			{
				name: "跨境电商",
				status: 1
			}
		]
	},
	{
		id: 7,
		title: "我是示例标题",
		desc: "我是示例内容",
		tagList: [
			{
				name: "产业脱钩",
				status: 6
			}
		]
	},
	{
		id: 8,
		title: "我是示例标题",
		desc: "我是示例内容",
		tagList: [
			{
				name: "关税",
				status: 2
			},
			{
				name: "跨境电商",
				status: 1
			}
		]
	},
	{
		id: 9,
		title: "我是示例标题",
		desc: "我是示例内容",
		tagList: [
			{
				name: "关税",
				status: 2
			},
			{
				name: "跨境电商",
				status: 1
			}
		]
	},
	{
		id: 10,
		title: "我是示例标题",
		desc: "我是示例内容",
		tagList: [
			{
				name: "关税",
				status: 2
			},
			{
				name: "跨境电商",
				status: 1
			}
		]
	}
]);
// 处理页码改变事件
const currentPage = ref(1);
const total = ref(0)
const handleCurrentChange = page => {
	currentPage.value = page;
	handleGetThinkDynamicsReport();
};
//获取报告主要观点
const handleGetThinkTankReportContent = async () => {
	try {
		const res = await getThinkTankReportContent(router.currentRoute._value.params.id);
		console.log("主要观点", res.data);
		if (res.code === 200 && res.data) {
			majorOpinions.value = res.data.content;
			total.value = res.data.totalElements
		}
	} catch (error) {
		console.error("获取主要观点error", error);
	}
};
onMounted(() => {
	handleGetThinkTankReportAbstract();
	handleGetThinkTankReportContent();
	handleGetThinkTankReportIndustry();

	handleGetThinkTankReportIndustryCloud();
});
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	justify-content: center;
	gap: 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 {
		.box1 {
			margin-top: 17px;
			width: 480px;
			height: 390px;
			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 {
				margin: 5px auto;
				width: 428px;
				height: 315px;
				/* 9行 * 30px/行 = 270px，这里可以稍微调整 */
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 30px;
				letter-spacing: 0px;
				text-align: justify;
				overflow-y: auto;
				// display: -webkit-box;
				// /* 使用Webkit的弹性盒模型 */
				// -webkit-box-orient: vertical;
				// /* 垂直排列 */
				// -webkit-line-clamp: 9;
				// /* 限制显示9行 */
				// overflow: hidden;
				// /* 隐藏超出部分 */
			}

			.box1-footer {
				margin: 0 auto;
				width: 108px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 4px;
				cursor: pointer;

				&:hover {
					background: var(--color-bg-hover);
				}

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

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

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

		.box2 {
			margin-top: 16px;
			width: 480px;
			height: 390px;
			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: 430px;
				height: 320px;
				margin: 0 auto;

				.box2-main-tag-box {
					display: flex;
					flex-wrap: wrap;
					height: 89px;
					box-sizing: border-box;
					padding: 8px 0;
					gap: 8px;

					.tag {
						height: 28px;
						line-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);
						cursor: pointer;
					}

					.tagActive {
						color: var(--color-main-active);
						border: 1px solid var(--color-main-active);
						background: rgba(231, 243, 255, 1);
					}
				}

				.box2-content {
					width: 430px;
					height: 315px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 4px;
					background: rgba(247, 248, 249, 1);
				}
			}
		}
	}

	.right {
		margin-top: 17px;

		.box3 {
			width: 1103px;
			height: 946px;
			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;

			.box3-main {
				width: 1057px;
				height: 800px;
				margin: 0 auto;

				.box3-main-main {
					height: 720px;
					overflow: hidden;

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

							.desc {
								height: 22px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
								letter-spacing: 0px;
								text-align: left;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

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

							height: 22px;
							display: flex;

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

					.box3-item:nth-child(2n-1) {
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						border-top: 1px solid rgba(234, 236, 238, 1);
						background: rgba(247, 248, 249, 1);
					}
				}

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

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