<template>
	<div class="data-statistics">
		<div class="nav">
			<div class="nav-item">
				<div class="item-position"></div>
				<div class="content">
					<div class="info">
						<div class="title">中国实体数量</div>
					</div>
					<div class="number">
						<span class="num">24</span>
						<span class="unit">家</span>
					</div>
				</div>
			</div>
			<div class="nav-item">
				<div class="item-position"></div>
				<div class="content">
					<div class="info">
						<div class="title">中国实体数量</div>
						<div class="subtitle">50%规则涉及</div>
					</div>
					<div class="number">
						<span class="num">102</span>
						<span class="unit">家</span>
					</div>
				</div>
			</div>
			<div class="nav-item">
				<div class="item-position"></div>
				<div class="content">
					<div class="info">
						<div class="title">涉及领域</div>
					</div>
					<div class="number">
						<span class="num">3</span>
						<span class="unit">家</span>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="main-item">
				<div class="title-com">
					<div class="box"></div>
					<div class="text">制裁实体领域分布情况</div>
					<div class="right-group">
						<el-select v-model="domainTime" class="time-select" placeholder="请选择">
							<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
						</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="echarts" ref="domainChartRef"></div>
				<div class="bottom">
					<div class="ai">
						<div class="left">
							<img :src="ai" alt="" class="icon1" />
							<div class="text">美国对中国的制裁集中在半导体、人工智能等领域。</div>
						</div>
						<div class="right">
							<img :src="right" alt="" class="icon2" />
						</div>
					</div>
				</div>
			</div>
			<div class="main-item">
				<div class="title-com">
					<div class="box"></div>
					<div class="text">制裁实体类型分布情况</div>
					<div class="right-group">
						<el-select v-model="typeTime" class="time-select" placeholder="请选择">
							<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
						</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="echarts" ref="typeChartRef"></div>
				<div class="bottom">
					<div class="ai">
						<div class="left">
							<img :src="ai" alt="" class="icon1" />
							<div class="text">我国被制裁实体以企业、科研院所和高校为主。</div>
						</div>
						<div class="right">
							<img :src="right" alt="" class="icon2" />
						</div>
					</div>
				</div>
			</div>
			<div class="main-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="country-list">
					<div class="list-item" v-for="(item, index) in countryDistribution" :key="index">
						<img :src="flag" alt="" class="flag">
						<div class="country-name">{{ item.name }}</div>
						<div class="progress-bar-container">
							<div 
								class="progress-bar" 
								:style="{ 
									width: item.width, 
									background: item.gradient 
								}"
							></div>
						</div>
						<div class="count" :class="{ 'highlight': index === 0 }">{{ item.count }}家</div>
					</div>
				</div>
				<div class="bottom">
					<div class="ai">
						<div class="left">
							<img :src="ai" alt="" class="icon1" />
							<div class="text">美国对中国的制裁近年来呈现显著增长趋势。</div>
						</div>
						<div class="right">
							<img :src="right" alt="" class="icon2" />
						</div>
					</div>
				</div>
			</div>
			<div class="main-item">
				<div class="title-com">
					<div class="box"></div>
					<div class="text">制裁实体地域分布情况</div>
					<div class="right-group">
						<el-select v-model="regionTime" class="time-select" placeholder="请选择">
							<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
						</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="map-wrapper">
					<div class="map-chart" ref="mapChartRef"></div>
					<div class="rank-list">
						<div class="rank-item" v-for="(item, index) in rankData" :key="index">
							<div class="rank-index" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>
							<div class="rank-name">{{ item.name }}</div>
							<div class="rank-bar-bg">
								<div
									class="rank-bar-fill"
									:style="{ width: (item.value / 50) * 100 + '%', background: getBarColor(index) }"
								></div>
							</div>
							<div class="rank-value">{{ item.value }}家</div>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="ai">
						<div class="left">
							<img :src="ai" alt="" class="icon1" />
							<div class="text">我国被制裁实体多分布于沿海经济活跃省份。</div>
						</div>
						<div class="right">
							<img :src="right" alt="" class="icon2" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import chinaJson from "../../../utils/China.json";
import ai from "./assets/ai.png";
import right from "./assets/right.png";
import flag from "../../assets/default-icon2.png"


const regionTime = ref("all");
const domainTime = ref("all");
const typeTime = ref("all");

const timeOptions = [
	{ label: "全部时间", value: "all" },
	{ label: "2024年", value: "2024" },
	{ label: "2023年", value: "2023" }
];

const countryDistribution = [
	{ name: "中国", count: 24, width: "80%", gradient: "linear-gradient(90deg, rgba(205, 66, 70, 0) 0%, rgba(205, 66, 70, 1) 100%)" },
	{ name: "沙特阿拉伯", count: 2, width: "60%", gradient: "linear-gradient(90deg, rgba(255, 172, 77, 0) 0%, rgba(255, 172, 77, 1) 100%)" },
	{ name: "伊朗", count: 2, width: "60%", gradient: "linear-gradient(90deg, rgba(255, 172, 77, 0) 0%, rgba(255, 172, 77, 1) 100%)" },
	{ name: "俄罗斯", count: 2, width: "55%", gradient: "linear-gradient(90deg, rgba(255, 172, 77, 0) 0%, rgba(255, 172, 77, 1) 100%)" },
	{ name: "中国香港", count: 1, width: "40%", gradient: "linear-gradient(90deg, rgba(5, 95, 194, 0) 0%, rgba(5, 95, 194, 1) 100%)" }
];

const mapChartRef = ref(null);
const domainChartRef = ref(null);
const typeChartRef = ref(null);

const rankData = [
	{ name: "广东省", value: 42 },
	{ name: "上海市", value: 35 },
	{ name: "浙江省", value: 28 },
	{ name: "江苏省", value: 19 },
	{ name: "山东省", value: 15 },
	{ name: "福建省", value: 14 },
	{ name: "中国香港", value: 13 }
];

const getBarColor = index => {
	if (index === 0) return "linear-gradient(90deg, rgba(255, 77, 79, 0) 0%, rgba(255, 77, 79, 1) 100%)";
	if (index === 1 || index === 2) return "linear-gradient(90deg, rgba(255, 172, 77, 0) 0%, rgba(255, 172, 77, 1) 100%)";
	return "linear-gradient(90deg, rgba(5, 95, 194, 0) 0%, rgba(5, 95, 194, 1) 100%)";
};

const geoCoordMap = {
	广东省: [113.280637, 23.125178],
	上海市: [121.472644, 31.231706],
	浙江省: [120.153576, 30.287459],
	江苏省: [118.767413, 32.041544],
	山东省: [117.000923, 36.675807],
	福建省: [119.306239, 26.075302],
	中国香港: [114.173355, 22.320048],
	北京市: [116.405285, 39.904989],
	天津市: [117.190182, 39.125596],
	重庆市: [106.504962, 29.533155],
	河北省: [114.502461, 38.045474],
	山西省: [112.549248, 37.857014],
	辽宁省: [123.429096, 41.796767],
	吉林省: [125.3245, 43.886841],
	黑龙江省: [126.642464, 45.756967],
	安徽省: [117.283042, 31.86119],
	江西省: [115.892151, 28.676493],
	河南省: [113.665412, 34.757975],
	湖北省: [114.298572, 30.584355],
	湖南省: [112.982279, 28.19409],
	海南省: [110.33119, 20.031971],
	四川省: [104.065735, 30.659462],
	贵州省: [106.713478, 26.578343],
	云南省: [102.712251, 25.040609],
	陕西省: [108.948024, 34.263161],
	甘肃省: [103.823557, 36.058039],
	青海省: [101.778916, 36.623178],
	内蒙古自治区: [111.670801, 40.818311],
	广西壮族自治区: [108.320004, 22.82402],
	西藏自治区: [91.132212, 29.660361],
	宁夏回族自治区: [106.278179, 38.46637],
	新疆维吾尔自治区: [87.617733, 43.792818],
	台湾省: [121.509062, 25.044332],
	澳门特别行政区: [113.54909, 22.198951]
};

const convertData = data => {
	const res = [];
	for (let i = 0; i < data.length; i++) {
		const geoCoord = geoCoordMap[data[i].name];
		if (geoCoord) {
			res.push({
				name: data[i].name,
				value: geoCoord.concat(data[i].value)
			});
		}
	}
	return res;
};

const initMapChart = () => {
	if (!mapChartRef.value) return;
	const chart = echarts.init(mapChartRef.value);
	echarts.registerMap("china", chinaJson);

	const option = {
		tooltip: {
			show: false
		},
		geo: {
			map: "china",
			roam: true,
			center: [105, 36],
			zoom: 1.6,
			top: "10%",
			bottom: "10%",
			label: {
				normal: {
					show: false
				}
			},
			itemStyle: {
				areaColor: "#eff6ff",
				borderColor: "#8cbaff",
				borderWidth: 1
			},
			emphasis: {
				itemStyle: {
					areaColor: "#dbeafe"
				}
			}
		},
		series: [
			{
				type: "scatter",
				coordinateSystem: "geo",
				data: convertData(rankData),
				symbolSize: 8,
				itemStyle: {
					color: "#ff4d4f",
					shadowBlur: 10,
					shadowColor: "rgba(255, 77, 79, 0.5)"
				},
				tooltip: {
					show: true,
					formatter: params => {
						return `${params.name} ${params.value[2]}家`;
					}
				}
			}
		]
	};

	chart.setOption(option);

	window.addEventListener("resize", () => {
		chart.resize();
	});
};

const initDomainChart = () => {
	if (!domainChartRef.value) return;
	const chart = echarts.init(domainChartRef.value);

	const data = [
		{ value: 215, name: "集成电路" },
		{ value: 198, name: "人工智能" },
		{ value: 117, name: "通信网络" },
		{ value: 98, name: "量子科技" },
		{ value: 91, name: "先进制造" },
		{ value: 80, name: "新材料" },
		{ value: 62, name: "航空航天" }
	];

	const option = {
		tooltip: {
			trigger: "item",
			formatter: "{b}: {c} ({d}%)"
		},
		color: [
			"#60acfc", // 集成电路 - 蓝色
			"#feb64d", // 人工智能 - 橙色
			"#5bc49f", // 通信网络 - 青色
			"#959cf3", // 量子科技 - 淡蓝紫
			"#ff7c7c", // 先进制造 - 红色
			"#b689ea", // 新材料 - 紫色
			"#32d3eb" // 航空航天 - 浅蓝
		],
		series: [
			{
				name: "制裁实体领域分布",
				type: "pie",
				radius: [73.5, 89.5],
				center: ["50%", "50%"],
				startAngle: 90,
				data: data,
				label: {
					show: true,
					alignTo: "edge",
					minMargin: 5,
					edgeDistance: 10,
					formatter: params => {
						return "{name|" + params.name + "}\n{value|" + params.value + "家 " + params.percent + "%}";
					},
					rich: {
						name: {
							fontSize: 18,
							fontWeight: 700,
							color: "rgb(59, 65, 75)",
							padding: [0, 0, 5, 0],
							fontFamily: "Microsoft YaHei",
							lineHeight: 26
						},
						value: {
							fontSize: 16,
							fontWeight: 400,
							color: "rgb(95, 101, 108)",
							fontFamily: "Microsoft YaHei",
							lineHeight: 24,
							padding: [5, 0, 0, 0]
						}
					}
				},
				labelLine: {
					show: true,
					length: 15,
					length2: 0,
					maxSurfaceAngle: 80,
					lineStyle: {
						width: 1.1
					}
				},
				labelLayout: function (params) {
					const isLeft = params.labelRect.x < chart.getWidth() / 2;
					const points = params.labelLinePoints;
					// Update the end point.
					points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
					return {
						labelLinePoints: points
					};
				},
				itemStyle: {
					borderWidth: 0
				}
			}
		]
	};

	chart.setOption(option);

	window.addEventListener("resize", () => {
		chart.resize();
	});
};

const initTypeChart = () => {
	if (!typeChartRef.value) return;
	const chart = echarts.init(typeChartRef.value);

	const data = [
		{ value: 50, name: "企业" },
		{ value: 32, name: "高校" },
		{ value: 32, name: "科研院所" }
	];

	const option = {
		tooltip: {
			trigger: "item",
			formatter: "{b}: {c} ({d}%)"
		},
		color: [
			"#3B82F6", // 企业 - 蓝色
			"#feb64d", // 高校 - 橙色
			"#ff9f9f" // 科研院所 - 粉红
		],
		series: [
			{
				name: "制裁实体类型分布",
				type: "pie",
				radius: [73.5, 89.5],
				center: ["50%", "50%"],
				startAngle: -90,
				data: data,
				label: {
					show: true,
					alignTo: "edge",
					minMargin: 5,
					edgeDistance: 10,
					formatter: params => {
						return "{name|" + params.name + "}\n{value|" + params.value + "家 " + params.percent + "%}";
					},
					rich: {
						name: {
							fontSize: 18,
							fontWeight: 700,
							color: "rgb(59, 65, 75)",
							padding: [0, 0, 5, 0],
							fontFamily: "Microsoft YaHei",
							lineHeight: 26
						},
						value: {
							fontSize: 16,
							fontWeight: 400,
							color: "rgb(95, 101, 108)",
							fontFamily: "Microsoft YaHei",
							lineHeight: 24,
							padding: [5, 0, 0, 0]
						}
					}
				},
				labelLine: {
					show: true,
					length: 15,
					length2: 0,
					maxSurfaceAngle: 80,
					lineStyle: {
						width: 1
					}
				},
				labelLayout: function (params) {
					const isLeft = params.labelRect.x < chart.getWidth() / 2;
					const points = params.labelLinePoints;
					// Update the end point.
					points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
					return {
						labelLinePoints: points
					};
				},
				itemStyle: {
					borderWidth: 0
				}
			}
		]
	};

	chart.setOption(option);

	window.addEventListener("resize", () => {
		chart.resize();
	});
};

onMounted(() => {
	initMapChart();
	initDomainChart();
	initTypeChart();
});
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.data-statistics {
	width: 1601px;
	margin: 0 auto;
	padding-top: 16px;
	padding-bottom: 50px;
	.nav {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;
		.nav-item {
			width: 521px;
			height: 80px;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			position: relative;
			.item-position {
				position: absolute;
				top: 14px;
				left: 0;
				width: 8px;
				height: 52px;
				background-color: rgb(5, 95, 194);
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
			}

			.content {
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 30px;
				padding-right: 40px;
				box-sizing: border-box;

				.info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					.title {
						font-size: 20px;
						font-weight: 700;
						color: rgb(59, 65, 75);
						font-family: "Microsoft YaHei";
						line-height: 26px;
					}
					.subtitle {
						font-size: 16px;
						font-weight: 400;
						color: rgb(95, 101, 108);
						font-family: "Microsoft YaHei";
						margin-top: 5px;
						line-height: 24px;
					}
				}
				.number {
					display: flex;
					align-items: baseline;
					.num {
						font-size: 32px;
						font-weight: 700;
						color: #cd4246;
						font-family: "Microsoft YaHei";
						margin-right: 2px;
					}
					.unit {
						font-size: 32px;
						font-weight: 700;
						color: #cd4246;
						font-family: "Microsoft YaHei";
					}
				}
			}
		}
	}
	.main {
		width: 100%;
		height: 828px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
		.main-item {
			width: 792px;
			height: 406px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			border-radius: 10px;
			.country-list {
				width: 100%;
				height: 280px;
				padding: 0 20px;
				margin-bottom: 20px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.list-item {
					display: flex;
					align-items: center;
					margin-bottom: 16px;
					&:last-child {
						margin-bottom: 0;
					}
					.flag {
						width: 24px;
						height: 24px;
						border-radius: 50%;
						margin-right: 12px;
						object-fit: cover;
					}
					.country-name {
						width: 80px;
						font-size: 16px;
						font-weight: 400;
						color: rgb(59, 65, 75);
						font-family: "Microsoft YaHei";
						margin-right: 12px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.progress-bar-container {
						flex: 1;
						height: 8px;
						margin-right: 16px;
						.progress-bar {
							height: 100%;
							border-radius: 4px;
						}
					}
					.count {
						font-size: 16px;
						font-weight: 400;
						color: rgb(59, 65, 75);
						font-family: "Microsoft YaHei";
						min-width: 40px;
						text-align: right;
						&.highlight {
							color: #cd4246;
							font-weight: 700;
							font-size: 20px;
						}
					}
				}
			}
			.echarts {
				width: 100%;
				height: 280px;
				padding: 0 20px 0 20px;
				margin-bottom: 20px;
			}
			.bottom {
				width: 100%;
				height: 40px;
				padding: 0 19px 0 17px;
				box-sizing: border-box;
				.ai {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: rgba(246, 250, 255, 1);
					border-radius: 4px;
					border: 1px solid rgba(231, 243, 255, 1);
					padding: 6px 12px;
					.left {
						display: flex;
						align-items: center;
						.icon1 {
							width: 19px;
							height: 20px;
							margin-right: 13px;
						}
						.text {
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(5, 95, 194);
						}
					}
					.right {
						display: flex;
						align-items: center;
						.icon2 {
							width: 24px;
							height: 24px;
						}
					}
				}
			}
		}
	}
}
.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;
		.toggle-btns {
			display: flex;
			gap: 8px;
			margin-right: 20px;
			.t-btn {
				height: 28px;
				padding: 1px 8px;
				border: 1px solid transparent;
				border-radius: 4px;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				font-family: "Microsoft YaHei";
				color: rgb(59, 65, 75);
				cursor: pointer;
				box-sizing: border-box;
				border: 1px solid rgb(230, 231, 232);
				&.active {
					color: rgb(5, 95, 194);
					background-color: rgba(246, 250, 255, 1);
					border-color: rgb(5, 95, 194);
				}
			}
		}
		.btn {
			margin-left: 0;
		}
		.time-select {
			width: 120px;
			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;
		}
	}
}

.map-wrapper {
	width: 100%;
	height: 280px;
	display: flex;
	padding: 0 20px 0 20px;
	margin-bottom: 20px;
	box-sizing: border-box;

	.map-chart {
		flex: 1;
		height: 100%;
	}

	.rank-list {
		flex: 1;
		height: 100%;
		overflow-y: auto;
		padding-left: 20px;
		box-sizing: border-box;

		.rank-item {
			height: 36px;
			display: flex;
			align-items: center;
			margin-bottom: 4px;
			font-size: 14px;
			color: #333;
			cursor: pointer;

			&:hover {
				background-color: rgba(0, 0, 0, 0.02);
			}

			.rank-index {
				width: 24px;
				height: 24px;
				line-height: 24px;
				text-align: center;
				border-radius: 50%;
				background-color: #e6f4ff;
				color: #1677ff;
				margin-right: 16px;
				font-size: 12px;
				flex-shrink: 0;

				&.rank-1,
				&.rank-2,
				&.rank-3 {
					background-color: #e6f4ff;
					color: #1677ff;
				}
			}

			.rank-name {
				width: 70px;
				margin-right: 10px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				flex-shrink: 0;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(59, 65, 75);
			}

			.rank-bar-bg {
				flex: 1;
				height: 6px;
				background-color: transparent;
				border-radius: 3px;
				margin-right: 10px;
				position: relative;

				.rank-bar-fill {
					height: 100%;
					border-radius: 3px;
				}
			}

			.rank-value {
				min-width: 40px;
				text-align: right;
				color: #666;
				flex-shrink: 0;
			}
		}
	}
}
</style>
