/**
 * 顶部header
 */
Vue.component("labour-china-map", {
    template: `
       <div :style="{'height': height+'px'}"   ref="map"></div>
    `,
    props: {
        data:{
            type:Array
        },
        tooltip:{
            type:Array
        },
        height:{
            type:Number
        }
    },
    data() {
        return {
            option:{},

        }
    },
    mounted(){
        this.loadMap(this.data,this.tooltip)
        window.chartClick = this.chartClick;
    },
    methods: {
        chartClick(id){

            this.$emit('projectid',id)
        },
        loadMap(outdata,tooltip) {
            var iconGD = "image://http://fileimg.makalu.cc/WEB_0EE6DA50925A4C27A126669209F1A5E2.png";
            var myChart = echarts.init(this.$refs.map);
            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;
            });
            this.option = {
                tooltip: {
                    show: true,
                    trigger: "item",
                    enterable: true,
                    showContent: true,
                    padding:0,
                    triggerOn:'click',
                    formatter: function(params) {
                        var tipHtml = ''
                        console.log(params.dataIndex)
                        if(params.data){
                            tipHtml = tooltip[params.dataIndex]
                            return tipHtml
                        }
                    },
                },
                geo: {
                    map: 'china',
                    show: true,
                    roam: true,
                    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: 'map',
                    roam: true,
                    zoom: 1.15,
                    map: 'china', //使用
                    label: {
                        normal: {
                            show: true,
                            fontSize:20,   //省会字体大小
                            textStyle: {
                                color: '#ffffff',
                            }
                        },
                        emphasis: {
                            show: false,
                            color: '#ffffff',   //指上省会字体颜色
                        }
                    },
                    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: '#ffffff',

                            }
                        }
                    },
                },
                    {
                        type: 'scatter',    //effectScatter 水波纹效果     scatter  无效果
                        coordinateSystem: 'geo',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        showEffectOn: 'render',
                        itemStyle: {
                            normal: {
                                show: false,

                            }
                        },
                        symbolSize: 35,
                        symbol: iconGD,
                        data: outdata,
                        zlevel: 1,

                    }]
            };
            myChart.setOption(this.option);

            myChart.on('georoam', function(params) {
                var option = myChart.getOption(); //获得option对象
                if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
                    option.geo[0].zoom = option.series[0].zoom+0.02; //下层geo的缩放等级跟着上层的geo一起改变
                    option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
                } else { //捕捉到拖曳时
                    option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
                }
                myChart.setOption(option); //设置option
            });
        },

    },
    watch: {
        data: function (n,o) {
            this.loadMap(this.data,this.tooltip)
            window.chartClick = this.chartClick;
        }
    },
})