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

        }
    },
    mounted(){
        this.loadMap(this.data)
        window.chartClick = this.chartClick;
    },
    methods: {
        chartClick(id){
            this.$emit('projectid',id)
        },
        loadMap(outdata,tooltip) {

            var normalData = []
            var warningData = []
            var policeData = []
            var newData=[]
            for (let i = 0; i <outdata.length ; i++) {
                if(outdata[i].bjCount > 0){
                    policeData.push(outdata[i])
                }else {
                    if(outdata[i].yjCount > 0){
                        warningData.push(outdata[i])
                    }else{
                        normalData.push(outdata[i])
                    }
                }
            }

            normalData.map(x=>{
                x.icon = "image://http://fileimg.makalu.cc/WEB_0FAA4510A66B485BBE1B187349882276.png"
                return x
            })
            warningData.map(x=>{
                x.icon =  "image://http://fileimg.makalu.cc/WEB_A55D931BB10743E49D4FCBFE0D05E25E.png";
                return x
            })
            policeData.map(x=>{
                x.icon = "image://http://fileimg.makalu.cc/WEB_F2F136E5B14C4B6E91EDEB9919538815.png";
                return x
            })

            if(normalData.length>0){
                newData.push(normalData)
            }
            if(warningData.length>0){
                newData.push(warningData)
            }
            if(policeData.length>0){
                newData.push(policeData)
            }




            var series = [
                {
                    type: 'map',
                    roam: true,
                    zoom: 1.15,
                    map: 'china', //使用
                    label: {
                        normal: {
                            show: true,
                            fontSize:14,   //省会字体大小
                            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',

                            }
                        }
                    },
                },
            ]
            for (let i = 0; i < newData.length ; i++) {
                series.push({
                    type: 'scatter',    //effectScatter 水波纹效果     scatter  无效果
                    coordinateSystem: 'geo',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    showEffectOn: 'render',
                    itemStyle: {
                        normal: {
                            show: false,
                        }
                    },
                    symbolSize: 35,
                    symbol: newData[i][0].icon,
                    data: newData[i],
                    zlevel: 1,
                })
            }

            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 = ''
                        if(params.data){
                            tipHtml = '<div style="width: 300px;background: url(\'images/map_popup_bgd.png\')  no-repeat center/100% 100%;font-size: 14px;">\n' +
                                '    <div style="padding: 7px 3px 10px;">\n' +
                                '        <div onclick="chartClick('+params.data.id+')" style="height: 33px;width:100%;background: url(\'images/map_popup_title.png\')  no-repeat center/100% 100%;padding-left: 5px;line-height: 33px;color: #ffffff;display: flex;justify-content: space-between;cursor: pointer">\n' +
                                '            <div>'+params.data.project_abbreviation+'</div>\n' +
                                '            <div style="padding: 5px 10px"><img src="images/check_icon.png" width="10" height="20"></div>\n' +
                                '        </div>\n' +
                                '        <div  style="padding: 10px;color:#cbdaff;">\n' +
                                '            <table style="width: 100%">\n' +
                                '                <tr>\n' +
                                '                    <td style="width: 50%">\n' +
                                '                        <div style="height: 40px;line-height: 40px;"> 设备数量：<span style="color: #fff;font-size: 16px;">'+params.data.total+'</span></div>\n' +
                                '                    </td>\n' +
                                '                    <td style="width: 50%">\n' +
                                '                        <div style="height: 40px;line-height: 40px;"> 监控数量：<span style="color: #fff;font-size: 16px;">'+params.data.jkTotal+'</span></div>\n' +
                                '                    </td>\n' +
                                '                </tr>\n' +
                                '                <tr>\n' +
                                '                    <td style="width: 50%">\n' +
                                '                        <div style="height: 40px;line-height: 40px;"> 预警数量：<span style="color: #fff;font-size: 16px;">'+params.data.yjCount+'</span></div>\n' +
                                '                    </td>\n' +
                                '                    <td style="width: 50%">\n' +
                                '                        <div style="height: 40px;line-height: 40px;"> 报警数量：<span style="color: #fff;font-size: 16px;">'+params.data.bjCount+'</span></div>\n' +
                                '                    </td>\n' +
                                '                </tr>\n' +
                                '            </table>\n' +
                                '        </div>\n' +
                                '        <div style="padding: 0 12px;">\n' +
                                '            <div style="color: #49b3ff;background: #132c55;padding: 10px;white-space:normal">'+params.data.address+'</div>\n' +
                                '        </div>\n' +
                                '    </div>\n' +
                                '</div>'
                            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: series
            };
            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)
            window.chartClick = this.chartClick;
        }
    },
})