<template>
<div class="map-wrapper">
  <BorderBox class="sum">
    <p>主要品种</p>
    <h2>草鱼、南美白对虾、罗非鱼</h2>
  </BorderBox>
  <div class="map" ref="map"/>
</div>
</template>

<script>
import china from 'echarts/map/json/china.json'
import BorderBox from '../border-box'
export default {
  name: 'MigrateMap',
  components: {
    BorderBox,
  },
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    visualLabel: {
      type: Array,
      default() {
        return ['高', '低']
      }
    },
    visualFormatter: {
      type: [String, Function],
      default() {
        return ({data}) => {
          const {data: info} = data
          return `
          <div class="map-tooltip-info">
            <h3>${data.name}</h3>
            <p><span>联系人：</span>${info.name}</p>
            <p><span>联系电话：</span>${info.phone}</p>
            <p><span>地址：</span>${info.address}</p>
            ${info.type ? `<p><span>监测点类型：</span>${info.type}</p>` : ''}
            ${info.variety ? `<p><span>养殖品种：</span>${info.variety}</p>` : ''}
          </div>
          `
        }
      }
    },
    visualConfig: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      map: null,
      mapName: 'china',
      config: {
        geo: {
          map: 'china',
          layoutCenter: ['50%', '38%'],
          layoutSize: '100%',
          zoom: 1, //当前视角的缩放比例
          // roam: true, //是否开启平游或缩放
          // scaleLimit: { //滚轮缩放的极限控制
          //   min: 0.8,
          //   max: 2,
          // },
          label: {
            show: true,
            color: '#fff',
            fontSize: 12 * this.sizeRate,
            // normal: {
            //   show: false,
            //   color: '#cfcfcf',
            // },
            emphasis: {
              color: '#fff',
              // fontSize: Math.floor(screen.height * 2 / 100),
              // fontFamily: 'Pangmenzhengdao',
            }
          },
          itemStyle: {
            normal: {
              areaColor: 'rgba(91, 213, 255, 0.2)',
              borderColor: 'rgba(91, 213, 255, 0.9)',
              borderWidth: 0.5,
            },
            emphasis: {
              areaColor: 'rgba(91, 213, 255, 0.2)',
              borderColor: 'rgba(91, 213, 255, 0.9)',
            }
          },
          regions: [],
        },
        series: []
      },
      curProvince: null,
    }
  },
  mounted() {
    this.$nextTick(this.initMap)
  },
  computed: {
    sizeRate() {
      return Number((screen.height / 800).toFixed(1))
    },
  },
  methods: {
    initMap() {
      // 初始化echarts
      this.$echarts.registerMap(this.mapName, china)
      this.map = this.$echarts.init(this.$refs.map)
      // this.addEvent()
      // this.config.series.push({
      //   type: 'scatter', // series图表类型
      //   coordinateSystem: 'geo', // series坐标系类型
      //   data: mapData,
      //   itemStyle: {
      //     color: 'gold'
      //   },
      //   symbolSize: 20 * this.sizeRate,
      //   symbol: 'pin',
      // })
      // this.config.tooltip = {
      //   trigger: 'item',
      //   formatter: this.visualFormatter,
      //   // extraCssText: `background-image:url(${require('@/assets/images/tooltip.png')});background-size:cover;`,
      // }
      this.config.tooltip = {
        trigger: 'item',
      }
      this.config.series = [
        {
          'type': 'lines',
          'zlevel': 2,
          'effect': {
            'show': true,
            'period': 4,
            'trailLength': 0.02,
            'symbol': 'arrow',
            'symbolSize': 5
          },
          'lineStyle': {
            'normal': {
              'width': 1,
              'opacity': 0.6,
              'curveness': 0.2,
              color: 'gold',
            }
          },
          'tooltip': {
            'trigger': 'item'
          },
          data: [
            {
              'fromName': '江苏',
              'toName': '安徽',
              'value': 17,
              'coords': [

                [
                  118.796252,
                  32.0739
                ],
                [
                  '117.229',
                  '31.917'
                ],
              ]
            },
            {
              'fromName': '江苏',
              'toName': '上海',
              'value': 25,
              'coords': [
                [
                  118.796252,
                  32.0739
                ],
                [
                  '121.465',
                  '31.289'
                ],
              ]
            },
            {
              'fromName': '江苏',
              'toName': '湖北',
              'value': 31,
              'coords': [
                [
                  118.796252,
                  32.0739
                ],
                [
                  '114.39',
                  '30.663'
                ],
              ]
            },
            {
              'fromName': '江苏',
              'toName': '福建',
              'value': 12,
              'coords': [
                [
                  118.796252,
                  32.0739
                ],
                [
                  '119.454',
                  '25.922'
                ],
              ]
            },
            {
              'fromName': '江苏',
              'toName': '浙江',
              'value': 19,
              'coords': [
                [
                  118.796252,
                  32.0739
                ],
                [
                  '119.531',
                  '29.877'
                ],
              ]
            },
            {
              'fromName': '江苏',
              'toName': '陕西',
              'value': 18,
              'coords': [
                [
                  118.796252,
                  32.0739
                ],
                [
                  '109.116',
                  '34.2'
                ],
              ]
            },
            {
              'fromName': '江苏',
              'toName': '河南',
              'value': 15,
              'coords': [
                [
                  118.796252,
                  32.0739
                ],
                [
                  '113.467',
                  '34.623'
                ],
              ]
            },
            {
              'fromName': '江苏',
              'toName': '山东',
              'value': 12,
              'coords': [
                [
                  118.796252,
                  32.0739
                ],
                [
                  '116.972',
                  '36.737'
                ],
              ]
            },
            {
              'fromName': '江苏',
              'toName': '广东',
              'value': 12,
              'coords': [
                [
                  118.796252,
                  32.0739
                ],
                [
                  '113.511',
                  '23.22'
                ],
              ]
            },
            {
              'fromName': '江苏',
              'toName': '四川',
              'value': 10,
              'coords': [
                [
                  118.796252,
                  32.0739
                ],
                [
                  '103.953',
                  '30.762'
                ],
              ]
            },
            {
              'fromName': '江苏',
              'toName': '江西',
              'value': 9,
              'coords': [
                [
                  118.796252,
                  32.0739
                ],
                [
                  '116.005',
                  '28.663'
                ],
              ]
            },
          ]
        },
        {
          'name': '收货地址',
          'type': 'effectScatter',
          'coordinateSystem': 'geo',
          'zlevel': 2,
          'rippleEffect': {
            'period': 4,
            'brushType': 'stroke',
            'scale': 4
          },
          'tooltip': {
            'trigger': 'item'
          },
          'label': {
            'normal': {
              'show': false,
              'position': 'left',
              'offset': [
                -5,
                5
              ],
              'formatter': '{b}'
            },
            'emphasis': {
              'show': true
            }
          },
          'hoverAnimation': true,
          'symbol': 'circle',
          'symbolSize': 5,
          'itemStyle': {
            'normal': {
              'show': false,
              'color': 'rgba(245,216,47,.5)'
            }
          },
          data: [
            {
              'name': '安徽',
              'value': [
                '117.229',
                '31.917',
                17
              ]
            },
            {
              'name': '上海',
              'value': [
                '121.465',
                '31.289',
                25
              ]
            },
            {
              'name': '湖北',
              'value': [
                '114.39',
                '30.663',
                31
              ]
            },
            {
              'name': '福建',
              'value': [
                '119.454',
                '25.922',
                22
              ]
            },
            {
              'name': '浙江',
              'value': [
                '119.531',
                '29.877',
                19
              ]
            },
            {
              'name': '陕西',
              'value': [
                '109.116',
                '34.2',
                18
              ]
            },
            {
              'name': '河南',
              'value': [
                '113.467',
                '34.623',
                15
              ]
            },
            {
              'name': '山东',
              'value': [
                '116.972',
                '36.737',
                12
              ]
            },
            {
              'name': '广东',
              'value': [
                '113.511',
                '23.22',
                12
              ]
            },
            {
              'name': '四川',
              'value': [
                '103.953',
                '30.762',
                10
              ]
            },
            {
              'name': '江西',
              'value': [
                '116.005',
                '28.663',
                9
              ]
            },
          ]
        },
        {
          'name': '发送地址',
          'type': 'scatter',
          'coordinateSystem': 'geo',
          'zlevel': 2,
          'tooltip': {
            'trigger': 'item'
          },
          'label': {
            'normal': {
              'show': true,
              'position': 'right',
              'color': '#00ffff',
              'formatter': '{b}',
              'textStyle': {
                'color': '#00ffff'
              }
            },
            'emphasis': {
              'show': true
            }
          },
          'symbol': 'circle',
          'symbolSize': 5,
          'itemStyle': {
            'normal': {
              'show': false,
              'color': 'rgba(16,228,253,.5)'
            }
          },
          'data': [
            {
              'name': '江苏',
              'value': [
                '119.68',
                '33.199',
                19
              ]
            },
          ]
        }
      ]
      this.map.setOption(this.config)
    },
    // addEvent() {
    //   // 监听地图点击事件
    //   this.map.on('click', (ev) => {
    //     const {name} = ev.data
    //     console.log(name)
    //     this.setRegions(name)
    //     this.curProvince = name
    //     this.$emit('select', name)
    //   })
    //   // 点击空白处则取消选中状态
    //   this.map.getZr().on('click', e => {
    //     if (!e.target && this.curProvince) {
    //       const name = this.curProvince
    //       this.setRegions(null)
    //       this.$emit('select', name)
    //     }
    //   })
    // },
    // setRegions(name) {
    //   this.curProvince = name
    //   if (!name) {
    //     this.config.geo.regions = []
    //     this.map.setOption(this.config)
    //     return
    //   }
    //   let regions = [{
    //     name,
    //     selected: true,
    //     itemStyle: {
    //       areaColor: '#5ad4ff',
    //       shadowColor: 'rgba(0, 0, 0, 1)',
    //       shadowBlur: 10,
    //       shadowOffsetY: 10,
    //       shadowOffsetX: -5,
    //     }
    //   }]
    //   if (this.config.geo.regions.length > 0 && this.config.geo.regions[0].name == name) {
    //     regions = []
    //   }
    //   this.config.geo.regions = regions
    //   this.map.setOption(this.config)
    // },
  },
  // watch: {
  //   '$store.state.aquafarmPoints': {
  //     handler(cur, past) {
  //       if (cur && cur !== past && cur.length > 0) {
  //         this.config.series = [{
  //           type: 'scatter', // series图表类型
  //           coordinateSystem: 'geo', // series坐标系类型
  //           data: cur,
  //           itemStyle: {
  //             color: 'gold'
  //           },
  //           symbolSize: 20 * this.sizeRate,
  //           symbol: 'pin',
  //         }]
  //         this.map && this.map.setOption(this.config)
  //       }
  //     },
  //     immediate: true,
  //   }
  // }
}
</script>

<style lang="stylus" scoped>
.map-wrapper
  width 50%
  height 70%
  left 25%
  position absolute
  >.map
    width 100%
    height 100%
    z-index 99
  >.sum
    width 50%
    // margin 0 auto
    margin 1rem 0 0 1rem
    text-align center
    font-weight bold
    h2
      color $edgeColor
      font-family $font-pang
      font-size 1.5rem
      font-weight 400
</style>
<style lang="stylus">
.map-tooltip-info
  color $edgeColor
  padding 1rem
  border .1rem solid $edgeColor
  span
    color #fff
</style>
