<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-btn-box">
						<div class="btn" @click="handleClickBox1Btn(1)">
							<el-button type="primary" plain v-if="box1BtnActive === 1">仪器数量</el-button>
							<el-button type="info" plain v-else>仪器数量</el-button>
						</div>
						<div class="btn" @click="handleClickBox1Btn(2)">
							<el-button type="primary" plain v-if="box1BtnActive === 2">进口率</el-button>
							<el-button type="info" plain v-else>进口率</el-button>
						</div>
						<div class="btn" @click="handleClickBox1Btn(3)">
							<el-button type="primary" plain v-if="box1BtnActive === 3">仪器类型</el-button>
							<el-button type="info" plain v-else>仪器类型</el-button>
						</div>
						<div class="btn" @click="handleClickBox1Btn(4)">
							<el-button type="primary" plain v-if="box1BtnActive === 4">进口率变化</el-button>
							<el-button type="info" plain v-else>进口率变化</el-button>
						</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="box1-main">
					<div id="chart1" class="box1-chart" v-show="box1BtnActive === 1"></div>
					<div id="chart2" class="box1-chart" v-show="box1BtnActive === 2"></div>
					<div id="chart3" class="box1-chart" v-show="box1BtnActive === 3"></div>
					<div id="chart4" class="box1-chart" v-show="box1BtnActive === 4"></div>
				</div>

				<div class="box1-footer">
					<div class="box-footer-left">
						<img src="../assets/icons/right-icon1.png" alt="" />
					</div>
					<div class="box-footer-center">
						通过“技术禁运+实体清单+关税壁垒”三重枷锁，短期严重制约中国高校获取高端科研设备的能力。
					</div>
					<div class="box-footer-right">
						<img src="../assets/icons/arrow-right.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box2">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">国际合作情况</div>
					<div class="header-btn-box">
						<div class="btn" @click="handleClickBox2Btn(1)">
							<el-button type="primary" plain v-if="box2BtnActive === 1">国际项目</el-button>
							<el-button type="info" plain v-else>国际项目</el-button>
						</div>
						<div class="btn" @click="handleClickBox2Btn(2)">
							<el-button type="primary" plain v-if="box2BtnActive === 2">合著论文</el-button>
							<el-button type="info" plain v-else>合著论文</el-button>
						</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="box2-main">
					<div class="box2-main-left" id="chart5"></div>
					<div class="box2-main-right" id="chart6"></div>
					<div class="select-box">
						<el-select v-model="curYear" placeholder="选择年份" style="width: 100px">
							<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="box2-footer">
					<div class="box-footer-left">
						<img src="../assets/icons/right-icon1.png" alt="" />
					</div>
					<div class="box-footer-center">
						通过经费限制、技术封锁、签证壁垒三重机制，系统性削弱中美科研合作基础，显著冲击科研合作项目。
					</div>
					<div class="box-footer-right">
						<img src="../assets/icons/arrow-right.png" alt="" />
					</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-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-box1">
						<div class="box3-main-box1-header">
							<div class="box3-main-box1-title">
								<div class="icon">
									<img src="./assets/images/title-icon1.png" alt="" />
								</div>
								<div class="text">{{ "领域人才交流" }}</div>
							</div>
							<div class="box3-main-box1-btn-box">
								<div class="btn" @click="handleClickBox3Btn(1)">
									<el-button type="primary" plain v-if="box3BtnActive === 1">华裔科学家回流</el-button>
									<el-button type="info" plain v-else>华裔科学家回流</el-button>
								</div>
								<div class="btn" @click="handleClickBox3Btn(2)">
									<el-button type="primary" plain v-if="box3BtnActive === 2">赴美STEM专业申请</el-button>
									<el-button type="info" plain v-else>赴美STEM专业申请</el-button>
								</div>
								<div class="btn" @click="handleClickBox3Btn(3)">
									<el-button type="primary" plain v-if="box3BtnActive === 3">高端人才引进</el-button>
									<el-button type="info" plain v-else>高端人才引进</el-button>
								</div>
								<div class="btn" @click="handleClickBox3Btn(4)">
									<el-button type="primary" plain v-if="box3BtnActive === 4">STEM专业拒签率</el-button>
									<el-button type="info" plain v-else>STEM专业拒签率</el-button>
								</div>
								<div class="btn" @click="handleClickBox3Btn(5)">
									<el-button type="primary" plain v-if="box3BtnActive === 5">H-1B中签率</el-button>
									<el-button type="info" plain v-else>H-1B中签率</el-button>
								</div>
							</div>
						</div>
						<div class="box3-main-box1-main">
							<div class="box3-main-box1-main-left" id="chart7"></div>
							<div class="box3-main-box1-main-right" id="chart8"></div>
						</div>
					</div>
					<div class="box3-main-box2">
						<div class="box3-main-box2-header">
							<div class="box3-main-box2-title">
								<div class="icon">
									<img src="./assets/images/title-icon2.png" alt="" />
								</div>
								<div class="text">{{ "高被引学者数量" }}</div>
							</div>
							<div class="select-box">
								<el-select v-model="curYear" placeholder="选择年份" style="width: 100px">
									<el-option
										v-for="item in yearList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
							</div>
						</div>
						<div class="box3-main-box2-main" id="chart9"></div>
					</div>
				</div>
				<div class="box3-footer">
					<div class="box-footer-left">
						<img src="../assets/icons/right-icon1.png" alt="" />
					</div>
					<div class="box-footer-center">
						法案以218:214​（众议院）和51:50​微弱优势强行通过，暴露两党极端对立、党内倒戈频发的特点。
					</div>
					<div class="box-footer-right">
						<img src="../assets/icons/arrow-right.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getMultiLineChart from "./utils/multiLineChart";
import getBarChart1 from "./utils/barChart1";
import getPieChart1 from "./utils/pieChart1";
import getLineChart from "./utils/lineChart";
import getMultiBarChart from "./utils/multiBarChart";

const box1BtnActive = ref(1);
const box2BtnActive = ref(1);
const box3BtnActive = ref(1);

const handleClickBox2Btn = index => {
	box2BtnActive.value = index;
};

const handleClickBox3Btn = index => {
	box3BtnActive.value = index;
};

const handleClickBox1Btn = index => {
	box1BtnActive.value = index;
	if (index === 2) {
		setTimeout(() => {
			let chart2 = getBarChart(chart2Data.value.name, chart2Data.value.value, true);
			setChart(chart2, "chart2");
		});
	} else if (index === 3) {
		setTimeout(() => {
			let chart3 = getPieChart(chart3Data.value);
			setChart(chart3, "chart3");
		});
	} else if (index === 4) {
		setTimeout(() => {
			let chart4 = getMultiLineChart(chart4Data.value.dataX, chart4Data.value.value);
			setChart(chart4, "chart4");
		});
	} else {
		setTimeout(() => {
			let chart1 = getBarChart(chart1Data.value.name, chart1Data.value.value, false);
			setChart(chart1, "chart1");
		});
	}
};

// 绘制echarts图表
const setChart = (option, chartId) => {
	let chartDom = document.getElementById(chartId);
	chartDom.removeAttribute("_echarts_instance_");
	let chart = echarts.init(chartDom);
	chart.setOption(option);
	return chart;
};

const curYear = ref("2025年");

const yearList = ref([
	{
		label: "2025年",
		value: "2025年"
	},
	{
		label: "2024年",
		value: "2024年"
	},
	{
		label: "2023年",
		value: "2023年"
	},
	{
		label: "2022年",
		value: "2022年"
	}
]);

const chart1Data = ref({
	name: [
		"清华大学",
		"北京大学",
		"浙江大学",
		"上海交通大学",
		"复旦大学",
		"中国科学技术大学",
		"南京大学",
		"西北工业大学",
		"北京理工大学",
		"哈尔滨工业大学"
	],
	value: [109, 95, 79, 66, 61, 54, 50, 48, 34, 32]
});

const chart2Data = ref({
	name: [
		"分析仪器",
		"医学科研仪器",
		"核仪器",
		"激光器",
		"电子测量仪器",
		"地球探测仪器",
		"计量仪器",
		"物理性能测试仪器",
		"海洋仪器",
		"特种检测仪器"
	],
	value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79]
});

const chart3Data = ref([
	{
		name: "大气探测仪器",
		value: 24
		// per: 8,
	},
	{
		name: "空间与天文仪器",
		value: 24
		// per: 8,
	},
	{
		name: "医学诊断仪器",
		value: 24
		// per: 8,
	},
	{
		name: "核仪器",
		value: 30
		// per: 11,
	},
	{
		name: "工艺试验设备",
		value: 31
		// per: 12,
	},
	{
		name: "特种检测仪器",
		value: 31
		// per: 12,
	},
	{
		name: "计算机及配套设备",
		value: 31
		// per: 12,
	},
	{
		name: "激光器",
		value: 32
		// per: 14,
	},
	{
		name: "分析仪器",
		value: 38
		// per: 21,
	},
	{
		name: "物理性能测试仪器",
		value: 48
		// per: 21,
	},
	{
		name: "计量仪器",
		value: 52
		// per: 18,
	},
	{
		name: "电子测量仪器",
		value: 43
		// per: 18,
	},
	{
		name: "海洋仪器",
		value: 28
		// per: 16,
	},
	{
		name: "地球探测仪器",
		value: 35
		// per: 16,
	}
]);

const chart4Data = ref({
	dataX: ["2020", "2021", "2022", "2023", "2024", "2025"],
	value: [
		{
			name: "大气探测仪器",
			dataY: [23, 35, 53, 42, 21, 12]
		},
		{
			name: "空间与天文仪器",
			dataY: [34, 42, 46, 37, 26, 18]
		},
		{
			name: "医学诊断仪器",
			dataY: [46, 55, 68, 72, 42, 33]
		},
		{
			name: "激光器",
			dataY: [52, 56, 71, 44, 31, 18]
		},
		{
			name: "核仪器",
			dataY: [14, 32, 45, 32, 27, 11]
		},
		{
			name: "工艺实验设备",
			dataY: [35, 66, 78, 88, 53, 32]
		},
		{
			name: "特种检测仪器",
			dataY: [28, 33, 56, 41, 32, 16]
		},
		{
			name: "计算机及配套设备",
			dataY: [26, 45, 66, 52, 44, 25]
		},
		{
			name: "分析仪器",
			dataY: [20, 54, 72, 66, 71, 55]
		},
		{
			name: "物理性能测试仪器",
			dataY: [66, 54, 72, 55, 44, 23]
		},
		{
			name: "计量仪器",
			dataY: [72, 33, 55, 21, 44, 18]
		},
		{
			name: "电子测量仪器",
			dataY: [56, 31, 46, 12, 43, 23]
		},
		{
			name: "海洋仪器",
			dataY: [55, 31, 48, 69, 42, 22]
		},
		{
			name: "地球探测仪器",
			dataY: [24, 56, 72, 52, 36, 25]
		}
	]
});
const chart5Data = ref({
	name: [
		"清华大学",
		"中国科学技术大学",
		"深圳大学",
		"上海交通大学",
		"中山大学",
		"华中科技大学",
		"北京大学",
		"南京大学",
		"南开大学",
		"天津大学"
	],
	value: [35, 32, 28, 19, 17, 17, 17, 17, 17, 17]
});

const chart6Data = ref([
	{ name: "能源", value: 32 },
	{ name: "集成电路", value: 28 },
	{ name: "生物科技", value: 22 },
	{ name: "人工智能", value: 29 },
	{ name: "材料学", value: 18 },
	{ name: "机器人", value: 41 },
	{ name: "生命科学", value: 19 },
	{ name: "自然科学", value: 14 },
	{ name: "生物化学", value: 28 }
]);

const chart7Data = ref({
	dataX: ["2020", "2021", "2022", "2023", "2024", "2025"],
	dataY: [456, 292, 298, 335, 316, 248]
});

const chart8Data = ref([
	{ name: "生命科学", value: 24 },
	{ name: "自然科学", value: 31 },
	{ name: "生物化学", value: 14 },
	{ name: "能源", value: 22 },
	{ name: "集成电路", value: 26 },
	{ name: "生物科技", value: 18 },
	{ name: "人工智能", value: 31 },
	{ name: "材料学", value: 33 },
	{ name: "机器人", value: 25 }
]);

const chart9Data = ref({
	dataX: ["交叉学科", "临床医学", "材料科学", "生物学与生物化学", "化学"],
	value: [
		{
			name: "美国",
			value: [77, 46, 56, 84, 72]
		},
		{
			name: "中国",
			value: [58, 65, 72, 80, 76]
		},
		{
			name: "德国",
			value: [53, 39, 47, 49, 30]
		},
		{
			name: "日本",
			value: [28, 35, 29, 29, 44]
		},
		{
			name: "英国",
			value: [27, 44, 32, 36, 35]
		}
	]
});

onMounted(() => {
	let chart1 = getBarChart(chart1Data.value.name, chart1Data.value.value, false);
	setChart(chart1, "chart1");

	let chart5 = getBarChart1(chart5Data.value.name, chart5Data.value.value);
	setChart(chart5, "chart5");

	let chart6 = getPieChart1(chart6Data.value, "40%", "52%", "30%");
	setChart(chart6, "chart6");

	let chart7 = getLineChart(chart7Data.value);
	setChart(chart7, "chart7");

	let chart8 = getPieChart1(chart8Data.value, "50%", "50%");
	setChart(chart8, "chart8");

	let chart9 = getMultiBarChart(chart9Data.value.dataX, chart9Data.value.value);
	setChart(chart9, "chart9");
});
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100%;
	display: flex;
	.box-header {
		height: 56px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 20px;
			width: 8px;
			height: 16px;
			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: 16px;
			font-weight: 600;
			line-height: 16px;
		}
		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 84px;
			display: flex;
			.btn {
				margin-left: 20px;
			}
		}
		.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: 16px;
			width: 860px;
			height: 415px;
			background: rgba(255, 255, 255);
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
			.box1-main {
				height: 300px;
				width: 820px;
				margin: 5px 20px;
				.box1-chart {
					width: 100%;
					height: 100%;
				}
			}

			.box1-footer {
				width: 830px;
				height: 40px;
				display: flex;
				box-sizing: border-box;
				margin: 0 auto;
				margin-top: 6px;
				background: rgba(246, 251, 255, 1);
				border: 1px solid rgba(231, 241, 255, 1);
				border-radius: 4px;
				.box-footer-left {
					margin-top: 10px;
					margin-left: 12px;
					width: 19px;
					height: 20px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.box-footer-center {
					margin-left: 13px;
					margin-top: 8px;
					width: 749px;
					height: 24px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
				}
				.box-footer-right {
					margin-left: 5px;
					margin-top: 8px;
					width: 24px;
					height: 24px;
					background: rgba(231, 241, 255, 1);
					border-radius: 12px;
					background: #e7f1ff;
					box-sizing: border-box;
					padding: 3px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.box2 {
			margin-top: 16px;
			width: 860px;
			height: 415px;
			background: rgba(255, 255, 255);
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);

			.box2-main {
				height: 300px;
				width: 820px;
				margin: 5px 20px;
				display: flex;
				position: relative;
				.box2-main-left {
					width: 500px;
				}
				.box2-main-right {
					width: 320px;
				}
				.select-box {
					position: absolute;
					right: 32px;
					top: 2px;
				}
			}
			.box2-footer {
				width: 830px;
				height: 40px;
				display: flex;
				box-sizing: border-box;
				margin: 0 auto;
				margin-top: 6px;
				background: rgba(246, 251, 255, 1);

				border: 1px solid rgba(231, 241, 255, 1);
				border-radius: 4px;
				.box-footer-left {
					margin-top: 10px;
					margin-left: 12px;
					width: 19px;
					height: 20px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.box-footer-center {
					margin-left: 13px;
					margin-top: 8px;
					width: 749px;
					height: 24px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
				}
				.box-footer-right {
					margin-left: 5px;
					margin-top: 8px;
					width: 24px;
					height: 24px;
					background: rgba(231, 241, 255, 1);
					border-radius: 12px;
					background: #e7f1ff;
					box-sizing: border-box;
					padding: 3px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.right {
		margin-left: 16px;
		.box3 {
			margin-top: 16px;
			width: 860px;
			height: 847px;
			background: rgba(255, 255, 255);
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
			.box3-main {
				height: 730px;
				width: 820px;
				margin: 5px 20px;
				.box3-main-box1 {
					height: 350px;
					.box3-main-box1-header {
						display: flex;
						justify-content: space-between;
						.box3-main-box1-title {
							display: flex;
							.icon {
								width: 16px;
								height: 16px;
								margin-top: 7px;
								margin-right: 8px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								height: 30px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 30px;
							}
						}
						.box3-main-box1-btn-box {
							display: flex;
							justify-content: flex-end;
							.btn {
								margin-left: 8px;
							}
						}
					}
					.box3-main-box1-main {
						margin-top: 5px;
						height: 320px;
						display: flex;
						.box3-main-box1-main-left {
							width: 500px;
						}
						.box3-main-box1-main-right {
							width: 360px;
						}
					}
				}
				.box3-main-box2 {
					margin-top: 20px;
					height: 350px;
					.box3-main-box2-header {
						height: 30px;
						display: flex;
						justify-content: space-between;
						.box3-main-box2-title {
							display: flex;
							.icon {
								width: 16px;
								height: 16px;
								margin-top: 7px;
								margin-right: 8px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.text {
								height: 30px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 30px;
							}
						}
					}
					.box3-main-box2-main {
						height: 310px;
						margin-top: 10px;
					}
				}
			}
			.box3-footer {
				width: 830px;
				height: 40px;
				display: flex;
				box-sizing: border-box;
				margin: 0 auto;
				margin-top: 6px;
				background: rgba(246, 251, 255, 1);

				border: 1px solid rgba(231, 241, 255, 1);
				border-radius: 4px;

				.box-footer-left {
					margin-top: 10px;
					margin-left: 12px;
					width: 19px;
					height: 20px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.box-footer-center {
					margin-left: 13px;
					margin-top: 8px;
					width: 749px;
					height: 24px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
				}
				.box-footer-right {
					margin-left: 5px;
					margin-top: 8px;
					width: 24px;
					height: 24px;
					background: rgba(231, 241, 255, 1);
					border-radius: 12px;
					background: #e7f1ff;
					box-sizing: border-box;
					padding: 3px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>




