import { $echarts } from '../../index.js';
import mapBg from './map_bg.png'

const mapConfig = {
    scale: 0.9,
    top: 60,
    bgBorderColor: 'rgba(255, 255, 255, 0.3)',
    bgAreaColor: 'rgba(0, 140, 255, 0.2)',
    borderWidth: 2,
};
export default ({ dom, param, opt }) => {
    let { level, state, mapType, map, region, down, scale } = param;

    // 导出配置项
    let option = {
        geo: [
            {
                // 地图图层
                map: '新疆维吾尔自治区',
                zoom: scale || mapConfig.scale,
                top: mapConfig.top + 30,
                emphasis: {
                    disabled: true,
                },
                itemStyle: {
                    borderWidth: 2,
                    borderColor: mapConfig.bgBorderColor,
                    areaColor: mapConfig.bgAreaColor,
                    opacity: 0.4,
                },
            },
            {
                // 地图图层
                map: '新疆维吾尔自治区',
                zoom: scale || mapConfig.scale,
                top: mapConfig.top + 20,
                emphasis: {
                    disabled: true,
                },
                itemStyle: {
                    borderWidth: 2,
                    borderColor: mapConfig.bgBorderColor,
                    areaColor: mapConfig.bgAreaColor,
                    opacity: 0.6,
                },
            },
            {
                // 地图图层
                map: '新疆维吾尔自治区',
                zoom: scale || mapConfig.scale,
                top: mapConfig.top + 10,
                emphasis: {
                    disabled: true,
                },
                label: {
                    show: mapType < 2 ? false : true,
                    color: '#fff',
                    emphasis: {
                        show: false,
                        color: '#fff',
                    },
                },
                itemStyle: {
                    borderWidth: 2,
                    borderColor: mapConfig.bgBorderColor,
                    areaColor: mapConfig.bgAreaColor,
                    opacity: 0.8,
                },
            },
            {
                // 地图边框
                map: '新疆维吾尔自治区',
                zoom: scale || mapConfig.scale,
                top: mapConfig.top,
                emphasis: {
                    disabled: true,
                },
                itemStyle: {
                    borderWidth: 5,
                    borderColor: '#008cff',
                },
            },
            {
                // 地图背景
                map: '新疆维吾尔自治区',
                zoom: scale || mapConfig.scale,
                top: mapConfig.top,
                emphasis: {
                    disabled: true,
                },
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#00C9FF',
                    color: {
                        image: mapBg,
                    },
                },
            },
        ],
        series: [
            {
                type: 'map',
                map: '新疆维吾尔自治区',
                top: mapConfig.top,
                selectedMode: false,
                zoom: scale || mapConfig.scale,
                label: {
                    show: true,
                    color: '#fff',
                    emphasis: {
                        show: true,
                        color: '#fff',
                    },
                },
                tooltip: {
                    show: true,
                },
                itemStyle: {
                    color: {
                        image: mapBg,
                        repeat: 'repeat',
                    },
                    areaColor: 'transparent',
                    borderWidth: 2,
                    borderColor: '008cff',
                    emphasis: {
                        areaColor: '#46fff0',
                        opacity: 0.4,
                    },
                },
                data: [],
                animation: true,
            },
        ],
    };

    // 渲染
    if (level < 2) {
        $echarts.echarts.registerMap(map.name, map.region);
        option.geo.forEach((item) => {
            item.map = map.name;
        });
        option.series[0].map = map.name;
        if (mapType < 2) {
            option.series[0].data = opt.data;
        }
        let extensOption = $echarts.extens(opt, option);
        var echarts = $echarts.render(dom, extensOption);
    }

    // 下钻事件
    if (state) {
        echarts.on('click', (e) => {
            const regionJson = region[e.name];
            // 包含该地区
            if (regionJson) {
                down(e.name, true, '');
            } else {
                const lnglat = echarts.convertFromPixel('geo', [e.event.offsetX, e.event.offsetY]);
                down(e.name, true, lnglat);
            }
        });
    }
    return echarts;
};