<template>
    <div id="worldMap" style="width: 100%; height: 600px;"></div>
</template>

<script>
import * as echarts from "echarts";
// import "echarts/map/js/china"; // 引入 ECharts 地图
import { ref, watch, onMounted, defineComponent } from "vue";
import appData from "./continent_geo.json";

export default defineComponent({
    name: "WorldMap",
    props: {
        data: {
            type: Array,
            required: true,
        },
        title: {
            type: Object,
            required: true,
        },
        pieces: {
            type: Array,
            default: () => [
                { lte: 0, label: "0" },
                { gte: 1, lte: 100, label: "1-100" },
                { gte: 101, lte: 500, label: "101-500" },
                { gte: 501, label: ">=500(单位: 万美元)" },
            ],
        },
    },
    setup(props) {
        const chartInstance = ref(null);

        // 初始化地图
        const initMap = () => {
            if (!chartInstance.value) return;

            const myChart = echarts.init(chartInstance.value);

            echarts.registerMap("continent", appData);

            myChart.setOption({
                title: {
                    top: 10,
                    text: "消费资金分布",
                    subtext: "",
                    x: "center",
                    textStyle: {
                        color: "#1A1A1E",
                    },
                },
                tooltip: {
                    trigger: "item",
                    formatter: function (params) {
                        const dom = `
                          <div>${params.data?.name || "未知"}</div>
                          <div>消费：${params.data?.value || 0}</div>
                          <div>体验：${params.data?.value2 || 0}</div>
                        `;
                        return dom;
                    },
                },
                visualMap: {
                    bottom: "6%",
                    left: "1%",
                    textStyle: { color: "#73747E" },
                    pieces: props.pieces,
                    inRange: {
                        color: ["#8CBB4B", "#133891", "#F2853E", "#E82323"],
                    },
                },
                series: [
                    {
                        type: "map",
                        mapType: "continent",
                        zoom: 1.1,
                        aspectScale: 1.1,
                        itemStyle: {
                            normal: { label: { show: false } },
                            emphasis: { label: { show: true } },
                        },
                        data: props.data,
                    },
                ],
            });

            // 保存实例以支持窗口调整大小
            chartInstance.value = myChart;
        };

        // 监听数据变化，重新初始化地图
        watch(
            () => props.data,
            () => {
                if (chartInstance.value) {
                    initMap();
                }
            },
            { deep: true }
        );

        // 挂载后初始化地图
        onMounted(() => {
            chartInstance.value = document.getElementById("worldMap");
            initMap();

            // 窗口大小调整时自动适配
            window.addEventListener("resize", () => {
                chartInstance.value?.resize();
            });
        });

        return {
            chartInstance,
        };
    },
});
</script>

<style scoped>
#worldMap {
    width: 100%;
    height: 600px;
}
</style>
