<template>
    <div style="height: 100%">
      <div :id="idname"></div>
    </div>
</template>

<script>
  import {HttpResetClass} from "vue-client";
  import whmap from "../../../static/wuhai.json";

  export default {
    name: 'echart-map',
    props: {
      mode: String,
      idname: String
    },
    data () {
      return {
        mapdata: [
          {name: 'wuhai', value: whmap}
        ],
        list: [],
        xc: '',
        timer: '',
        datas: [],
        maps:[]
      }
    },

    mounted () {
      this.drawChinaMap()
    },
    methods: {
      drawChinaMap (mapjson) {
        var chart = this.$echarts.init(document.getElementById(this.idname))
        this.xc = chart
        var scale = this.$parent.$parent.$parent.scale
        var geoCoordMap = {}
        this.$echarts.registerMap(mapjson.name, mapjson.value)
        chart.showLoading()
        var mapFeatures = this.$echarts.getMap(mapjson.name).geoJson.features
        chart.hideLoading()
        mapFeatures.forEach(function (v) {
          // 地区名称
          var name = v.properties.name
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp

        })
        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 colormode = ''
        if (this.mode == '0') {
          colormode = '#e7c83c'
        }
        if (this.mode == '1') {
          colormode = '#66f2de'
        }
        let data = this.datas

        //   [
        //
        //   {
        //     name: '海南区',
        //     value: datas2.value,
        //     minyong: datas2.minyong,
        //     feiminyong: datas2.feiminyong
        //   },
        //   {
        //     name: '海勃湾区',
        //     value: datas1.value,
        //     minyong: datas1.minyong,
        //     feiminyong: datas1.feiminyong
        //   },
        //   {
        //     name: '乌达区',
        //     value: datas3.value,
        //     minyong: datas3.minyong,
        //     feiminyong: datas3.feiminyong
        //   }
        // ]
        let col = ['#2a4096', '#1285de', '#27459b', '#284ba5', '#225bb2', '#2353a8', '#244ca3', '#1775cd', '#1e64bc', '#05a0fc', '#108de7', '#1b6dc3']
        let colors = []
        for (let i = 0; i < data.length; i++) {
          let jo = {
            name: data[i].name,
            itemStyle: {
              areaColor: col[i],
              // color: '#02363f'
              color: col[i]
            }
          }
          colors.push(jo)
        }
        let option = {
          title: {
            text: '',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            show: true,
            alwaysShowContent: false,
            backgroundColor: 'rgba(2, 59, 63, 0.7)',
            borderColor: 'rgba(98, 194, 186, 0.45)',
            borderWidth: 1,
            padding: 10 * scale,
            textStyle: {
              fontSize: 18 * scale
            },
            hideDelay: 100 * scale,
            triggerOn: 'click',
            enterable: true,
            position: function (point, params, dom, rect, size) {
              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              let x = point[0] //
              let y = point[1]
              let viewWidth = size.viewSize[0]
              let viewHeight = size.viewSize[1]
              let boxWidth = size.contentSize[0]
              let boxHeight = size.contentSize[1]
              let posX = 0 //x坐标位置
              let posY = 0 //y坐标位置

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

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

              return [posX - 10, posY - 10]

            },
            extraCssText: 'width: auto;height:auto;',
            formatter: function (params, ticket, callback) {
              return '<div style=\'text-align: center;height: 1px;margin-bottom: 5px;color:#14ffff;font-weight: normal\'>' + data[params.dataIndex].name + '</div><br/><span>'
                + '<span style="font-weight: normal">总用户 &nbsp;&nbsp;</span><span style="color:#e1e52a;font-weight: bolder">' + data[params.dataIndex].value + '</span><br/>'
                + '<span style="font-weight: normal">民用 &nbsp;&nbsp;</span><span style="color:#e1e52a;font-weight: bolder">' + data[params.dataIndex].minyong + '</span><br/>'
                + '<span style="font-weight: normal">非民用&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;</span><span style="color:#e1e52a; font-weight: bolder">' + data[params.dataIndex].feiminyong + '</span>'
            }
          },
          dataRange: {
            min: 0,
            max: 2500,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true,
            show: false
            // inRange: {
            //   color: [
            //     // "#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"
            //     // "#ff002d"
            //     // "#ffc188",
            //     // "#479fd2",
            //     // "#fba853",
            //     // "#48c7c0",
            //     // "#fa8737",
            //     // "#4bbdd6",
            //     // "#ff6f5b",
            //     // "#F4D5B1",
            //     // "#ADE1E3",
            //     // "#F4B387",
            //     // "#F0F3F4"
            //   ]
            // }
          },

          series: [
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: this.maps,
              //   [
              //   {"name": "海勃湾区","value": [106.817762, 39.673527]},
              //   {"name": "海南区","value": [106.884789, 39.44153]},
              //   {"name": "乌达区","value": [106.722711, 39.502288]}
              // ],
              rippleEffect: {
                period: 10, // 动画时间，值越小速度越快
                color: "#fff",
                brushType: 'stroke', // 波纹绘制方式 stroke, fill
                scale: 3 // 波纹圆环最大限制，值越大波纹越大
              },
              hoverAnimation: true,
              itemStyle: {
                color: '#e5925e',// 中心点颜色
                shadowBlur: 10,
                shadowColor: '#e5925e'// 波纹颜色
              }
            }
          ]
        }
        if (this.mode == '0') {
          option.geo = {  //地图设置
            show: true,
            map: mapjson.name,
            zoom: 3.2,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            selectedMode: 'single',
            roam: false,

            emphasis: {   //高亮区域样式
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#fff'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              itemStyle: {
                areaColor: '#ffff2c'
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#666666',
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                    offset: 0,
                    color: '#02363f' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#02363f'
                  }],
                  globalCoord: false // 缺省为 false
                },
                shadowBlur: 0
              }
            },
            regions: colors
          }
        }
        if (this.mode == '1') {
          option.geo = {  //地图设置
            show: true,
            zoom: 1.2,
            map: mapjson.name,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            selectedMode: 'single',
            roam: false,

            emphasis: {   //高亮区域样式
              label: {
                show: false
              },
              itemStyle: {
                areaColor: '#62fff7'
              }
            },
            // itemStyle: {
            //   normal: {
            //     borderWidth:0
            //   }
            //   },
            itemStyle: {
              normal: {
                borderColor: '#21e3dc',
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                    offset: 0,
                    color: '#02363f' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#02363f'
                  }],
                  globalCoord: false // 缺省为 false
                },
                // shadowColor: '#21e3dc',
                // // shadowColor: 'rgba(255, 255, 255, 1)',
                // shadowOffsetX: -1,
                // shadowOffsetY: 1,
                shadowBlur: 0
              }
              // emphasis: {
              //   areaColor: '#389BB7',
              //   borderWidth: 0
              // }
            }
            // regions: colors
          }
        }
        chart.setOption(option)
        let index = -1
        // var timer = setInterval(function () {
        //   // 隐藏提示框
        //   chart.dispatchAction({
        //     type: 'hideTip',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        //   // 显示提示框
        //   chart.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,
        //     dataIndex: index + 1
        //   })
        //   // 取消高亮指定的数据图形
        //   chart.dispatchAction({
        //     type: 'downplay',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        //   // 高亮指定的数据图形
        //   chart.dispatchAction({
        //     type: 'highlight',
        //     seriesIndex: 0,
        //     dataIndex: index + 1
        //   })
        //   index++
        //   if (index > data.length) {
        //     index = -1
        //   }
        // }, 2000)
      }
    },
    beforeDestroy () {
      //清除定时器
      // clearInterval(this.timer)
    },
    ready () {
      this.maps = whmap.features.map(item => {
        return {
          name: item.properties.name,
          value: item.properties.center
        }
      })
      let http = new HttpResetClass()
      http.load('post', '/api/af-revenue/sql/getUserSumByDep',
        {data:{}},
        {rejectMsg: null, resolveMsg: null}
        ).then((res)=>{


          let data1 = res.data.filter(item => item.name == this.maps[0].name)
          let data2 = res.data.filter(item => item.name == this.maps[1].name)
          let data3 = res.data.filter(item => item.name == this.maps[2].name)
          this.datas = []
          this.datas.push(data1.length > 0 ? data1 : {
            name: this.maps[0].name,
            value: 0,
            minyong: 0,
            feiminyong: 0
          })
        this.datas.push(data2.length > 0 ? data2 : {
          name: this.maps[1].name,
          value: 0,
          minyong: 0,
          feiminyong: 0
        })
        this.datas.push(data3.length > 0 ? data3 : {
          name: this.maps[2].name,
          value: 0,
          minyong: 0,
          feiminyong: 0
        })
        this.list.push(this.mapdata[0].name)
        this.drawChinaMap(this.mapdata[0])
      })

    }
  }
</script>
