<template>
  <div ref="mapbox" class="map-wrapper" />
</template>
<script>
import echarts from 'echarts'
import 'modules/echarts/map/js/world.js'
import { fontSize } from 'utils/fontsize'
export default {
  props: {
    area: { type: String, default: '' },
    width: { type: String, default: '' },
    heigt: { type: String, default: '' }
  },
  watch: {
    area() {
      const that = this
      this.$nextTick(function() {
        that.myChart.resize()
      })
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    data() {
      return {
        myChart: ''
      }
    },
    initMap() {
      var geoCoordMap = {
        Shanghai: [121.4648, 31.2891],
        // Wuhan: [114.31, 30.52],
        Boston: [-71.050423, 42.382983]
      }
      var BJData = [
        [
          {
            name: 'Shanghai',
            selected: true,
            color: '#fce630'
          },
          {
            name: 'Boston'
          }
        ],
        [
          {
            name: 'Boston',
            selected: true,
            color: '#fce630'
          },
          {
            name: 'Shanghai'
          }
        ]
      ]
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          var fromCoord = geoCoordMap[dataItem[0].name]
          var toCoord = geoCoordMap[dataItem[1].name]
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord,
                value: dataItem[0].value
              },
              {
                coord: toCoord
              }
            ])
          }
        }
        return res
      }
      var series = []
      ;[['Shanghai', BJData]].forEach(function(item, i) {
        series.push(
          {
            type: 'lines',
            zlevel: 1,
            effect: {
              show: true,
              color: '#fff',
              period: 6,
              trailLength: 0.7,
              symbolSize: fontSize(0.05)
            },
            lineStyle: {
              normal: {
                width: fontSize(0.03),
                color: '#9ae5fc',
                opacity: 0.02,
                curveness: -0.2
              }
            },

            data: convertData(item[1])
          },

          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 3,
            rippleEffect: {
              // 涟漪特效
              period: 5, // 动画时间，值越小速度越快
              brushType: 'fill', // 波纹绘制方式 stroke, fill
              scale: 5 // 波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: true,
                color: '#fce630',
                position: 'right', // 显示位置
                offset: [10, 0], // 偏移设置
                fontSize: fontSize(0.16),
                formatter: '{b}' // 圆环显示文字
              },
              emphasis: {
                show: true
              }
            },
            symbol: 'circle',
            symbolSize: function(val) {
              return fontSize(0.08) // 圆环大小
            },

            data: item[1].map(function(dataItem) {
              return {
                name: dataItem[0].name,
                value: geoCoordMap[dataItem[0].name]
              }
            })
          }
        )
      })
      var option = {
        // backgroundColor: '#fff',
        title: {
          // text: '合作伙伴分布图',
          // x: '4%',
          // top: 4,
          textStyle: {
            color: '#fff',
            fontSize: fontSize(0.16)
          }
        },

        visualMap: {
          // 图例值控制
          min: 0,
          max: 10000,
          show: false,
          color: ['#fff'],
          fontSize: fontSize(0.16)
        },
        tooltip: {
          trigger: 'item',
          fontSize: fontSize(0.16),
          formatter: function(params) {
            if (typeof params.value === 'undefined') {
              return ''
            } else {
              return params.name
            }
          }
        },
        geo: {
          map: 'world',
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true, // 是否允许缩放
          layoutCenter: ['50%', '50%'], // 地图位置
          layoutSize: '180%',
          regions: [
            {
              // 选中的区域
              name: ['China'],
              selected: true,
              itemStyle: {
                // 高亮时候的样式
                emphasis: {
                  areaColor: '#e8b05c'
                }
              },
              label: {
                // 高亮的时候不显示标签
                emphasis: {
                  show: false
                }
              }
            },
            {
              // 选中的区域
              name: ['United States'],
              selected: true,
              itemStyle: {
                // 高亮时候的样式
                emphasis: {
                  areaColor: '#e8b05c'
                }
              },
              label: {
                // 高亮的时候不显示标签
                emphasis: {
                  show: false
                }
              }
            }
          ],
          itemStyle: {
            normal: {
              areaColor: '#11d2d6',
              borderColor: '#002097'
            },
            emphasis: {
              areaColor: '#339966'
            }
          }
        },

        series: series
      }
      this.myChart = echarts.init(this.$refs.mapbox)
      this.myChart.setOption(option)
    }
  }
}
</script>
<style scoped>
.map-wrapper {
  width: 100%;
  height: 100%;
}
</style>
