/**
 * 顶部header
 */
Vue.component("china-map-copy", {
    template: `
       <div :style="{'height': height+'px'}"   ref="map"></div>
    `,
    props: {
        data:{
            type:Array
        },
        height:{
            type:Number
        },
        projectid:{
            type:Number
        }
    },
    data() {
        return {
            option:{}
        }
    },
    mounted(){
        this.loadMap(this.data)
        window.chartClick = this.chartClick;
    },
    methods: {
        chartClick(id){
            this.$emit('projectid',id)
        },
        loadMap(outdata) {
            var myChart = echarts.init(this.$refs.map);
            var max =1000,
                min = 1;
            var maxSize4Pin = 100,
                minSize4Pin = 20;
            var geoCoordMap = {};
            /*获取地图数据*/
            var mapFeatures = echarts.getMap('china').geoJson.features;
            //  console.log(mapFeatures)
            mapFeatures.forEach(function(v) {
                // 地区名称
                var name = v.properties.name;
                // 地区经纬度
                geoCoordMap[name] = v.properties.cp;
            });

            var convertData = function(outdata) {
                var res = [];
                for (var i = 0; i < outdata.length; i++) {
                    var geoCoord = geoCoordMap[outdata[i].name];
                    if (geoCoord) {
                        res.push({
                            name: outdata[i].name,
                            value: geoCoord.concat(outdata[i].count),
                            items: outdata[i].items,
                        });
                    }
                }
                return res;
            };

            this.option = {
                tooltip: {
                    show: true,
                    trigger: "item",
                    enterable: true,
                    showContent: true,
                    padding:0,
                    triggerOn:'click',
                    formatter: function(params) {
                        var tipHtml = ''
                        if(params.data){
                            tipHtml += '<div style="background:rgba(22,80,158,0.5);padding: 0 10px;">'
                                +'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);">'+'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;">'+'</i>'
                                +'<span style="margin-left:10px;color:#fff;font-size:16px;">'+params.data.name+' （项目总数：'+params.data.value[2]+'）'+'</span>'+'</div>'
                                +'<div style="padding:5px;max-height: 350px;overflow: auto" class="china-map">'
                            for(var i=0;i<params.data.items.length;i++){
                                tipHtml += '<p style="color:#11ee7d;padding:8px 0;cursor: pointer" onclick="chartClick('+params.data.items[i].id+')">'+params.data.items[i].projectName+'</p>'
                            }
                            tipHtml += '</div>'
                                +'</div>';
                            return tipHtml
                        }
                    },
                },
                geo: {
                    map: 'china',
                    show: true,
                    roam: false,
                    zoom: 1.17,
                    label: {
                        emphasis: {
                            show: false,
                        }
                    },
                    layoutSize: "100%",
                    itemStyle: {
                        // normal: {
                        //     areaColor: '#000',   //背景颜色
                        //     borderColor: '#8ac2fb',  //省划分边线
                        //     borderWidth: 10,   //边线的粗细
                        // },
                        // emphasis: {
                        //     areaColor: '#002d90' , //指上背景限色
                        // },
                        areaColor: "#86c2f8",
                        borderColor: "#86c2f8",
                        shadowColor: "#86c2f8",
                        shadowBlur: 25,
                        borderWidth: 5,
                    },
                },
                series: [
                    {
                        type: "scatter",
                        coordinateSystem: "geo",
                        symbolSize:25,
                        label: {
                            normal: {
                                formatter: "{b}",
                                position: "top",
                                show: true,
                                fontSize:14,   //省会字体大小
                                fontWeight: "bold",
                                color: "#ffffff",
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "#ffffff",
                            },
                        },
                        data: convertData(outdata),
                    },
                    {
                        type: 'map',
                        roam: false,
                        zoom: 1.15,
                        map: 'china', //使用
                        label: {
                            normal: {
                                show: true,
                                fontSize:14,   //省会字体大小

                                textStyle: {
                                    color: '#ffffff',
                                }
                            },
                            emphasis: {
                                show: false,
                                color: '#11ee7d',   //指上省会字体颜色
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: {
                                    type: "radial",
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#1c2a4c", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#1f335e", // 100% 处的颜色
                                        },
                                    ],
                                    globalCoord: true, // 缺省为 false
                                },
                                shadowColor: "rgb(58,115,192)",
                                borderColor: '#8ac2fb'
                            },
                            // normal: {
                            //     areaColor: '#141e37',   //背景颜色
                            //     borderColor: '#8ac2fb',  //省划分边线
                            //     borderWidth: 1,   //边线的粗细
                            // },
                            emphasis: {
                                areaColor: '#22578b' , //指上背景限色
                                textStyle: {
                                    color: '#11ee7d',

                                }
                            }
                        },
                    },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        rippleEffect: {
                            brushType: 'stroke',//fill
                            period: 2,
                            scale: 3,
                        },
                        showEffectOn: 'render',
                        symbol: 'circle',
                        symbolSize:25,
                        zlevel: 1,
                        /*symbolSize: function(val) {
                            if (val[2] === 0) {
                                return 0;
                            }
                            var a = (maxSize4Pin - minSize4Pin) / (max - min);
                            var b = maxSize4Pin - a * max;
                            return a * val[2] + b * 1.2;
                        },*/
                        itemStyle: {
                            normal: {
                                show: true,
                                color: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.5,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(129,229,255,1)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(129,229,255,1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(129,229,255,1)'
                                    }],
                                    global: false // 缺省为 false
                                },
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                color: '#fff',
                                fontWeight: 'bold',
                                position: 'inside',//  inside  中间
                                formatter: function(para) {
                                    return '{cnNum|' + para.data.value[2] + '}'
                                },
                                rich: {
                                    cnNum: {
                                        fontSize: 16,
                                        color: '#000000',
                                        fontWeight:'bold',
                                    }
                                }
                            },
                        },
                        data: convertData(outdata),


                    }
                ]
            };
            myChart.setOption(this.option);
        }
    },
    watch:{
        data: function (n,o) {
            this.loadMap(this.data)
        }
    }

})