<template>
	<div class="industrial-impact">
		<div class="main">
			<div class="left">
				<div class="title-com">
					<div class="box"></div>
					<div class="text">制裁科研机构列表</div>
					<div class="right-group">
						<el-select
							v-model="activeDependency"
							class="dependency-select"
							placeholder="Select"
						>
							<el-option
								v-for="item in dependencyOptions"
								:key="item"
								:label="item"
								:value="item"
							/>
						</el-select>
						<div class="btn-com">
							<img src="../../../../assets/下载按钮.png" alt="" />
							<img src="../../../../assets/收藏按钮.png" alt="" />
						</div>
					</div>
				</div>
				<div class="left-main">
					<div class="company-list-container">
						<div class="list-header">科研机构名称</div>
						<div class="company-list">
							<div
								class="company-item"
								:class="{ active: selectedCompanyId === item.id }"
								v-for="item in companyList"
								:key="item.id"
								@click="selectedCompanyId = item.id"
							>
								<div class="icon-wrapper">
									<img :src="defaultTitle" alt="" />
								</div>
								<div class="company-name">{{ item.name }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="right-item">
					<div class="title-com">
						<div class="box"></div>
						<div class="text">科研仪器对美依赖情况</div>
						<div class="right-group">
							<div class="btn">
								<img src="../../../../assets/数据库按钮.png" alt="" />
								<img src="../../../../assets/下载按钮.png" alt="" />
								<img src="../../../../assets/收藏按钮.png" alt="" />
							</div>
						</div>
					</div>
					<div class="right-main">
						<div class="echarts" ref="chartRef"></div>
						<div class="bottom">
							<img :src="ai" class="ai-icon" alt="" />
							<span class="text">受制裁实体中，电子测量仪器对美依赖程度最高，此外，电子策略仪器、物理性能测试仪器等也有较高的对美依赖度。</span>
							<img :src="right" class="right-icon" alt="" />
						</div>
					</div>
				</div>
				<div class="right-item">
					<div class="title-com">
						<div class="box"></div>
						<div class="text">科研仪器进口国分布</div>
					<div class="right-group">
						<el-select
							v-model="activeInstrument"
							class="instrument-select"
							placeholder="Select"
						>
							<el-option
								v-for="item in instrumentOptions"
								:key="item"
								:label="item"
								:value="item"
							/>
						</el-select>
						<div class="btn">
								<img src="../../../../assets/数据库按钮.png" alt="" />
								<img src="../../../../assets/下载按钮.png" alt="" />
								<img src="../../../../assets/收藏按钮.png" alt="" />
							</div>
						</div>
					</div>
					<div class="right-main">
						<div class="echarts" ref="marketChartRef"></div>
						<div class="bottom">
							<img :src="ai" class="ai-icon" alt="" />
							<span class="text">电子测量仪器来源国主要为美国,但是德国、日本等国也占有较大比重,后续可考虑将上述国家作为仪器进口来源替代国。</span>
							<img :src="right" class="right-icon" alt="" />
						</div>
					</div>
				</div>
				<div class="right-item">
					<div class="title-com">
						<div class="box"></div>
						<div class="text">新增国际合作项目</div>
						<div class="right-group">
							<el-select
								v-model="activeProjectDomain"
								class="project-domain-select"
								placeholder="Select"
							>
								<el-option
									v-for="item in projectDomainOptions"
									:key="item"
									:label="item"
									:value="item"
								/>
							</el-select>
							<div class="btn">
								<img src="../../../../assets/数据库按钮.png" alt="" />
								<img src="../../../../assets/下载按钮.png" alt="" />
								<img src="../../../../assets/收藏按钮.png" alt="" />
							</div>
						</div>
					</div>
					<div class="right-main">
						<div class="echarts" ref="rdChartRef"></div>
						<div class="bottom">
							<img :src="ai" class="ai-icon" alt="" />
							<span class="text">列入实体清单后新增国际项目数量明显减少。</span>
							<img :src="right" class="right-icon" alt="" />
						</div>
					</div>
				</div>
				<div class="right-item">
					<div class="title-com">
						<div class="box"></div>
						<div class="text">新增国际合著论文</div>
						<div class="right-group">
							<el-select
								v-model="activePaperDomain"
								class="paper-domain-select"
								placeholder="Select"
							>
								<el-option
									v-for="item in paperDomainOptions"
									:key="item"
									:label="item"
									:value="item"
								/>
							</el-select>
							<div class="btn">
								<img src="../../../../assets/数据库按钮.png" alt="" />
								<img src="../../../../assets/下载按钮.png" alt="" />
								<img src="../../../../assets/收藏按钮.png" alt="" />
							</div>
						</div>
					</div>
					<div class="right-main">
						<div class="echarts" ref="shareChartRef"></div>
						<div class="bottom">
							<img :src="ai" class="ai-icon" alt="" />
							<span class="text">总量下降，特别是在人工智能、高端通信等敏感技术领域。</span>
							<img :src="right" class="right-icon" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import defaultTitle from "../../../../assets/default-icon2.png";
import ai from "../../assets/ai.png";
import right from "../../assets/right.png";

const chartRef = ref(null);
const marketChartRef = ref(null);
const rdChartRef = ref(null);
const shareChartRef = ref(null);

const initChart = () => {
	if (!chartRef.value) return;
	const myChart = echarts.init(chartRef.value);
	const data = [
		{ name: "电子测量仪器", value: 109 },
		{ name: "物理性能测试仪器", value: 95 },
		{ name: "激光器", value: 79 },
		{ name: "分析仪器", value: 25 },
		{ name: "计量仪器", value: 21 },
		{ name: "计算机及其配套设备", value: 10 },
		{ name: "地球探测仪器", value: 10 }
	];

	const option = {
		grid: {
			top: "5%",
			left: "0%",
			right: "5%",
			bottom: "0%",
			containLabel: true
		},
		xAxis: {
			show: false,
			type: "value"
		},
		yAxis: [
			{
				type: "category",
				data: data.map((item) => item.name),
				axisLine: { show: false },
				axisTick: { show: false },
				axisLabel: {
					color: "rgb(59, 65, 75)",
					fontSize: 16,
					fontWeight: 400,
					fontFamily: "Microsoft YaHei",
					margin: 20,
					interval: 0
				},
				inverse: true
			},
			{
				type: "category",
				data: data.map((item) => item.value),
				axisLine: { show: false },
				axisTick: { show: false },
				axisLabel: {
					margin: 20,
					interval: 0,
					fontSize: 16,
					fontFamily: "Microsoft YaHei",
					color: (value, index) => {
						return index < 3
							? "rgba(209, 90, 90, 1)"
							: "rgba(59, 139, 245, 1)";
					}
				},
				inverse: true
			}
		],
		series: [
			{
				type: "bar",
				data: data.map((item, index) => {
					return {
						value: item.value,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
								{
									offset: 0,
									color:
										index < 3
											? "rgba(209, 90, 90, 0.05)"
											: "rgba(59, 139, 245, 0.05)"
								},
								{
									offset: 1,
									color:
										index < 3
											? "rgba(209, 90, 90, 1)"
											: "rgba(59, 139, 245, 1)"
								}
							]),
							borderRadius: [0, 10, 10, 0]
						},
						label: {
							show: false
						}
					};
				}),
				barWidth: 10,
				showBackground: false
			}
		]
	};
	myChart.setOption(option);
	window.addEventListener("resize", () => {
		myChart.resize();
	});
};

const initMarketChart = () => {
	if (!marketChartRef.value) return;
	const myChart = echarts.init(marketChartRef.value);
	const data = [
		{ name: "美国", value: 27 },
		{ name: "日本", value: 22 },
		{ name: "德国", value: 18 },
		{ name: "英国", value: 15 },
		{ name: "韩国", value: 12 },
		{ name: "荷兰", value: 8 },
		{ name: "其他", value: 7 }
	];
	const colors = [
		"#66b1ff",
		"#ffba63",
		"#7ce3d3",
		"#8a9dff",
		"#ff7c7c",
		"#b386f2",
		"#4080ff"
	];

	const option = {
		color: colors,
		tooltip: {
			trigger: "item",
			formatter: "{b}: {c}%"
		},
		legend: {
			orient: "vertical",
			right: "15%",
			top: "middle",
			itemGap: 20,
			icon: "circle",
			formatter: function (name) {
				const item = data.find((i) => i.name === name);
				return `{name|${name}}  {value|${item.value}%}`;
			},
			textStyle: {
				rich: {
					name: {
						fontSize: 16,
						color: "#333",
						width: 60,
						padding: [0, 0, 0, 5],
						fontFamily: "Microsoft YaHei"
					},
					value: {
						fontSize: 16,
						color: "#333",
						fontFamily: "Microsoft YaHei"
					}
				}
			}
		},
		series: [
			{
				name: "科研仪器进口国分布",
				type: "pie",
				radius: ["80px", "98px"],
				center: ["30%", "50%"],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: "center"
				},
				emphasis: {
					label: {
						show: false
					}
				},
				labelLine: {
					show: false
				},
				data: data
			}
		]
	};
	myChart.setOption(option);
	window.addEventListener("resize", () => {
		myChart.resize();
	});
};

const initRdChart = () => {
	if (!rdChartRef.value) return;
	const myChart = echarts.init(rdChartRef.value);
	const data = [6, 7, 6, 6, 6, 7, 7, 6, 5, 4];
	const years = [
		"2016",
		"2017",
		"2018",
		"2019",
		"2020",
		"2021",
		"2022",
		"2023",
		"2024",
		"2025"
	];

	const option = {
		tooltip: {
			trigger: "axis"
		},
		grid: {
			top: "15%",
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			data: years,
			axisLine: {
				lineStyle: {
					color: "#E6EBF5"
				}
			},
			axisLabel: {
				color: "#606266",
				fontSize: 12,
				lineHeight: 18,
				fontFamily: "Microsoft YaHei"
			},
			axisTick: {
				show: false
			}
		},
		yAxis: {
			type: "value",
			min: 0,
			max: 10,
			interval: 2,
			axisLabel: {
				color: "#606266",
				fontSize: 12,
				fontFamily: "Microsoft YaHei"
			},
			splitLine: {
				lineStyle: {
					type: "dashed",
					color: "rgba(231, 243, 255, 1)"
				}
			}
		},
		series: [
			{
				data: data,
				type: "line",
				symbol: "none",
				smooth: false,
				lineStyle: {
					color: "#055FC2",
					width: 2
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: "rgba(5, 95, 194, 0.2)"
						},
						{
							offset: 1,
							color: "rgba(5, 95, 194, 0)"
						}
					])
				},
				markLine: {
					symbol: "none",
					data: [
						{
							xAxis: "2023",
							label: {
								formatter: "列入实体清单",
								position: "end",
								rotate: 0,
								color: "#F56C6C",
								backgroundColor: "rgba(255, 238, 238, 1)",
								borderRadius: 4,
								padding: [4, 8]
							},
							lineStyle: {
								color: "#F56C6C",
								type: "dotted",
								width: 1
							}
						}
					]
				}
			}
		]
	};
	myChart.setOption(option);
	window.addEventListener("resize", () => {
		myChart.resize();
	});
};

const initShareChart = () => {
	if (!shareChartRef.value) return;
	const myChart = echarts.init(shareChartRef.value);
	const data = [61, 65, 59, 46, 46, 41, 46, 51, 21, 24];
	const years = [
		"2016",
		"2017",
		"2018",
		"2019",
		"2020",
		"2021",
		"2022",
		"2023",
		"2024",
		"2025"
	];

	const option = {
		tooltip: {
			trigger: "axis"
		},
		grid: {
			top: "15%",
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			data: years,
			axisLine: {
				lineStyle: {
					color: "#E6EBF5"
				}
			},
			axisLabel: {
				color: "#606266",
				fontSize: 12,
				lineHeight: 18,
				fontFamily: "Microsoft YaHei"
			},
			axisTick: {
				show: false
			}
		},
		yAxis: {
			type: "value",
			min: 0,
			max: 100,
			interval: 20,
			axisLabel: {
				color: "#606266",
				fontSize: 12,
				fontFamily: "Microsoft YaHei"
			},
			splitLine: {
				lineStyle: {
					type: "dashed",
					color: "rgba(231, 243, 255, 1)"
				}
			}
		},
		series: [
			{
				data: data,
				type: "line",
				symbol: "none",
				smooth: false,
				lineStyle: {
					color: "#055FC2",
					width: 2
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: "rgba(5, 95, 194, 0.2)"
						},
						{
							offset: 1,
							color: "rgba(5, 95, 194, 0)"
						}
					])
				},
				markLine: {
					symbol: "none",
					data: [
						{
							xAxis: "2023",
							label: {
								formatter: "列入实体清单",
								position: "end",
								rotate: 0,
								color: "#F56C6C",
								backgroundColor: "rgba(255, 238, 238, 1)",
								borderRadius: 4,
								padding: [4, 8]
							},
							lineStyle: {
								color: "#F56C6C",
								type: "dotted",
								width: 1
							}
						}
					]
				}
			}
		]
	};
	myChart.setOption(option);
	window.addEventListener("resize", () => {
		myChart.resize();
	});
};

onMounted(() => {
	initChart();
	initMarketChart();
	initRdChart();
	initShareChart();
});

const selectedCompanyId = ref(1);
const activeDependency = ref("对外依赖");
const dependencyOptions = ["对外依赖"];

const activeInstrument = ref("电子测量仪器");
const instrumentOptions = ["电子测量仪器"];

const activeProjectDomain = ref("全部领域");
const projectDomainOptions = ["全部领域"];

const activePaperDomain = ref("全部领域");
const paperDomainOptions = ["全部领域"];

const companyList = ref([
	{ id: 1, name: "空天信息创新研究院" },
	{ id: 2, name: "中国科学院国家授时中心" }
]);



</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.industrial-impact {
	width: 100%;
	padding-top: 16px;
	padding-bottom: 50px;
	.main {
		width: 100%;
		display: flex;
		justify-content: space-between;
		.left {
			width: 480px;
			height: 860px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			border-radius: 10px;
			.left-main {
				padding: 0 16px;
				.top-bar {
					display: flex;
					gap: 12px;
					margin-bottom: 8px;
					.domain-select {
						width: 150px;
						:deep(.el-input__wrapper) {
							height: 32px;
							border-radius: 4px;
						}
					}
					.search-input {
						width: 288px;
						:deep(.el-input__wrapper) {
							height: 32px;
							border-radius: 4px;
						}
					}
				}
				.company-list-container {
					.list-header {
						width: 446px;
						height: 48px;
						padding: 12px 16px;
						font-size: 16px;
						font-weight: 700;
						color: rgb(59, 65, 75);
						border-top: 1px solid rgb(234, 236, 238);
						border-bottom: 1px solid rgb(234, 236, 238);
					}
					.company-list {
						height: 700px;
						overflow-y: auto;
						.company-item {
							display: flex;
							align-items: center;
							height: 48px;
							padding: 0 16px;
							cursor: pointer;
							border-bottom: 1px solid #f0f2f5;
							box-sizing: border-box;
							&:hover {
								background-color: #f5f7fa;
							}
							&.active {
								background-color: rgba(246, 250, 255, 1);
								border: 1px solid rgba(174, 214, 255, 1);
								.company-name {
									color: rgb(5, 95, 194);
									font-weight: 700;
								}
								.icon-wrapper {
									background-color: transparent;
								}
							}
							.icon-wrapper {
								width: 24px;
								height: 24px;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 12px;
								border-radius: 50%;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.company-name {
								font-size: 16px;
								color: rgb(59, 65, 75);
								font-weight: 400;
								line-height: 24px;
								font-family: "Microsoft YaHei";
							}
						}
					}
				}
			}
		}
		.right {
			width: 1104px;
			height: 860px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: space-between;
			.right-item {
				width: 544px;
				height: 422px;
				background-color: #fff;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				border-radius: 10px;
			}
			.right-main {
				width: 100%;
				height: calc(100% - 56px);
				padding: 0px 14px 15px 14px;
				.echarts {
					width: 516px;
					height: 300px;
					margin-bottom: 5px;
				}
				.bottom {
					width: 516px;
					// height: 40px;
					border-radius: 4px;
					background-color: rgba(246, 250, 255, 1);
					border: 1px solid rgba(231, 243, 255, 1);
					display: flex;
					align-items: center;
					padding: 6px 12px;
					box-sizing: border-box;
					.ai-icon {
						width: 20px;
						height: 20px;
						margin-right: 12px;
					}
					.text {
						flex: 1;
						font-size: 16px;
						font-family: "Microsoft YaHei";
						font-weight: 400;
						color: rgb(5, 95, 194);
						line-height: 24px;
					}
					.right-icon {
						width: 24px;
						height: 24px;
						cursor: pointer;
					}
				}
			}
		}
	}
}
.title-com {
	width: 100%;
	height: 56px;
	display: flex;
	align-items: center;
	padding: 14px 12px 16px 0;
	.box {
		width: 8px;
		height: 20px;
		background-color: rgb(5, 95, 194);
		border-bottom-right-radius: 4px;
		border-top-right-radius: 4px;
		margin-right: 14px;
	}
	.text {
		font-size: 20px;
		font-weight: 700;
		font-family: "Microsoft YaHei";
		line-height: 26px;
		color: rgb(5, 95, 194);
	}
	.right-group {
		margin-left: auto;
		display: flex;
		align-items: center;

		.rule-checkbox {
			margin-right: 20px;

			:deep(.el-checkbox__label) {
				font-size: 16px;
				color: #5f656c;
				font-family: "Microsoft YaHei";
			}

			:deep(.el-checkbox__inner) {
				border-color: #c9cdd4;
			}

			:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
				background-color: #055fc2;
				border-color: #055fc2;
			}

			:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
				color: #5f656c;
			}
		}

		.toggle-btns {
			display: flex;
			gap: 8px;
			margin-right: 20px;
			.t-btn {
				padding: 2px 8px;
				border: 1px solid rgb(230, 231, 232);
				border-radius: 4px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				color: rgb(59, 65, 75);
				cursor: pointer;
				box-sizing: border-box;
				&.active {
					color: rgb(5, 95, 194);
					background-color: rgba(231, 243, 255, 1);
					border-color: rgb(5, 95, 194);
				}
			}
		}
		.btn {
			margin-left: 0;
		}
		.dependency-select {
			width: 121px;
			height: 28px;
			margin-right: 14px;
			:deep(.el-input__wrapper) {
				height: 28px;
				min-height: 28px;
				padding: 0 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
			}
			:deep(.el-input__inner) {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}
		}
		.instrument-select {
			width: 180px;
			height: 28px;
			margin-right: 14px;
			:deep(.el-input__wrapper) {
				height: 28px;
				min-height: 28px;
				padding: 0 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
			}
			:deep(.el-input__inner) {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}
		}
		.project-domain-select {
			width: 150px;
			height: 28px;
			margin-right: 14px;
			:deep(.el-input__wrapper) {
				height: 28px;
				min-height: 28px;
				padding: 0 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
			}
			:deep(.el-input__inner) {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}
		}
		.paper-domain-select {
			width: 150px;
			height: 28px;
			margin-right: 14px;
			:deep(.el-input__wrapper) {
				height: 28px;
				min-height: 28px;
				padding: 0 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
			}
			:deep(.el-input__inner) {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}
		}
		
	}
	.btn {
		width: 92px;
		height: 28px;
		margin-left: auto;
		img {
			width: 28px;
			height: 28px;
			cursor: pointer;
		}
		img:first-child {
			margin-right: 4px;
		}
	}
	.btn-com {
		width: 60px;
		height: 28px;
		margin-left: auto;
		img {
			width: 28px;
			height: 28px;
			cursor: pointer;
		}
	}
}
</style>
