
<template>
  <div style="width: 100%;height: 100%">
    <!--<div  style="height: 40px;"><span v-for="i in list"  @click="selmap(i)">{{i}}———></span></div>-->
    <div :id="idname"  style="text-align: left"></div>
  </div>

</template>

<script>

    import '../../../stores/shanxi1.js';
    import * as DataSql from '../../../stores/DataSql'
    import co from 'co'


    export default {
        name: 'echart-map',
        title:'echart-map',
        props: {
            mode: {
                type:String,
                default:'1'
            },
            idname: {
                type:String,
                default:'ssss'
            },
            index:Number,
        },
        data() {
            return {
                mapdata:[
                    {name:'陕西',value:require('../../../../static/shanxi1.json')},
                    {name:'中国',value:require('../../../../static/res.json')},
                    {name:'保定',value:require('../../../../static/baoding1.json')},
                    {name:'廊坊',value:require('../../../../static/langfang.json')},
                    // {name:'咸阳市',value:require('../../../static/xianyangshi.json')},
                    // {name:'西安市',value:require('../../../static/xianshi.json')}
                ],
                list:[],
                xc:'',
                timer:'',
                resdata:[],
            }
        },
        methods: {
            drawChinaMap(mapjson,data) {
                this.$parent.$parent.loadnum++
                var oroptionmapjsonr_charts =this.$echarts.init(document.getElementById(this.idname));
                var scale=this.$parent.$parent.$parent.scale
                console.log(scale,'asdasdasd')
                this.xc=oroptionmapjsonr_charts
                var geoCoordMap = {};

                this.$echarts.registerMap(mapjson.name, mapjson.value);
                oroptionmapjsonr_charts.showLoading();
                var mapFeatures = this.$echarts.getMap(mapjson.name).geoJson.features;
                oroptionmapjsonr_charts.hideLoading();


                var serise = []

                serise = this.getsericer(data)


                var colormode=''
                if(this.mode=='0'){colormode="#e7c83c"}
                if(this.mode=='1'){colormode="#66f2de"}

                var  col=['#2a4096','#1285de','#27459b','#284ba5','#225bb2','#2353a8','#244ca3','#1775cd','#1e64bc','#05a0fc','#108de7','#1b6dc3']
                let colors=[]
                for(var i =0;i<data.length;i++){
                    var jo={
                        name: data[i].name,
                        itemStyle: {
                            areaColor: col[i] ,
                            // color: '#02363f'
                            color:  col[i]
                        }
                    }
                    colors.push(jo)
                }
                var option = {

                    // title: {
                    //     text: '天然气公司分布图',
                    //
                    //     subtext: '天然气公司统计饼图',
                    //     x: '40%'
                    // },
                    legend: {
                        show: true,
                        bottom: '3%',
                        itemWidth: 18,
                        textStyle: {
                            color: '#333333',
                            fontSize: 12,
                            fontStyle: 'italic',
                        }
                    },
                    color: col,
                    tooltip: {
                        show: true,
                        alwaysShowContent: false,
                        backgroundColor: '#ffffff',
                        borderColor: '#3f99ff',
                        borderWidth: 1,
                        padding: 10,
                        hideDelay: 100,
                        triggerOn: 'mousemove',
                        enterable: true,
                        position: function (point, params, dom, rect, size) {
                            //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
                            var x = point[0]; //
                            var y = point[1];
                            var viewWidth = size.viewSize[0];
                            var viewHeight = size.viewSize[1];
                            var boxWidth = size.contentSize[0];
                            var boxHeight = size.contentSize[1];
                            var posX = 0; //x坐标位置
                            var posY = 0; //y坐标位置

                            if (x < boxWidth) { //左边放不开
                                posX = 5;
                            } else { //左边放的下
                                posX = x - boxWidth;
                            }

                            if (y < boxHeight) { //上边放不开
                                posY = 5;
                            } else { //上边放得下
                                posY = y - boxHeight;
                            }

                            return [posX - 20, posY - 20];

                        },
                        extraCssText: 'width: auto;height:auto;',
                        formatter: function (params) {
                                return '<div style=\'text-align: center;font-size:16px;height: 1px;margin-bottom: 5px；font-weight: normal\'><span style="color:#087afd;font-size:16px;font-weight: normal">' + params.data.name + '</span></div><br/><span style="color:#087afd;font-size:16px;font-weight: normal">'
                                    + '售气量&nbsp;&nbsp;<span style="color:#ff4f01;font-size:16px;font-weight: normal">' + params.data.value[2] + '</span></span>';
                        }
                    },


                    geo: {
                        show: true,
                        map: mapjson.name,
                        label: {
                            show: false
                        },
                        selectedMode: 'single',
                        roam: false,
                        top:'8%',
                        zoom:1,
                        emphasis: {   //高亮区域样式
                            label: {
                                show: false
                            },
                            itemStyle: {
                                areaColor: '#62fff7'
                            },
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(147, 235, 248, 1)',
                                borderWidth: 1,
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(128, 217, 248, 1)',
                                // shadowColor: 'rgba(255, 255, 255, 1)',
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10
                            },
                            emphasis: {
                                areaColor: '#389BB7',
                                borderWidth: 0
                            }
                        }

                    },
                    series: serise
                }


                oroptionmapjsonr_charts.setOption(option, true)
                var app = {
                    currentIndex: 0,
                };

                var self=this
                this.timer= setInterval(function () {
                    var dataLen = option.series[0].data.length;
                    // 取消之前高亮的图形
                    oroptionmapjsonr_charts.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: app.currentIndex
                    });

                    self.$parent.indexflag=false
                    self.$parent.index0=app.currentIndex
                    app.currentIndex = (app.currentIndex + 1) % dataLen;
                    self.$parent.index=app.currentIndex
                    //console.log(app.currentIndex);
                    // 高亮当前图形
                    oroptionmapjsonr_charts.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: app.currentIndex,
                    });
                    // 显示 tooltip
                    oroptionmapjsonr_charts.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: app.currentIndex
                    });
                }, 3000);
                var highindex=0
                oroptionmapjsonr_charts.on("mouseover", function (param) {
                    // self.$parent.indexflag=true
                    // oroptionmapjsonr_charts.dispatchAction({
                    //     type: 'downplay',
                    //     seriesIndex: 0,
                    //     dataIndex: app.currentIndex
                    // });
                    // self.$parent.index=param.dataIndex
                    // // 高亮当前图形
                    // oroptionmapjsonr_charts.dispatchAction({
                    //     type: 'highlight',
                    //     seriesIndex: 0,
                    //     dataIndex: param.dataIndex,
                    // });
                    // 显示 tooltip
                    oroptionmapjsonr_charts.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex:param.dataIndex
                    });
                    highindex=param.dataIndex
                })

                // oroptionmapjsonr_charts.on("mouseout", function () {
                //     oroptionmapjsonr_charts.dispatchAction({
                //         type: 'downplay',
                //         seriesIndex: 0,
                //         dataIndex: highindex
                //     });
                // })
            },
            getsericer(data){
               var serise=[]
                var geoCoordMap={}
                data.forEach(function (row) {
                    if (row.f_coordinate != null) {
                        var coor=row.f_coordinate.toString().split(',')
                        geoCoordMap [row.name] = [coor[0], coor[1]]
                    }
                })
                console.log(data,geoCoordMap)
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };
                var scadata = convertData(data)
                console.log(scadata)
                serise.push({
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: scadata,
                    symbolSize: 10,
                    // symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
                      symbol:'circle',
                      label: {
                      normal: {
                          // formatter: function (param) {
                          //     if(param.name=='福瑞康管道'){
                          //         return '<div style=\"margin-top: 20px;margin-right: 30px\">'+param.name+'</div>'
                          //     }else if(param.name=='保定富瑞康'){
                          //         return '<div style=\"margin-top: 20px;margin-right: 40px\">'+param.name+'</div>'
                          //     }else {
                          //         return param.name
                          //     }
                          // },

                          formatter:'{b}',
                              position: 'right',
                              show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#F06C00'
                            }
                        }
                })
                return serise
                console.log(serise,'处理数据')
            },
            eConsole(data){
                this.selmapdata(data.name)
            },
            selmapdata(name){
                for(var i=0;i<this.mapdata.length;i++){
                    if(name==this.mapdata[i].name){
                        this.drawChinaMap(this.mapdata[i])
                        this.list.push(this.mapdata[i].name)
                        break
                    }
                }
            },
            selmap(name){
                for(var i=0;i<this.list.length;i++){
                    if(i==this.list.length-1){
                        break
                    }
                    if(name==this.list[i]){
                        this.list.splice(0,i)
                        this.selmapdata(name)
                    }
                }
            },
            searchdata() {
                if(this.timer!=''){
                    this.resdata.splice(0,this.resdata.length)
                    clearInterval(this.timer);
                }
                let sqldataone = DataSql.getData(this,'getfiliasgas',{}, 'resdata')
                co(sqldataone)
            },
            // resize() {
            //     this.searchdata()
            // },
        },
        beforeDestroy() {
            //清除定时器
            clearInterval(this.timer);
        },
        watch: {
            // 监听用户数据并进行绘图
            'resdata': {
                deep: true,
                handler(val) {
                    if(this.resdata.length<1){
                        return
                    }
                    this.list.push(this.mapdata[2].name)
                    this.drawChinaMap(this.mapdata[2],this.resdata);
                }
            },
        },
        ready(){
            this.searchdata()
        }
    };
</script>
