<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'
// import china from '../../map/china'

export default {
  name: 'MapChart',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    height: {
      type: String,
      default: '300px'
    },
    width: {
      type: String,
      default: '100%'
    },
    chartAreaData: {
      type: Object,
      required: true
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    isZoom: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      mapChart: null
    }
  },
  watch: {
    chartAreaData: {
      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.chartAreaData)
    },
    setOptions({ xAxisData, yAxisDataList, title, mapName } = {}) {
      // 获取地图数据
      var geoCoordMap = {}; var mapFeatures = []; var aspectScaleNum = null; var zoomNum = null
      if (mapName == 'china') {
        mapFeatures = require('echarts3/map/json/china')
      } else if (mapName == 'world') {
        mapFeatures = require('echarts3/map/json/world')
      } else {
        mapFeatures = require('echarts3/map/json/province/' + mapName)
      }
      // console.log(22,mapFeatures)
      echarts.registerMap(mapName, mapFeatures)
      if (mapFeatures.features && mapName != 'world') {
        mapFeatures.features.forEach(function(v) {
          // 地区名称
          var name = v.properties.name
          // 地区经纬度
          geoCoordMap[name] = v.geometry.coordinates[0]
        })
      } else {
        mapFeatures.features.forEach(function(v) {
          // 地区名称
          var name = v.properties.name
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp
        })
      }
      // console.log(333,geoCoordMap)
      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
      }
      // if(this.showLegend == true){
      //     aspectScaleNum = 0.8
      //     // zoomNum = 1.01
      // }else{
      //     aspectScaleNum = 0.7
      //     // zoomNum =0.9
      // }
      if (this.isZoom == true) {
        zoomNum = 1.23
      } else {
        zoomNum = 1
      }
      this.mapChart.setOption({
        title: {
          text: title
        },
        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;'
            }
          },
          textStyle: {
            fontSize: 10
          }
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: 0,
          bottom: 0,
          showLabel: !0,
          pieces: [{
            gt: 100,
            label: '> 100 ',
            color: '#7f1100'
          }, {
            gte: 10,
            lte: 100,
            label: '10 - 100 ',
            color: '#ff5428'
          }, {
            gte: 1,
            lt: 10,
            label: '1 - 9 ',
            color: '#ff8c71'
          }, {
            value: 0,
            color: '#ffecfd'
          }],
          show: this.showLegend
        },
        geo: {
          map: mapName,
          roam: false,
          // scaleLimit: {
          //     min: 1,
          //     max: 2
          // },
          zoom: zoomNum,
          label: {
            normal: {
              show: this.showLegend,
              fontSize: '10',
              color: '#e8e8e8'
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#e8e8e8',
              borderWidth: 1,
              areaColor: '#f3f3f3'
              //    shadowColor: 'rgba(10,76,139,1)',
            },
            emphasis: {
              areaColor: '#f2d5ad',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        // geo: {
        //    map: mapName,
        //    show: true,
        //    roam: false,
        //    label: {
        //        emphasis: {
        //            show: false
        //        }
        //    },
        //    layoutSize: "100%",
        //    itemStyle: {
        //        normal: {
        //            borderColor:'#e8e8e8'
        //            borderWidth: 1,
        //         //    shadowColor: 'rgba(10,76,139,1)',
        //         //    shadowOffsetY: 0,
        //         //    shadowBlur: 50
        //        }
        //    }
        // },
        series: [{
          type: 'map',
          map: mapName,
          aspectScale: aspectScaleNum,
          layoutCenter: ['40%', '30%'],
          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: '#073684' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#061E3D' // 100% 处的颜色
                }]
              }
            }
          },
          geoIndex: 0,
          data: yAxisDataList
        }]
      })
    }
  }
}
</script>

<style scoped>

</style>
