<template>
	<div class="wrap">
		<div class="left">
			<div class="left-top">
				<div class="left-box-header">
					<div class="icon"></div>
					<div class="title">{{ "基本信息" }}</div>
				</div>
				<div class="left-top-main">
					<div class="img-box">
						<img :src="basicInfo.img" alt="" />
					</div>
					<div class="left-top-item">
						<div class="item-left">{{ "国家：" }}</div>
						<div class="item-right">{{ basicInfo.country }}</div>
					</div>
					<div class="left-top-item">
						<div class="item-left">{{ "成立时间：" }}</div>
						<div class="item-right">{{ basicInfo.time }}</div>
					</div>
					<div class="left-top-item">
						<div class="item-left">{{ "总部位置：" }}</div>
						<div class="item-right">{{ basicInfo.position }}</div>
					</div>
					<div class="left-top-item">
						<div class="item-left">{{ "机构性质：" }}</div>
						<div class="item-right">{{ basicInfo.type }}</div>
					</div>
					<div class="left-top-item">
						<div class="item-left">{{ "员工数量：" }}</div>
						<div class="item-right">{{ basicInfo.num }}</div>
					</div>
					<div class="left-top-item">
						<div class="item-left">{{ "年度预算：" }}</div>
						<div class="item-right">{{ basicInfo.money }}</div>
					</div>
				</div>
			</div>
			<div class="left-bottom">
				<div class="left-box-header">
					<div class="icon"></div>
					<div class="title">{{ "全球分支机构" }}</div>
				</div>
				<div class="left-bottom-main">
					<div class="left-bottom-item">
						<div class="item-left">{{ "北美:" }}</div>
						<div class="item-right">{{ worldInfo.position1 }}</div>
					</div>
					<div class="left-bottom-item">
						<div class="item-left">{{ "欧洲:" }}</div>
						<div class="item-right">{{ worldInfo.position2 }}</div>
					</div>
					<div class="left-bottom-item">
						<div class="item-left">{{ "中东:" }}</div>
						<div class="item-right">{{ worldInfo.position3 }}</div>
					</div>
					<div class="left-bottom-item">
						<div class="item-left">{{ "澳大利亚:" }}</div>
						<div class="item-right">{{ worldInfo.position4 }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="box">
				<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-icon1.png" alt="" />
						</div>
						<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-main-left">
						<div class="card1">
							<div class="card-title">{{ "总计" }}</div>
							<div class="card-num">{{ box1LeftData.total }}</div>
						</div>
						<div class="card2">
							<div class="card-title">{{ "政府部门" }}</div>
							<div class="card-num">{{ box1LeftData.gov }}</div>
						</div>
						<div class="card3">
							<div class="card-title">{{ "其他机构" }}</div>
							<div class="card-num">{{ box1LeftData.other }}</div>
						</div>
					</div>
					<div class="box1-main-right" id="box1Chart"></div>
				</div>
			</div>
			<div class="box">
				<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-icon1.png" alt="" />
						</div>
						<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-arrow-left">
						<img src="@/assets/images/icon/card-btn-left.png" alt="" />
					</div>
					<div class="box2-arrow-right">
						<img src="@/assets/images/icon/card-btn-right.png" alt="" />
					</div>
					<div class="box2-line-box"></div>
					<div
						class="box2-item"
						:class="{ box2ItemFooter: index % 2 }"
						v-for="(item, index) in timeLineList"
						:key="index"
					>
						<div class="point" :class="{ pointFooter: index % 2 }">
							<img src="./images/point.png" alt="" />
						</div>
						<div class="box2-item-header">
							<div class="title">{{ item.time }}</div>
						</div>
						<div class="box2-item-content">
							{{ item.content }}
						</div>
					</div>
				</div>
			</div>
			<div class="box">
				<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-icon1.png" alt="" />
						</div>
						<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-left" id="box3Chart"></div>
					<div class="box3-main-right">
						<div class="box3-right-item" v-for="(item, index) in box3RightData" :key="index">
							<div class="icon">
								<img :src="item.img" alt="" />
							</div>
							<div class="info">
								<div class="info-header">
									<div class="name">{{ item.name }}</div>
									<div class="position">{{ item.postion }}</div>
								</div>
								<div class="info-footer">{{ item.desc }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getTreeMapChart from "./utils/treeMapChart";

import InfoImg from "./images/img.png";
import Icon1 from "./images/icon1.png";
import Icon2 from "./images/icon2.png";
import Icon3 from "./images/icon3.png";
import Icon4 from "./images/icon4.png";
import Icon5 from "./images/icon5.png";

const basicInfo = ref({
	img: InfoImg,
	country: "美国",
	time: "1948年",
	position: "美国加利福尼亚州圣莫尼卡 ",
	type: "非营利性研究与分析机构 ",
	num: "约1,700名员工 ",
	money: "约3.5亿美元 "
});

const worldInfo = ref({
	position1: "圣莫尼卡（总部）、华盛顿特区、匹兹堡、波士顿",
	position2: "英国剑桥、比利时布鲁塞尔",
	position3: "卡塔尔多哈",
	position4: "堪培拉 "
});

const box1LeftData = ref({
	total: "4.358亿美元",
	gov: "3.271亿美元",
	other: "1.087亿美元"
});

const box1ChartData = ref([
	{
		name: "半导体",
		value: 50,
		color: "#4096FF"
	},
	{
		name: "电子设备",
		value: 46,
		color: "#FFA39E"
	},
	{
		name: "显示技术",
		value: 40,
		color: "#ADC6FF"
	},
	{
		name: "新能源",
		value: 32,
		color: "#FFC069"
	},
	{
		name: "通信设备",
		value: 31,
		color: "#B5F5EC"
	},
	{
		name: "汽车",
		value: 30,
		color: "#B37FEB"
	},
	{
		name: "其他",
		value: 24,
		color: "#D6E4FF"
	}
]);

const timeLineList = ref([
	{
		time: "2025年7月25日",
		content: "商务部已成立AI出口计划办公室，并开始招募专业人员。"
	},
	{
		time: "2025年7月31日",
		content: "英伟达、微软、谷歌等企业已提交初步技术栈提案。"
	},
	{
		time: "2025年8月5日",
		content: "国务院开始与盟友国家进行初步磋商。"
	},
	{
		time: "2025年8月9日",
		content: "国防部、能源部安全审查流程尚未最终确定。"
	},
	{
		time: "2025年8月12日",
		content: "商务部已成立AI出口计划办公室，并开始招募专业人员。"
	}
]);

const box3RightData = ref([
	{
		img: Icon1,
		name: "杰森·马西尼 ​",
		postion: "兰德公司总裁兼首席执行官",
		desc: "曾任职于哈佛大学经济学院、美国财政部"
	},
	{
		img: Icon2,
		name: "安德鲁·R·霍恩  ​",
		postion: "高级副总裁,研究与分析",
		desc: "曾任职于白宫科技政策顾问办公室"
	},
	{
		img: Icon3,
		name: "杰森·马西尼 ​",
		postion: "兰德公司总裁兼首席执行官",
		desc: "日籍研究院，毕业于斯坦福大学"
	},
	{
		img: Icon4,
		name: "梅丽莎·罗 ​",
		postion: "副总裁,全球研究人才",
		desc: "曾任职于美国国防部"
	},
	{
		img: Icon5,
		name: "安妮塔·钱德拉  ​ ​",
		postion: "副总裁兼主任,兰德社会和经济福祉",
		desc: "曾任职于哈佛大学经济学院、美国商务部"
	}
]);

const handleBox3Chart = () => {
	// 将分类数据转换为树状图格式
	const treemapData = [];
	const mockRandResearcherCategories = {
		政府部门及国家实验室: {
			商务部: 12,
			财政部: 8,
			能源部: 15,
			国家能源技术实验室: 6,
			其他: 10
		},
		领先科技企业: {
			谷歌: 18,
			微软: 14,
			英伟达: 9,
			英特尔: 11,
			亚马逊: 13,
			其他: 7
		},
		顶尖大学与研究机构: {
			哈佛大学: 22,
			加州大学: 19,
			斯坦福大学: 16,
			麻省理工学院: 14,
			其他: 12
		},
		国际人才: {
			印度: 15,
			日本: 12,
			德国: 10,
			中国: 8,
			其他: 6
		}
	};
	Object.keys(mockRandResearcherCategories).forEach(category => {
		const children = Object.keys(mockRandResearcherCategories[category]).map(item => ({
			name: item,
			value: mockRandResearcherCategories[category][item]
		}));
		treemapData.push({
			name: category,
			value: children.reduce((sum, item) => sum + item.value, 0),
			children: children
		});
	});

	const box3Chart = getTreeMapChart(treemapData);
	setChart(box3Chart, "box3Chart");
};

onMounted(() => {
	const box1Chart = getPieChart(box1ChartData.value);
	setChart(box1Chart, "box1Chart");

	handleBox3Chart();
});
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100%;
	display: flex;
	gap: 16px;
	.left {
		margin-top: 16px;
		width: 480px;
		height: 796px;
		box-sizing: border-box;
		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);
		.left-box-header {
			display: flex;
			.icon {
				margin-top: 5px;
				width: 8px;
				height: 16px;
				border-radius: 0 4px 4px 0;
				background: var(--color-main-active);
			}
			.title {
				margin-left: 14px;
				color: var(--color-main-active);
				font-family: Microsoft YaHei;
				font-size: 20px;
				font-weight: 700;
				line-height: 26px;
				letter-spacing: 0px;
				text-align: left;
			}
		}
		.left-top {
			margin-top: 14px;
			height: 515px;
			.img-box {
				width: 437px;
				height: 204px;
				margin: 0 auto;
				margin-top: 16px;
				margin-bottom: 22px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.left-top-item {
				display: flex;
				margin-top: 12px;
				width: 332px;
				height: 24px;
				margin-left: 34px;
				.item-left {
					width: 88px;
					height: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 1px;
					text-align: left;
				}
				.item-right {
					width: 240px;
					height: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: left;
				}
			}
		}
		.left-bottom {
			.left-bottom-main {
				margin-top: 4px;
				.left-bottom-item {
					display: flex;
					width: 354px;
					margin-left: 34px;
					margin-top: 12px;
					.item-left {
						width: 88px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 1px;
						text-align: left;
					}
					.item-right {
						margin-left: 4px;
						width: 240px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
					}
				}
			}
		}
	}
	.right {
		width: 1104px;
		height: 1245px;
		.box {
			width: 1104px;
			height: 390px;
			margin-top: 16px;
			box-sizing: border-box;
			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);
			.box-header {
				height: 56px;
				display: flex;
				position: relative;
				.header-left {
					margin-top: 20px;
					width: 8px;
					height: 20px;
					border-radius: 0 4px 4px 0;
					background: var(--color-main-active);
				}
				.title {
					margin-left: 14px;
					margin-top: 20px;
					height: 16px;
					line-height: 16px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: 700;
					line-height: 16px;
				}
				.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%;
						}
					}
				}
			}
			.box1-main {
				display: flex;
				.box1-main-left {
					width: 156px;
					margin-left: 41px;
					margin-top: 26px;
					.card1 {
						width: 156px;
						height: 72px;
						border-radius: 4px;
						background: linear-gradient(180deg, rgba(230, 244, 255, 1), rgba(230, 244, 255, 0) 100%);
						.card-title {
							height: 24px;
							margin-top: 8px;
							margin-left: 19px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
						.card-num {
							margin-top: 5px;
							margin-left: 19px;
							height: 24px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
					}
					.card2 {
						margin-top: 20px;
						width: 156px;
						height: 72px;
						border-radius: 4px;
						background: linear-gradient(180deg, rgba(255, 241, 240, 1), rgba(255, 241, 240, 0) 100%);
						.card-title {
							height: 24px;
							margin-top: 8px;
							margin-left: 19px;
							color: rgba(206, 79, 81, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
						.card-num {
							margin-top: 5px;
							margin-left: 19px;
							height: 24px;
							color: rgba(206, 79, 81, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
					}
					.card3 {
						margin-top: 20px;
						width: 156px;
						height: 72px;
						border-radius: 4px;
						background: linear-gradient(180deg, rgba(230, 255, 251, 1), rgba(230, 255, 251, 0) 100%);
						.card-title {
							height: 24px;
							margin-top: 8px;
							margin-left: 19px;
							color: rgba(19, 168, 168, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
						.card-num {
							margin-top: 5px;
							margin-left: 19px;
							height: 24px;
							color: rgba(19, 168, 168, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
					}
				}
				.box1-main-right {
					margin-left: 38px;
					margin-top: 26px;
					width: 800px;
					height: 270px;
				}
			}
			.box2-main {
				height: 320px;
				display: flex;
				position: relative;
				padding-left: 150px;
				.box2-arrow-left {
					width: 24px;
					height: 48px;
					position: absolute;
					left: 0;
					top: 130px;
					z-index: 999;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.box2-arrow-right {
					width: 24px;
					height: 48px;
					position: absolute;
					right: 0;
					top: 130px;
					z-index: 999;
					img {
						width: 100%;
						height: 100%;
					}
				}

				.box2-line-box {
					position: absolute;
					left: 0;
					top: 150px;
					height: 8px;
					width: 1100px;
					background: url("./images/line-bg.png") repeat;
				}
				.box2-item {
					margin-top: 4px;
					width: 300px;
					height: 150px;
					position: relative;
					box-sizing: border-box;
					padding-left: 13px;
					margin-left: -100px;
					border-left: 1px solid #0a57a6;
					.box2-item-header {
						display: flex;
						width: 240px;
						.title {
							color: rgba(10, 87, 166, 1);
							height: 26px;
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
						}
					}
					.box2-item-content {
						width: 210px;
						min-height: 48px;
						max-height: 96px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
						line-height: 24px;
						overflow: hidden;
					}
					.point {
						position: absolute;
						left: -8px;
						bottom: -7px;
						width: 15px;
						height: 15px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.pointFooter {
						position: absolute;
						left: -8px;
						top: -7px;
						width: 15px;
						height: 15px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.time {
						height: 24px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 1px;
						text-align: justify;

						position: absolute;
						bottom: -36px;
						left: 0;
					}
				}
				.box2ItemFooter {
					margin-top: 154px;
					margin-left: -100px;
					box-sizing: border-box;
					padding-top: 20px;
				}
			}

			.box3-main {
				display: flex;
				.box3-main-left {
					width: 536px;
					height: 326px;
					margin-left: 10px;
				}
				.box3-main-right {
					margin-left: 10px;
					width: 536px;
					height: 326px;
					.box3-right-item {
						display: flex;
						width: 520px;
						height: 64px;
						align-items: center;
						.icon {
							width: 48px;
							height: 48px;
							margin-left: 8px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.info {
							width: 459px;
							margin-left: 13px;
							.info-header {
								display: flex;
								justify-content: space-between;
								.name {
									height: 24px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
									letter-spacing: 1px;
								}
								.position {
									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: right;
								}
							}
							.info-footer {
								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;
							}
						}
					}
				}
			}
		}
	}
}
</style>