<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)"
						>
							{{ item }}
						</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">
								{{ item.id }}
							</div>
							<div class="center">
								<div class="title">{{ item.title }}</div>
								<div class="desc">{{ item.desc }}</div>
							</div>
							<div class="right">
								<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">
									{{ val.name }}
								</div>
							</div>
							<div class="more">
								<img src="@/assets/icons/open.png" alt="" />
							</div>
						</div>
					</div>
					<div class="box3-main-footer">
						<div class="info">
							{{ `共105项调查` }}
						</div>
						<div class="page-box">
							<el-pagination :page-size="10" background layout="prev, pager, next" :total="120" />
						</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";

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

// 涉及科技领域
const areaList = ref(["人工智能", "半导体与高科技", "经济与贸易", "地缘政治", "军事与安全", "国际规则与多边体系"]);
const activeArea = ref("人工智能");
const handleClickArea = area => {
	activeArea.value = area;
};
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 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
			}
		]
	}
]);

onMounted(() => {
	const box2Chart = getWordCloudChart(box2Data.value);
	setChart(box2Chart, "box2Chart");
});
</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: 282px;
				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;
			}
			.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: 231px;
					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 {
							width: 770px;
							margin-left: 13px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							.title {
								margin-top: 12px;
								height: 26px;
								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;
							}
							.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;
							}
						}
						.right {
							margin-top: 26px;
							width: 180px;
							height: 22px;
							display: flex;
							gap: 8px;
							justify-content: flex-end;
							.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>