<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">{{ totalCount.cnCount }}</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">{{ totalCount.cn50RuleCount }}</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">{{ totalCount.techDomainCount }}</span>
						<span class="unit">个</span>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="main-item">
				<AnalysisBox title="制裁实体领域分布情况">
					<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>
				</AnalysisBox>
			</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="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> -->
				<AnalysisBox title="制裁实体类型分布情况">
					<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>
				</AnalysisBox>
			</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> -->
				<AnalysisBox title="制裁实体国家分布情况">
					<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>
				</AnalysisBox>
			</div>
			<div class="main-item">
				<AnalysisBox title="制裁实体地域分布情况">
					<div class="map-wrapper">
						<div class="map-chart" ref="mapChartRef"></div>
						<div class="rank-list">
							<div class="rank-item" v-for="(item, index) in regionDistribution" :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: (maxRegionCount > 0 ? (item.count / maxRegionCount) * 100 : 0) + '%', background: getBarColor(index) }">
									</div>
								</div>
								<div class="rank-value">{{ item.count }}家</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>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch } 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"
import { useRouter } from "vue-router";
import { getSingleSanctionTotalCount, getSingleSanctionDomainCount, getSingleSanctionEntityTypeCount, getSingleSanctionEntityCountryCount, getSingleSanctionEntityRegionCount } from "@/api/exportControlV2.0";

// 单次制裁-数据统计-制裁实体地域分布情况
const regionDistribution = ref([]);
const maxRegionCount = ref(0);
// 单次制裁-数据统计-制裁实体地域分布情况-请求
const getRegionData = async () => {
	if (!sanRecordId.value) return;
	try {
		const params = { sanRecordId: sanRecordId.value };
		if (regionTime.value && regionTime.value !== 'all') {
			params.startDate = `${regionTime.value}-01-01`;
			params.endDate = `${regionTime.value}-12-31`;
		}
		const res = await getSingleSanctionEntityRegionCount(params);
		if (res.code === 200) {
			regionDistribution.value = res.data || [];
			maxRegionCount.value = Math.max(...regionDistribution.value.map(item => item.count), 0);
			initMapChart();
		}
	} catch (error) {
		console.log(error);
	}
}



// 单次制裁-数据统计-制裁实体国家分布情况
const countryDistribution = ref([]);
// 单次制裁-数据统计-制裁实体国家分布情况-请求
const getCountryCount = async () => {
	if (!sanRecordId.value) return;
	try {
		const params = { sanRecordId: sanRecordId.value };
		const res = await getSingleSanctionEntityCountryCount(params);
		if (res.code === 200) {
			const rawData = res.data || [];
			// 找出最大值用于计算比例
			const maxCount = Math.max(...rawData.map(item => item.count), 0);

			countryDistribution.value = rawData.map((item, index) => {
				// 计算宽度，最大值对应 80%
				const width = maxCount > 0 ? (item.count / maxCount) * 80 + '%' : '0%';

				// 根据索引分配渐变色
				let gradient = "";
				if (index === 0) {
					gradient = "linear-gradient(90deg, rgba(205, 66, 70, 0) 0%, rgba(205, 66, 70, 1) 100%)";
				} else if (index === 1 || index === 2) {
					gradient = "linear-gradient(90deg, rgba(255, 172, 77, 0) 0%, rgba(255, 172, 77, 1) 100%)";
				} else {
					gradient = "linear-gradient(90deg, rgba(5, 95, 194, 0) 0%, rgba(5, 95, 194, 1) 100%)";
				}

				return {
					...item,
					width,
					gradient
				};
			});
		}
	} catch (error) {
		console.log(error);
	}
}



// 单次制裁-数据统计-制裁实体类型分布情况
const entityTypeCount = ref([]);
// 单次制裁-数据统计-制裁实体类型分布情况-请求
const getEntityTypeCount = async () => {
	if (!sanRecordId.value) return;
	try {
		const params = { sanRecordId: sanRecordId.value };
		if (typeTime.value && typeTime.value !== 'all') {
			params.startDate = `${typeTime.value}-01-01`;
			params.endDate = `${typeTime.value}-12-31`;
		}
		const res = await getSingleSanctionEntityTypeCount(params);
		if (res.code === 200) {
			entityTypeCount.value = res.data || [];
			initTypeChart();
		}
	} catch (error) {
		console.log(error);
	}
}




// 单次制裁-数据统计-制裁实体领域分布情况
const domainCount = ref([]);
// 单次制裁-数据统计-制裁实体领域分布情况-请求
const getDomainCount = async () => {
	if (!sanRecordId.value) return;
	try {
		const params = { sanRecordId: sanRecordId.value };
		if (domainTime.value && domainTime.value !== 'all') {
			params.startDate = `${domainTime.value}-01-01`;
			params.endDate = `${domainTime.value}-12-31`;
		}
		const res = await getSingleSanctionDomainCount(params);
		if (res.code === 200) {
			domainCount.value = res.data || [];
			initDomainChart();
		}
	} catch (error) {
		console.log(error);
	}
}


// 单次制裁-数据统计-总量统计
const totalCount = ref({});
// 单次制裁-数据统计-总量统计-请求
const getTotalCount = async () => {
	if (!sanRecordId.value) return;
	try {
		const res = await getSingleSanctionTotalCount({ sanRecordId: sanRecordId.value });
		if (res.code === 200) {
			totalCount.value = res.data || {};
		}
	} catch (error) {
		console.log(error);
	}
}


const router = useRouter();
const sanRecordId = ref("")
const getUrlParams = () => {
	const urlParams = new URLSearchParams(window.location.search);
	sanRecordId.value = urlParams.get("id") || ""
}

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

watch(domainTime, () => {
	getDomainCount();
});

watch(typeTime, () => {
	getEntityTypeCount();
});
watch(regionTime, () => {
	getRegionData();
});



const timeOptions = [
	{ label: "全部时间", value: "all" }
];
// 生成2000-2025年的选项
for (let i = 2025; i >= 2000; i--) {
	timeOptions.push({ label: `${i}年`, value: `${i}` });
}

// 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 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 initMapChart = () => {
	if (!mapChartRef.value) return;
	// 销毁旧实例
	const oldChart = echarts.getInstanceByDom(mapChartRef.value);
	if (oldChart) {
		oldChart.dispose();
	}
	const chart = echarts.init(mapChartRef.value);
	echarts.registerMap("china", chinaJson);

	const scatterData = regionDistribution.value.map(item => {
		return {
			name: item.name,
			value: [item.lon, item.lat, item.count]
		};
	});

	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: scatterData,
				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 oldChart = echarts.getInstanceByDom(domainChartRef.value);
	if (oldChart) {
		oldChart.dispose();
	}
	const chart = echarts.init(domainChartRef.value);

	const data = domainCount.value.map(item => ({
		value: item.count,
		name: item.name
	}));

	const option = {
		tooltip: {
			trigger: "item",
			formatter: "{b}: {c} ({d}%)"
		},
		color: [
			"#60acfc", // 集成电路 - 蓝色
			"#feb64d", // 人工智能 - 橙色
			"#5bc49f", // 通信网络 - 青色
			"#959cf3", // 量子科技 - 淡蓝紫
			"#ff7c7c", // 先进制造 - 红色
			"#b689ea", // 新材料 - 紫色
			"#32d3eb" // 航空航天 - 浅蓝
		],
		series: [
			{
				name: "制裁实体领域分布",
				type: "pie",
				radius: [65, 81],
				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: [10, 0, 10, 0],
							fontFamily: "Microsoft YaHei",
							lineHeight: 22
						},
						value: {
							fontSize: 16,
							fontWeight: 400,
							color: "rgb(95, 101, 108)",
							fontFamily: "Microsoft YaHei",
							lineHeight: 22,
							padding: [10, 0, 10, 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 oldChart = echarts.getInstanceByDom(typeChartRef.value);
	if (oldChart) {
		oldChart.dispose();
	}
	const chart = echarts.init(typeChartRef.value);

	const data = entityTypeCount.value.map(item => ({
		value: item.count,
		name: item.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(() => {
	// 获取url参数
	getUrlParams();
	// 单次制裁-数据统计-总量统计-请求
	getTotalCount();
	// 单次制裁-数据统计-制裁实体领域分布情况-请求
	getDomainCount();
	// 单次制裁-数据统计-制裁实体类型分布情况-请求
	getEntityTypeCount();
	// 单次制裁-数据统计-制裁实体国家分布情况-请求
	getCountryCount();
	// 单次制裁-数据统计-制裁实体地域分布情况-请求
	getRegionData();

	initMapChart();
	// initDomainChart(); // 移到 getDomainCount 回调中初始化
	// initTypeChart(); // 移到 getEntityTypeCount 回调中初始化
});
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}

.data-statistics {
	width: 1601px;
	margin: 0 auto;
	padding-top: 16px;
	padding-bottom: 16px;

	.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 {
				overflow: auto;
				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>
