<template>
  <div style="width: 100%" ref="chartsWrapperRef"></div>
</template>

<script>
import echartsMixin from '../mixin/echarts'
import chinaJson from '../data/map/china.json'
import { generateMapHoveDom as formatter } from '../utils/echarts'

const mapItemAreaColor = ['#ccd9eb', '#a7c7f2', '#5c9bf1', '#2e81f3']

export default {
  mixins: [
    echartsMixin('chartsWrapperRef', false, {
      beforeInit(echarts) {
        echarts.registerMap('china', chinaJson)
      }
    })
  ],
  data() {
    return {
      staticOptions: {
        grid: { top: '0px', left: '0px', bottom: '0px', right: '0px' },
        tooltip: { padding: 0, trigger: 'item', formatter },
        geo: { type: 'map', mapType: 'china' },
        series: {
          type: 'map',
          mapType: 'china', // 使用中国地图
          data: [],
          label: { show: true, color: '#fff' },
          itemStyle: { top: 0, left: 0, right: 0, normal: { areaColor: '#249eff', borderColor: '#fff' }, emphasis: { areaColor: '#0f57ff', label: { color: '#fff' } } }
        }
      }
    }
  },
  methods: {
    async update(data) {
      this.instance.setOption({
        series: {
          data: data.map((item) => {
            const nationalMapDataList = item.nationalMapDataList
            const sum = nationalMapDataList.reduce((acc, curr) => acc + curr.dataNumber, 0)
            const areaColor = sum > 20 ? mapItemAreaColor[3] : sum > 10 ? mapItemAreaColor[2] : sum > 0 ? mapItemAreaColor[1] : mapItemAreaColor[0]
            return {
              name: item.provinces,
              value: JSON.stringify(nationalMapDataList),
              itemStyle: { normal: { areaColor } }
            }
          })
        }
      })
    }
  }
}
</script>
