<template>
  <div class="container">
    <div id="echartMap"/>
  </div>
</template>

<script>
import chinamap from 'echarts/map/json/china.json'
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['mapData'],
  data() {
    return {}
  },
  computed: {
    datas() {
      if (this.mapData.length > 0) {
        return this.mapData
      } else {
        return []
      }
    }
  },
  watch: {
    datas: {
      handler() {
        this.getMap()
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getMap()
    })
  },
  methods: {
    getMap() {
      const data = this.datas.map(val => {
        const obj = {
          name: val.province,
          value: val.total,
          failCount: val.failCount,
          successCount: val.successCount
        }
        return obj
      })
      const myChart = this.$echarts.init(document.getElementById('echartMap'))
      this.$echarts.registerMap('china', chinamap)
      const option = {
        title: {
          text: '调用量地域分布'
        },
        tooltip: {
          trigger: 'item',
          formatter: (val) => {
            // let failCount = 0
            // let successCount = 0
            let total = 0
            if (val.data != null) {
              // if (val.data.failCount && val.data.failCount != null) {
              //   failCount = val.data.failCount
              // }
              // if (val.data.successCount && val.data.successCount != null) {
              //   successCount = val.data.successCount
              // }
              if (val.data.value && val.data.value != null) {
                total = val.data.value
              }
            }

            // return '省份:' + val.name + '<br/>' + '调用成功数:' + successCount + '<br/>' + '调用失败数:' + failCount + '<br/>' + '总调用数:' + total
            return '省份:' + val.name + '<br/>' + '总调用数:' + total
          }
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },

            saveAsImage: {}
          }
        },
        visualMap: {
          min: 0,
          max: 50000,
          calculable: true,
          inRange: {
            color: ['#e3e9f3', '#2952ef', '#7127d3']
          }
        },
        series: [
          {
            type: 'map',
            map: 'china',
            data: data
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 350px;
  /* margin-top: 40px; */
}
#echartMap {
  width: 100%;
  height: 100%;
}
</style>
