<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.imageUrl" 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.foundingDate }}年</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.nature }}</div>
					</div>
					<div class="left-top-item">
						<div class="item-left">{{ "员工数量：" }}</div>
						<div class="item-right">约 {{ basicInfo.memnum }}名员工</div>
					</div>
					<div class="left-top-item">
						<div class="item-left">{{ "年度预算：" }}</div>
						<div class="item-right">约{{ basicInfo.budget }}亿美元</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" v-for="item in worldInfo">
						<div class="item-left">{{ item.area }}:</div>
						<div class="item-right">{{ item.city }}</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.totalJe / 100000000 }}亿美元</div>
						</div>
						<div class="card2">
							<div class="card-title">{{ "政府部门" }}</div>
							<div class="card-num">{{ box1LeftData.zfJe / 100000000 }}亿美元</div>
						</div>
						<div class="card3">
							<div class="card-title">{{ "其他机构" }}</div>
							<div class="card-num">{{ box1LeftData.otherJ / 100000000 }}亿美元</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.describe }}
						</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" @click="handleClickPerson(item)">
								<img :src="item.imageUrl?item.imageUrl:DefaultIcon1" alt="" />
							</div>
							<div class="info">
								<div class="info-header">
									<div class="name">{{ item.name }}</div>
									<div class="position">{{ item.positionTitle }}</div>
								</div>
								<div class="info-footer">{{ item.describe }}</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 {
	getThinkTankInfoBasic,
	getThinkTankInfoBranch,
	getThinkTankFundsTotal,
	getThinkTankFundsSource,
	getThinkTankResearchAreae,
	getThinkTankPerson
} from "@/api/thinkTank/overview";

import { useRouter } from "vue-router";

import DefaultIcon1 from '@/assets/icons/default-icon1.png'

const router = useRouter();
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亿美元 "
});


// getThinkTankInfoBasic
const handleGetThinkTankInfoBasic = async () => {
	try {

		const res = await getThinkTankInfoBasic(router.currentRoute._value.params.id);
		console.log("基本信息", res);
		if (res.code === 200 && res.data) {
			basicInfo.value = res.data
		}
	} catch (error) {
		console.error("获取基本信息error", error);
	}
};
// 全球分支机构
const worldInfo = ref({
	position1: "圣莫尼卡（总部）、华盛顿特区、匹兹堡、波士顿",
	position2: "英国剑桥、比利时布鲁塞尔",
	position3: "卡塔尔多哈",
	position4: "堪培拉 "
});


// 全球分支机构
const handleGetThinkTankInfoBranch = async () => {
	try {

		const res = await getThinkTankInfoBranch(router.currentRoute._value.params.id);
		console.log("全球分支机构", res);
		if (res.code === 200 && res.data) {

			// 创建一个对象来存储分组后的数据
			const groupedData = {};

			// 遍历数据，按 area 分组
			res.data.forEach(item => {
				if (!groupedData[item.area]) {
					groupedData[item.area] = {
						area: item.area,
						city: []
					};
				}
				groupedData[item.area].city.push(item.city);
			});

			// 将每个分组中的 city 转换为逗号分隔的字符串
			const result = Object.values(groupedData).map(group => ({
				area: group.area,
				city: group.city.join(", ")
			}));
			worldInfo.value = result
		}
	} catch (error) {
		console.error("获取全球分支机构error", error);
	}
};

// 经费来源
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 handleGetThinkTankFundsTotal = async () => {
	try {

		const res = await getThinkTankFundsTotal(router.currentRoute._value.params.id);
		console.log("获取经费来源统计", res);
		if (res.code === 200 && res.data) {
			box1LeftData.value = res.data
		}
	} catch (error) {
		console.error("获取经费来源统计error", error);
	}
};

const handleGetThinkTankFundsSource = async () => {
	try {

		const res = await getThinkTankFundsSource(router.currentRoute._value.params.id);
		console.log("获取经费来源", res);
		if (res.code === 200 && res.data) {

			let data = []
			res.data.map(item => {
				data.push({
					name: item.institution,
					value: item.amount,
				})
			})
			box1ChartData.value = data
			const box1Chart = getPieChart(box1ChartData.value);
			setChart(box1Chart, "box1Chart");
		}
	} catch (error) {
		console.error("获取经费来源error", error);
	}
};
// 研究领域演变
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 handleGetThinkTankResearchAreae = async () => {
	try {

		const res = await getThinkTankResearchAreae(router.currentRoute._value.params.id);
		console.log("研究领域演变", res);
		if (res.code === 200 && res.data) {
			timeLineList.value = res.data
		}
	} catch (error) {
		console.error("获取研究领域演变error", error);
	}
};
// 核心研究人员
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");
};

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 handleGetThinkPerson = async () => {
	try {

		const res = await getThinkTankPerson(router.currentRoute._value.params.id);
		console.log("核心研究人员", res);
		if (res.code === 200 && res.data) {
			box3RightData.value = res.data
		}
	} catch (error) {
		console.error("获取核心研究人员error", error);
	}
};

// 点击人物头像，跳转到人物主页
const handleClickPerson = (item) => {
	console.log('item',item);
	window.sessionStorage.setItem("curTabName", item.name)
	const route = router.resolve({
		path: "/characterPage",
		query: {
			type: 3 // 1 2 3
		}
	});
	window.open(route.href, "_blank");
};

onMounted(() => {
	handleGetThinkTankInfoBasic()
	handleGetThinkTankInfoBranch()
	handleGetThinkTankFundsTotal()
	handleGetThinkTankFundsSource()
	handleGetThinkTankResearchAreae()
	handleGetThinkPerson()

	handleBox3Chart();
});
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100%;
	display: flex;
	gap: 16px;

	.left {
		margin-top: 16px;
		width: 480px;
		height: 100%;
		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: 6px;
					width: 800px;
					height: 300px;
				}
			}

			.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: var(--color-main-active);
							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: 366px;
					// margin-left: 10px;
					margin: 0;
				}

				.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;
							cursor: pointer;

							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;
								white-space: nowrap;
								/* 禁止自动换行 */
								overflow: hidden;
								/* 隐藏超出部分 */
								text-overflow: ellipsis;
								/* 显示省略号 */
							}
						}
					}
				}
			}
		}
	}
}
</style>