<template>
	<div class="visitor-trend">
		<div ref="chartRef" style="width: 100%; min-height: 290px" class="mt-10"></div>
		<div style="position: absolute; top: 20px; left: 0">
			<el-select v-model="selectedMap" style="width: 120px" @change="initChart">
				<el-option v-for="item in mapOptions" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
			<el-select v-model="classify" class="ml-2" style="width: 160px" @change="initChart">
				<el-option v-for="item in classifyOptions" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
		</div>
		<div style="position: absolute; top: 20px; right: 0">
			<el-select v-model="value" style="width: 84px" @change="initChart">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts/core';
import { MapChart } from 'echarts/charts';
import { TooltipComponent, GeoComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([MapChart, TooltipComponent, GeoComponent, CanvasRenderer]);

const chartRef = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
const mapOptions = [
	{ value: 'world', label: '世界' },
	{ value: 'asia', label: '亚洲' },
	{ value: 'europe', label: '欧洲' },
	{ value: 'northAmerica', label: '北美' },
	{ value: 'southAmerica', label: '南美' },
	{ value: 'africa', label: '非洲' },
	{ value: 'oceania', label: '大洋洲' },
];
const selectedMap = ref('world');
const value = ref('7');
const options = [
	{
		value: '7',
		label: '7天',
		selected: true,
	},
	{
		value: '30',
		label: '30天',
	},
];

const classify = ref('1');
const classifyOptions = [
	{
		value: '1',
		label: '访问',
		selected: true,
	},
	{
		value: '2',
		label: '访客数',
		selected: true,
	},
	{
		value: '3',
		label: '活动',
		selected: true,
	},
	{
		value: '4',
		label: '用户管理',
		selected: true,
	},
	{
		value: '5',
		label: '平均活动次数',
		selected: true,
	},
	{
		value: '6',
		label: '平均网站停留时间',
		selected: true,
	},
	{
		value: '7',
		label: '跳出率',
		selected: true,
	},
];

const mapFileMap: Record<string, string> = {
	world: '/map/custom.geo.json',
	asia: '/map/asia.geo.json',
	europe: '/map/europe.geo.json',
	northAmerica: '/map/northAmerica.geo.json',
	southAmerica: '/map/southAmerica.geo.json',
	africa: '/map/africa.geo.json',
	oceania: '/map/oceania.geo.json',
};

async function initChart() {
	if (!chartRef.value) return;
	if (chartInstance) {
		chartInstance.dispose();
	}
	chartInstance = echarts.init(chartRef.value);

	// 加载世界地图 geojson
	const mapKey = selectedMap.value;
	const mapFile = mapFileMap[mapKey];
	const response = await fetch(mapFile);
	const geoJson = await response.json();
	echarts.registerMap(mapKey, geoJson);
	const option = {
		tooltip: {
			trigger: 'item',
			formatter(val: any) {
				console.log(val);
				if (!val.data) return;
				mapOptions.forEach((item) => {
					if (item.value === mapKey) {
						val.data.name = item.label;
						console.log(val.data.name);
					}
				});
				return val.name + ': ' + val.data.value;
			},
		},
		visualMap: {
			min: 0,
			max: 10000,
			text: ['最大', '最小'],
			realtime: false,
			calculable: true,
			color: ['#0064d0', '#c3e0ff'],
		},
		series: [
			{
				type: 'map',
				name: mapOptions.find((opt) => opt.value === mapKey)?.label || '',
				map: mapKey,
				roam: true,
				label: { show: false },
				zoom: 1.2,
				itemStyle: {
					borderWidth: 0.5,
					borderColor: '#e4e7ed',
					borderType: 'solid',
				},
				emphasis: {
					label: {
						show: true,
						color: '#21272e',
					},
					itemStyle: {
						areaColor: '#58a0f4',
					},
				},
				data: [
					{ name: '日本', value: 4000 },
					{ name: '韩国', value: 3500 },
					{ name: '印度尼西亚', value: 3000 },
					{ name: '沙特阿拉伯', value: 2500 },
					{ name: '伊朗', value: 2000 },
					{ name: '土耳其', value: 1800 },
					{ name: '泰国', value: 1600 },
					{ name: '越南', value: 1400 },
					{ name: '菲律宾', value: 1200 },
					{ name: '巴基斯坦 ', value: 1000 },
				],
			},
		],
	};
	chartInstance.setOption(option);
	window.addEventListener('resize', handleResize);
}

const handleResize = () => {
	if (chartInstance) {
		chartInstance.resize();
	}
};

onMounted(() => {
	initChart();
});

onUnmounted(() => {
	if (chartInstance) {
		window.removeEventListener('resize', handleResize);
		chartInstance.dispose();
		chartInstance = null;
	}
});
</script>

<style scoped lang="scss">
.visitor-trend {
	position: relative;
	width: 100%;
	min-height: 300px;
}
</style>