<template>
  <div :class="className" :style="{width:width,height:height}" />
</template>

<script>
import echarts from 'echarts3'
// require('echarts/theme/infographic')
// import { debounce } from '../../utils'
import resize from './mixins/resize'

export default {
  name: 'MapChart',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    height: {
      type: String,
      default: '300px'
    },
    width: {
      type: String,
      default: '100%'
    },
    chartScatterData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      mapChart: null
    }
  },
  watch: {
    chartScatterData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.mapChart) {
      return
    }
    this.mapChart.dispose()
    this.mapChart = null
  },
  methods: {
    // 渲染柱状图
    initChart() {
      this.mapChart = echarts.init(this.$el)
      this.setOptions(this.chartScatterData)
    },
    setOptions({ xAxisData, yAxisDataList, title, mapName } = {}) {
      var max = 400; var min = 80
      var maxSize4Pin = 100; var minSize4Pin = 20
      // 获取地图数据
      var geoCoordMap = {}; var mapFeatures = []
      if (mapName == 'china') {
        mapFeatures = require('echarts3/map/json/china')
      } else {
        mapFeatures = require('echarts3/map/json/province/' + mapName)
      }
      echarts.registerMap(mapName, mapFeatures)
      if (mapFeatures.features) {
        mapFeatures.features.forEach(function(v) {
          // 地区名称
          var name = v.properties.name
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp
        })
      }
      var convertData = function(yAxisDataList) {
        var res = []
        for (var i = 0; i < yAxisDataList.length; i++) {
          var geoCoord = geoCoordMap[yAxisDataList[i].name]
          if (geoCoord) {
            res.push({
              name: yAxisDataList[i].name,
              value: geoCoord.concat(yAxisDataList[i].value)
            })
          }
        }
        return res
      }
      this.mapChart.setOption({
        tooltip: {
          show: true,
          formatter: function(params) {
            if (params.value.length > 1) {
              return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;' + params.value[2] + '&nbsp;&nbsp;'
            } else {
              return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;'
            }
          }
        },
        title: {
          text: title
        },
        grid: {
          containLabel: true
        },
        geo: {
          map: mapName,
          show: true,
          roam: false,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          layoutSize: '100%',
          itemStyle: {
            normal: {
              borderColor: '#e8e8e8',
              borderWidth: 1
              //    shadowColor: '#01C4EF',
              //    shadowOffsetY: 0,
              //    shadowBlur: 60,
            }
          }
        },
        series: [
          {
            type: 'map',
            map: mapName,
            aspectScale: 1,
            layoutCenter: ['50%', '50%'],
            // zoom: 1.3,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#f3f3f3',
                borderColor: '#e8e8e8',
                borderWidth: 1
              },
              emphasis: {
                areaColor: {

                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#e3e3e3' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#e3e3e3' // 100% 处的颜色
                  }]
                }
              }
            },
            data: yAxisDataList
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'stroke'
            },
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                color: '#01C4EF'
              }

            },
            label: {
              normal: {
                show: false,
                color: '#fff',
                fontWeight: 'bold',
                position: 'inside',
                formatter: function(para) {
                  return '{cnNum|' + para.data.value[2] + '}'
                },
                rich: {
                  cnNum: {
                    fontSize: 13,
                    color: '#D4EEFF'
                  }
                }
              }
            },
            symbol: 'circle',
            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
            },
            data: convertData(yAxisDataList)
          }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
