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

const mapConfig = {
    scale: 1.4,
    top: 230,
    bgBorderColor: 'rgba(255, 255, 255, 0.3)',
    bgAreaColor: 'rgba(0, 140, 255, 0.2)',
    borderWidth: 2,
};
export default ({ dom, opt }) => {
    
    // 导出配置项
    let option = {
        geo: [
            // {
            //     // 地图图层
            //     map: 'mapDown',
            //     zoom: mapConfig.scale,
            //     top: mapConfig.top + 30,
            //     emphasis: {
            //         disabled: true,
            //     },
            //     itemStyle: {
            //         borderWidth: 2,
            //         borderColor: mapConfig.bgBorderColor,
            //         areaColor: mapConfig.bgAreaColor,
            //         opacity: 0.4,
            //     },
            // },
            // {
            //     // 地图图层
            //     map: 'mapDown',
            //     zoom: mapConfig.scale,
            //     top: mapConfig.top + 20,
            //     emphasis: {
            //         disabled: true,
            //     },
            //     itemStyle: {
            //         borderWidth: 2,
            //         borderColor: mapConfig.bgBorderColor,
            //         areaColor: mapConfig.bgAreaColor,
            //         opacity: 0.6,
            //     },
            // },
            // {
            //     // 地图图层
            //     map: 'mapDown',
            //     zoom: mapConfig.scale,
            //     top: mapConfig.top + 10,
            //     emphasis: {
            //         disabled: true,
            //     },
            //     itemStyle: {
            //         borderWidth: 2,
            //         borderColor: mapConfig.bgBorderColor,
            //         areaColor: mapConfig.bgAreaColor,
            //         opacity: 0.8,
            //     },
            // },
            // {
            //     // 地图边框
            //     map: 'mapDown',
            //     zoom: mapConfig.scale,
            //     top: mapConfig.top,
            //     emphasis: {
            //         disabled: true,
            //     },
            //     itemStyle: {
            //         borderWidth: 5,
            //         borderColor: '#008cff',
            //     },
            // },
            {
                // 地图背景
                map: 'mapDown',
                zoom: mapConfig.scale,
                top: mapConfig.top,
                label: {
                    show: true,
                    color: '#fff',
                    emphasis: {
                        show: false,
                        color: '#fff',
                    },
                },
                emphasis: {
                    disabled: true,
                },
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#00C9FF',
                    color: {
                        image: mapBg,
                        repeat: 'repeat',
                    },
                },
            },
        ],
        series: [
            {
                type: 'map',
                map: 'mapDown',
                top: mapConfig.top,
                selectedMode: false,
                zoom: mapConfig.scale,
                label: 'none',
                tooltip: 'none',
                itemStyle: {
                    color: {
                        image: mapBg,
                        repeat: 'repeat',
                    },
                    areaColor: 'transparent',
                    borderWidth: 2,
                    borderColor: '008cff',
                    emphasis: {
                        areaColor: '#46fff0',
                        opacity: 0.4,
                    },
                },
                data: [],
                animation: true,
            },
        ],
    };

    console.log(opt, option);
    // 渲染
    let extensOption = $echarts.extens(opt, option);

    let echarts = $echarts.render(dom, extensOption);

    return echarts;
};
