/*
title: GEO SVG Map
category: map
titleCN: 地图（SVG）
*/

$.get(ROOT_PATH + '/data/asset/geo/Sicily_prehellenic_topographic_map.svg', function (svg) {

    echarts.registerMap('sicily', {svg: svg});

    option = {
        tooltip: {
            formatter: function (params) {
                console.log(params);
                return [
                    params.name + ':',
                    'xxxxxxxxxxxxxxxx',
                    'xxxxxxxxxxxxxxxx',
                    'xxxxxxxxxxxxxxxx'
                ].join('<br>')
            }
        },
        geo: [{
            map: 'sicily',
            roam: true,
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            selectedMode: 'single',
            tooltip: {
                show: true,
                confine: true,
                formatter: function (params) {
                    return [
                        'This is the introduction:',
                        'xxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxx'
                    ].join('<br>');
                }
            },
            itemStyle: {
                color: null
            },
            emphasis: {
                label: {
                    show: false
                }
            },
            select: {
                itemStyle: {
                    color: '#b50205'
                },
                label: {
                    show: false
                }
            },
            tooltip: {
                // Set it not enable tooltip in geo component.
                show: true
            },
            regions: [{
                name: 'route1',
                itemStyle: {
                    borderWidth: 0
                },
                select: {
                    itemStyle: {
                        color: '#b5280d',
                        borderWidth: 0
                    }
                },
                tooltip: {
                    position: 'right',
                    alwaysShowContent: true,
                    enterable: true,
                    extraCssText: 'user-select: text',
                    formatter: [
                        'Route 1:',
                        'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
                    ].join('<br>')
                }
            }, {
                name: 'route2',
                itemStyle: {
                    borderWidth: 0
                },
                select: {
                    itemStyle: {
                        color: '#b5280d',
                        borderWidth: 0
                    }
                },
                tooltip: {
                    position: 'left',
                    alwaysShowContent: true,
                    enterable: true,
                    extraCssText: 'user-select: text',
                    formatter: [
                        'Route 2:',
                        'xxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxx',
                        'xxxxxxxxxxxxxx'
                    ].join('<br>')
                }
            }]
        }],


        // -------------
        // Make buttons
        grid: {
            top: 10,
            left: 'center',
            width: 80,
            height: 20
        },
        xAxis: { axisLine: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, axisTick: { show : false } },
        yAxis: { axisLine: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, axisTick: { show : false } },
        series: {
            type: 'scatter',
            itemStyle: {
            },
            label: {
                show: true,
                borderColor: '#999',
                borderWidth: 1,
                borderRadius: 2,
                backgroundColor: '#fff',
                padding: [3, 5],
                fontSize: 18,
                opacity: 1,
                color: '#333'
            },
            encode: {
                label: 2
            },
            symbolSize: 0,
            tooltip: { show: false },
            selectedMode: 'single',
            select: {
                label: {
                    color: '#fff',
                    borderColor: '#555',
                    backgroundColor: '#555'
                }
            },
            data: [
                [0, 0, 'route1'],
                [1, 0, 'route2']
            ]
        }
        // Make buttons end
        // -----------------
    };

    myChart.setOption(option);

    myChart.on('selectchanged', function (params) {
        if (!params.selected.length) {
            myChart.dispatchAction({
                type: 'hideTip'
            });
            myChart.dispatchAction({
                type: 'geoSelect',
                geoIndex: 0
                // Use no name to unselect.
            });
        }
        else {
            var btnDataIdx = params.selected[0].dataIndex[0];
            var name = option.series.data[btnDataIdx][2];

            myChart.dispatchAction({
                type: 'geoSelect',
                geoIndex: 0,
                name: name
            });
            myChart.dispatchAction({
                type: 'showTip',
                geoIndex: 0,
                name: name
            });
        }
    });

});