<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> -->
				<AnalysisBox title="经费来源">
					<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 class="source">
						<div class="info"><img src="./images/image-exclamation.png"></div>
						<div class="text"> 数据来源：美国国会官网</div>
					</div>
				</AnalysisBox>
			</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> -->
				<AnalysisBox title="研究领域演变">
					<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>
				</AnalysisBox>
			</div>
			<div class="box box-core-researchers">
				<!-- <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=""
										@error="() => { if (item.imageUrl) item.imageUrl = null; }" />
							</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> -->
				<AnalysisBox title="核心研究人员" width="1104px" height="900px">
					<div class="box3-main">
						<div class="box3-main-top">
							<div id="box3Chart"></div>

						</div>
						<div class="source">
							<div class="info"><img src="./images/image-exclamation.png"></div>
							<div class="text"> 数据来源：美国国会官网</div>
						</div>
						<div class="middle">
							<div class="middle-text">{{ "共" }}{{ personTotal }}{{ "名核心研究人员" }}</div>
							<div class="page">
								<div class="image" @click="handlePersonPrevPage"><img src="./images/left-page-btn.png" alt="" /></div>
								<div class="page-text">{{ personPageText }}</div>
								<div class="image" @click="handlePersonNextPage"><img src="./images/right-page-btn.png" alt="" /></div>
							</div>
						</div>
						<div class="box3-main-bottom">
							<div class="box3-right-item" v-for="(item, index) in personList" :key="index">
								<div class="icon" @click="handleClickPerson(item)">
									<img :src="item.avatarUrl ? item.avatarUrl : DefaultIcon1" alt=""
										@error="() => { if (item.avatarUrl) item.avatarUrl = null; }" />
								</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.introduction }}</div>
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getTreeMapChart from "./utils/treeMapChart";
import { getDecodedParams } from "@/utils/goToPage";
import {
	getThinkTankInfoBasic,
	getThinkTankInfoBranch,

	getThinkTankFundsSource,
	getThinkTankResearchAreae,
	getThinkTankPerson
} from "@/api/thinkTank/overview";

import { useRouter } from "vue-router";

import DefaultIcon1 from '@/assets/icons/default-icon1.png'
import { getPersonSummaryInfo } from "@/api/common/index";
const totalPersonNumber = ref(0)
const router = useRouter();
const thinkTankId = getDecodedParams();
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(thinkTankId);
		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(thinkTankId);
		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({
	totalJe: 0,
	zfJe: 0,
	otherJ: 0
});

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 getThinkTankFundsSource(thinkTankId);
		console.log("获取经费来源统计", res);
		if (res.code === 200 && res.data) {
			// 后端字段已更新：totalAmount/usGovernmentAmount/pentagonContractorAmount
			// 前端卡片仍使用 totalJe/zfJe/otherJ 字段名，因此做兼容映射（不改样式）
			const totalJe = Number(res.data.totalAmount ?? res.data.totalJe ?? 0);
			const zfJe = Number(res.data.usGovernmentAmount ?? res.data.zfJe ?? 0);
			const otherJ = Number(res.data.pentagonContractorAmount ?? res.data.otherJ ?? 0);
			return box1LeftData.value = {
				totalJe: totalJe || 0,   // 为空就用 0
				zfJe: zfJe || 0,         // 为空就用 0
				otherJ: otherJ || 0      // 为空就用 0
			};
		}
	} catch (error) {
		console.error("获取经费来源统计error", error);
	}
};

const handleGetThinkTankFundsSource = async () => {
	try {

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

			// 后端字段已改为 sources；机构名优先 institution，其次 secondInstitution
			const topList = Array.isArray(res.data.sources) ? res.data.sources : []
			const data = topList.map(item => ({
				name: item.institution || item.secondInstitution || "未知机构",
				value: Number(item.amount) || 0,
			}))
			box1ChartData.value = data
			const box1Chart = getPieChart(box1ChartData.value);

			// 图表整体宽度 830px，中间圆形 194*194（半径 97）
			const CHART_WIDTH = 830
			const PIE_OUTER_RADIUS = 97
			const PIE_INNER_RADIUS = Math.round((80 / 110) * PIE_OUTER_RADIUS)
			box1Chart.series[0].radius = [PIE_INNER_RADIUS, PIE_OUTER_RADIUS]

			// 仅覆盖 label：左侧标注 部门左+经费比例右，右侧标注 经费比例左+部门右
			const LABEL_BOX_HEIGHT = 21.41
			const LABEL_OFFSET_UP = 3 + LABEL_BOX_HEIGHT / 2
			const dataList = box1ChartData.value
			const total = dataList.reduce((s, d) => s + (d.value || 0), 0) || 1
			const formatDeptName = (name) => {
				const text = String(name || "");
				const chars = Array.from(text);
				return chars.length > 9 ? `${chars.slice(0, 9).join("")}...` : text;
			};
			box1Chart.series[0].label = {
				...box1Chart.series[0].label,
				alignTo: 'edge',
				offset: [0, -LABEL_OFFSET_UP],
				formatter(params) {
					const valueYi = (params.data.value || 0) / 10000
					const percent = params.percent || 0
					const valueStr = `${valueYi.toFixed(2)}万 ${percent}%`
					let cumulative = 0
					for (let i = 0; i < params.dataIndex; i++) cumulative += dataList[i].value || 0
					const centerAngle = 90 + ((cumulative + (params.data.value || 0) / 2) / total) * 360
					const angleNorm = ((centerAngle % 360) + 360) % 360
					// 左侧仅 270–360° 及跨圈：部门左、经费右；其余(含 180–270° 右下两条)：经费左、部门右
					const isLeftLabel = (angleNorm >= 270 && angleNorm < 360) || centerAngle >= 360
					const deptName = formatDeptName(params.data.name);
					if (isLeftLabel) {
						return `{nameL|${deptName}}{valueR|${valueStr}}`
					}
					return `{valueL|${valueStr}}{nameR|${deptName}}`
				},
				lineHeight: LABEL_BOX_HEIGHT,
				rich: {
					nameL: {
						fontFamily: 'Source Han Sans CN',
						fontSize: 16,
						fontWeight: 700,
						lineHeight: 24,
						color: 'rgba(59, 65, 75, 1)',
						width: 180,
						align: 'left',
						overflow: 'truncate',
						ellipsis: '...',
						letterSpacing: 1
					},
					nameR: {
						fontFamily: 'Source Han Sans CN',
						fontSize: 16,
						fontWeight: 700,
						lineHeight: 24,
						color: 'rgba(59, 65, 75, 1)',
						width: 180,
						align: 'right',
						overflow: 'truncate',
						ellipsis: '...',
						letterSpacing: 1
					},
					valueL: {
						fontFamily: 'Microsoft YaHei',
						fontSize: 14,
						fontWeight: 400,
						lineHeight: 22,
						color: 'rgba(59, 65, 75, 1)',
						align: 'left',
						width: 88,
						padding: [0, 8, 0, 0]
					},
					valueR: {
						fontFamily: 'Microsoft YaHei',
						fontSize: 14,
						fontWeight: 400,
						lineHeight: 22,
						color: 'rgba(59, 65, 75, 1)',
						align: 'left',
						width: 88,
						padding: [0, 0, 0, 8]
					}
				}
			}
			// 标线末端 x 对齐（左右贴齐），图表宽度 830
			box1Chart.series[0].labelLayout = function (params) {
				const isLeft = params.labelRect.x < CHART_WIDTH / 2
				const points = params.labelLinePoints
				points[2][0] = isLeft
					? params.labelRect.x
					: params.labelRect.x + params.labelRect.width
				return {
					labelLinePoints: points
				}
			}

			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(thinkTankId);
		console.log("研究领域演变", res);
		if (res.code === 200 && res.data) {
			timeLineList.value = res.data
		}
	} catch (error) {
		console.error("获取研究领域演变error", error);
	}
};
// 核心研究人员
const handleBox3Chart = () => {
	// 四大区域：顺序与比例 9:6:6:6 → 左侧3×3、中间3×2、右侧3×2、底4–9列一行
	const REGION_ORDER = ['政府部门及国家实验室', '领先科技企业', '顶尖大学与研究机构', '国际人才'];
	const REGION_COLORS = {
		政府部门及国家实验室: 'rgb(80,112,221)',
		领先科技企业: 'rgb(182,214,52)',
		顶尖大学与研究机构: 'rgb(80,83,114)',
		国际人才: 'rgb(255,153,77)'
	};
	const mockRandResearcherCategories = {
		政府部门及国家实验室: {
			商务部: 12,
			财政部: 8,
			能源部: 15,
			国家能源技术实验室: 6,
			其他: 10
		},
		领先科技企业: {
			谷歌: 18,
			微软: 14,
			英伟达: 9,
			英特尔: 11,
			亚马逊: 13,
			其他: 7
		},
		顶尖大学与研究机构: {
			哈佛大学: 22,
			加州大学: 19,
			斯坦福大学: 16,
			麻省理工学院: 14,
			其他: 12
		},
		国际人才: {
			印度: 15,
			日本: 12,
			德国: 10,
			中国: 8,
			其他: 6
		}
	};
	// 政府部门占整块左侧；领先科技企业、顶尖大学各加长 0.5 行，国际人才缩小 0.5 行（右三区比例约 50:50:35）
	const REGION_VALUES = { 政府部门及国家实验室: 135, 领先科技企业: 50, 顶尖大学与研究机构: 50, 国际人才: 35 };
	const treemapData = REGION_ORDER.map(name => {
		const children = Object.keys(mockRandResearcherCategories[name]).map(item => ({
			name: item,
			value: mockRandResearcherCategories[name][item]
		}));
		return {
			name,
			value: REGION_VALUES[name],
			itemStyle: { color: REGION_COLORS[name] },
			children
		};
	});

	const box3Chart = getTreeMapChart(treemapData);
	delete box3Chart.series[0].itemStyle;
	box3Chart.series[0].sort = false;
	// 图表充满 box3-main-top，左右各留 12px
	box3Chart.series[0].left = 0;
	box3Chart.series[0].right = 0;
	box3Chart.series[0].top = 0;
	box3Chart.series[0].bottom = 0;
	// 方块内文字与区域标题统一为黑色，方块内文字加 1px 白色描边（等效 CSS text-stroke: 1px #fff）
	box3Chart.series[0].label = {
		...box3Chart.series[0].label,
		color: 'white',

		fontSize: 16,

		textShadowBlur: 0,
		textShadowOffsetX: 0,
		textShadowOffsetY: 0
	};
	box3Chart.series[0].upperLabel = {
		...box3Chart.series[0].upperLabel,
		color: 'rgb(51,51,51)',
		fontSize: 16,
		fontWeight: 700,
		backgroundColor: 'rgb(247,248,249)',
		lineHeight: 16,
		height: 16,
		padding: 0
	};
	setChart(box3Chart, "box3Chart");
};

const PERSON_PAGE_SIZE = 10;
const personCurrentPage = ref(1);
const box3RightData = ref({
	content: [],
	totalElements: 0
});
const personList = computed(() => (Array.isArray(box3RightData.value?.content) ? box3RightData.value.content : []));
const personTotal = computed(() => Number(box3RightData.value?.totalElements || 0));
const personTotalPages = computed(() => (personTotal.value > 0 ? Math.ceil(personTotal.value / PERSON_PAGE_SIZE) : 1));
const personPageText = computed(() => `${personCurrentPage.value}/${personTotalPages.value}`);

const handleGetThinkPerson = async (page = personCurrentPage.value) => {
	try {
		const safePage = Math.max(1, Number(page) || 1);
		const params = {
			currentPage: safePage,
			pageSize: PERSON_PAGE_SIZE,
			thinkTankId
		}
		const res = await getThinkTankPerson(params);

		console.log("核心研究人员", res);
		if (res.code === 200 && res.data) {
			box3RightData.value = {
				content: Array.isArray(res.data.content) ? res.data.content : [],
				totalElements: Number(res.data.totalElements || 0)
			}
			// 以后端返回页码为准；未返回时使用请求页码
			personCurrentPage.value = Number(res.data.currentPage || res.data.pageNum || safePage);
		}
	} catch (error) {
		console.error("获取核心研究人员error", error);
	}
};

const handlePersonPrevPage = () => {
	if (personCurrentPage.value <= 1) return;
	handleGetThinkPerson(personCurrentPage.value - 1);
};

const handlePersonNextPage = () => {
	if (personCurrentPage.value >= personTotalPages.value) return;
	handleGetThinkPerson(personCurrentPage.value + 1);
};

// 点击人物头像，跳转到人物主页

const handleClickPerson = async item => {
	console.log("person", item);
	const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));
	console.log("personTypeList", personTypeList);

	let type = 0;
	let personTypeName = "";

	const params = {
		personId: item.personId
	};
	try {
		const res = await getPersonSummaryInfo(params);
		console.log("人物全局信息", res);
		if (res.code === 200 && res.data) {
			const arr = personTypeList.filter(t => {
				const typeIdNum = Number(t.typeId);
				const personTypeNum = Number(res.data.personType);
				return !Number.isNaN(typeIdNum) && !Number.isNaN(personTypeNum) && typeIdNum === personTypeNum;
			});
			console.log("arr", arr);
			const route = router.resolve({
				path: "/characterPage",
				query: {

					personId: item.personId
				}
			});
			window.open(route.href, "_blank");


		} else {
			ElMessage.warning("找不到当前人员的类型值！");
			return;
		}
	} catch (error) { }
};
onMounted(() => {
	handleGetThinkTankInfoBasic()
	handleGetThinkTankInfoBranch()
	handleGetThinkTankFundsTotal()
	handleGetThinkTankFundsSource()
	handleGetThinkTankResearchAreae()
	handleGetThinkPerson()

	nextTick(() => {
		handleBox3Chart();
	});
});
</script>

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

	.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: "Source Han Sans CN";
				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;

				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;

					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 {
			margin-bottom: 69px;

			.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;
		/* 三栏：390 + 390 + 900，间距 16×2 */
		height: 1732px;
		margin-top: 16px;
		display: flex;
		flex-direction: column;
		gap: 16px;

		.box {
			width: 1104px;
			height: 390px;
			flex-shrink: 0;
			// 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%);
						display: flex;
						flex-direction: column;

						.card-title {
							height: 24px;
							margin-top: 8px;
							margin-left: 19px;
							color: var(--color-main-active);
							font-family: "Source Han Sans CN";
							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%);
						display: flex;
						flex-direction: column;

						.card-title {
							height: 24px;
							margin-top: 8px;
							margin-left: 19px;
							color: rgba(206, 79, 81, 1);
							font-family: "Source Han Sans CN";
							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%);
						display: flex;
						flex-direction: column;

						.card-title {
							height: 24px;
							margin-top: 8px;
							margin-left: 19px;
							color: rgba(19, 168, 168, 1);
							font-family: "Source Han Sans CN";
							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: 830px;
					height: 300px;
				}
			}

			.source {

				margin-top: 10px;
				margin-left: 240px;

				width: 370px;
				height: 22px;
				display: flex;

				.info {
					width: 16px;
					height: 16px;
					margin-top: 3px;

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

					}


				}

				.text {
					font-family: "Source Han Sans CN";
					font-weight: 400;
					font-size: 14px;
					line-height: 22px;
					letter-spacing: 0px;
					text-align: left;
					color: rgb(132, 136, 142);
					margin-left: 8px;
				}
			}


			.box2-main {
				height: 320px;
				display: flex;
				position: relative;
				padding-left: 111px;
				margin-top: 4px;

				.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: 19px;
					width: 221px;
					height: 134px;
					position: relative;
					box-sizing: border-box;
					padding-left: 13px;
					margin-left: 0;
					border-left: 1px solid #0a57a6;

					.box2-item-header {
						display: flex;
						width: 240px;

						.title {
							color: var(--color-main-active);
							height: 26px;
							font-family: "Source Han Sans CN";
							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: "Source Han Sans CN";
						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;
				flex-direction: column;

				.box3-main-top {
					width: 1100px;
					height: 379px;

					box-sizing: border-box;
					padding-left: 35px;
					padding-top: 7px;

					#box3Chart {
						width: 1035px;
						height: 372px;
					}



				}

				.source {
					margin-left: 35px;
					margin-top: 10px;

					/* 上下0，左右自动居中 */
					width: 370px;
					height: 22px;
					display: flex;

					.info {
						width: 16px;
						height: 16px;
						margin-top: 3px;

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

						}


					}

					.text {
						font-family: "Source Han Sans CN";
						font-weight: 400;
						font-size: 14px;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: left;
						color: rgb(132, 136, 142);
						margin-left: 8px;
					}
				}

				.middle {
					width: 1027px;
					height: 32px;
					margin-left: 43px;
					display: flex;
					justify-content: space-between;
					margin-top: 24px;

					.middle-text {
						font-family: "Source Han Sans CN";
						font-weight: 400;
						font-size: 16px;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
						color: rgb(95, 101, 108);
					}

					.page {
						height: 24px;
						display: flex;
						margin-top: 4px;

						.page-text {
							font-family: "Source Han Sans CN";
							font-weight: 400;
							font-size: 14px;
							line-height: 22px;
							letter-spacing: 0px;
							text-align: center;
							color: rgb(5, 95, 194);
							margin: 1px 8px;
						}

						.image {
							width: 24px;
							height: 24px;

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

				.box3-main-bottom {
					margin-left: 35px;
					margin-top: 24px;
					width: 1044px;
					height: 352px;
					display: flex;
					flex-wrap: wrap;
					column-gap: 44px;
					row-gap: 8px;
					align-content: flex-start;

					.box3-right-item {
						display: flex;
						width: 500px;
						height: 64px;
						align-items: center;

						.icon {
							width: 48px;
							height: 48px;
							border-radius: 50% !important;
							cursor: pointer;
							overflow: hidden;
							flex-shrink: 0;

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

						.info {
							width: calc(100% - 61px);
							margin-left: 13px;

							.info-header {
								display: flex;
								justify-content: space-between;

								.name {
									width: 219px;
									height: 24px;
									color: rgba(59, 65, 75, 1);
									font-family: "Source Han Sans CN";
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
									letter-spacing: 1px;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}

								.position {
									width: 219px;
									height: 22px;
									color: var(--color-main-active);
									font-family: "Source Han Sans CN";
									font-size: 14px;
									font-weight: 400;
									line-height: 22px;
									letter-spacing: 0px;
									text-align: right;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							.info-footer {
								height: 22px;
								color: rgba(95, 101, 108, 1);
								font-family: "Source Han Sans CN";
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
								letter-spacing: 0px;
								text-align: left;
								white-space: nowrap;
								/* 禁止自动换行 */
								overflow: hidden;
								/* 隐藏超出部分 */
								text-overflow: ellipsis;
								/* 显示省略号 */
							}
						}
					}
				}

			}
		}

		.box.box-core-researchers {
			width: 1104px;
			height: 900px;
			margin-bottom: 90px;

			flex-shrink: 0;
		}
	}
}
</style>