<template>
    <el-row class="flex-auto">
        <el-col :sm="14" :xs="24">
            <v-chart
                ref="userMapChartRef"
                :option="userCountMapOption"
                style="height: 468px"
            />
        </el-col>
        <el-col :sm="10" :xs="24">
            <rankList :data-list="userCountDataRank" />
        </el-col>
    </el-row>
</template>

<script setup>
    import { ref, reactive, watch } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import { use, registerMap } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { MapChart } from 'echarts/charts';
    import {
        VisualMapComponent,
        GeoComponent,
        TooltipComponent
    } from 'echarts/components';
    import VChart from 'vue-echarts';
    import { useEcharts } from '@/utils/use-echarts';
    import rankList from './rank-list.vue';
    import axios from 'axios';

    const props = defineProps({
        provinceData: {
            type: Array,
            default: () => []
        }
    });

    use([
        CanvasRenderer,
        MapChart,
        VisualMapComponent,
        GeoComponent,
        TooltipComponent
    ]);

    const userMapChartRef = ref(null);

    useEcharts([userMapChartRef]);

    /** 用户分布前 10 名 */
    const userCountDataRank = ref([]);

    /** 用户分布地图配置 */
    const userCountMapOption = reactive({});

    /** 获取中国地图数据并注册地图 */
    const registerChinaMap = () => {
        axios.get('/json/china-provinces.geo.json').then((res) => {
            registerMap('china', res.data);
            updateMapData();
        });
    };

    /** 更新地图数据 */
    const updateMapData = () => {
        if (!props.provinceData || !props.provinceData.length) {
            // 如果没有数据，清空排行榜
            userCountDataRank.value = [];
            return;
        }

        //特殊省份的映射
        const provinceMap = {
            内蒙古自治区: '内蒙古',
            香港特别行政区: '香港',
            澳门特别行政区: '澳门',
            西藏自治区: '西藏',
            宁夏回族自治区: '宁夏',
            新疆维吾尔自治区: '新疆',
            广西壮族自治区: '广西',
            北京市: '北京',
            天津市: '天津',
            上海市: '上海',
            重庆市: '重庆'
        };

        // 所有省份列表
        const allProvinces = [
            '北京',
            '天津',
            '河北',
            '山西',
            '内蒙古',
            '辽宁',
            '吉林',
            '黑龙江',
            '上海',
            '江苏',
            '浙江',
            '安徽',
            '福建',
            '江西',
            '山东',
            '河南',
            '湖北',
            '湖南',
            '广东',
            '广西',
            '海南',
            '重庆',
            '四川',
            '贵州',
            '云南',
            '西藏',
            '陕西',
            '甘肃',
            '青海',
            '宁夏',
            '新疆',
            '台湾',
            '香港',
            '澳门'
        ];

        // 创建所有省份的初始数据
        const initialData = allProvinces.map((province) => ({
            name: province,
            value: 0,
            bookNum: 0,
            comparisonStr: '-'
        }));

        // 用实际数据更新初始数据
        const provinceDataMap = new Map(
            props.provinceData.map((item) => [
                provinceMap[item.provinceName] || item.provinceName,
                {
                    value: item.orderNum,
                    bookNum: item.bookNum,
                    comparisonStr: item.comparisonStr
                }
            ])
        );

        const data = initialData.map((item) => ({
            ...item,
            ...(provinceDataMap.get(item.name) || {})
        }));

        const temp = data.sort((a, b) => b.value - a.value);
        const min = 0; // 设置最小值为0
        const max = Math.max(...temp.map((item) => item.value), 1);

        // 更新排行榜数据，转换为与原始数据结构一致的格式
        const list = temp.filter((item) => item.value > 0); // 只显示有数据的省份，最多10个
        userCountDataRank.value = list.map((d) => {
            // 查找原始数据中对应的省份信息
            const originalData = props.provinceData.find(
                (item) =>
                    (provinceMap[item.provinceName] || item.provinceName) ===
                    d.name
            );

            return {
                provinceName: originalData ? originalData.provinceName : d.name,
                orderNum: d.value,
                bookNum: d.bookNum,
                comparisonStr: d.comparisonStr
            };
        });

        Object.assign(userCountMapOption, {
            tooltip: {
                trigger: 'item',
                borderWidth: 1,
                formatter: (params) => {
                    const { name, value, bookNum } = params.data;
                    return `${name}<br/>订单数：${value}<br/>本数：${bookNum}`;
                }
            },
            visualMap: {
                min: min,
                max: max,
                text: ['高', '低'],
                calculable: true,
                bottom: 10
            },
            series: [
                {
                    name: '订单数',
                    label: {
                        show: true
                    },
                    type: 'map',
                    map: 'china',
                    data: data
                }
            ]
        });
    };

    // 监听provinceData变化
    watch(
        () => props.provinceData,
        () => {
            updateMapData();
        },
        { deep: true, immediate: true }
    );

    registerChinaMap();
</script>

<style lang="scss" scoped>
    .user-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .user-item-body {
            flex: 1;
            padding: 0 10px 0 12px;
        }

        :deep(.el-progress-bar__outer) {
            background-color: transparent;
        }
    }
</style>
