<template>
  <el-container v-loading="loading" class="th-charts-map-2d">
    <el-main>
      <v-chart
        ref="chart"
        class="th-echarts"
        :options="charOptions"
        autoresize
        v-on="$listeners"
        @click="onClick"
      />
    </el-main>
  </el-container>
</template>
<script>
import VChart from 'vue-echarts'
import { registerMap } from 'echarts'
import 'echarts/lib/chart/map'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/geo'

export default {
  name: 'ThEchartsMap2d',
  components: {
    VChart
  },
  props: {
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 地图名称
    map: {
      type: String,
      default: ''
    },
    // 数据
    value: {
      type: Array,
      default: () => []
    },
    // 文字颜色
    labelColor: {
      type: String,
      default: '#137775'
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: '#ffffff'
    },
    // 边框颜色
    borderColor: {
      type: String,
      default: '#ffffff'
    },
    // 是否禁用点击
    disabled: {
      type: Boolean,
      default: false
    },
    // 自定义地图数据
    customMaps: {
      type: Object,
      default: () => ({})
    },
    // visualMap颜色面板
    pieces: {
      type: Array,
      default: () => [
        {
          gte: 15,
          label: '15%~',
          color: '#1FC1BB'
        },
        {
          gte: 10,
          lt: 15,
          label: '10~15%',
          color: '#5dd8b9'
        },
        {
          gte: 5,
          lt: 10,
          label: '5~10%',
          color: '#A5E3D3'
        },
        {
          gte: 0,
          lt: 5,
          label: '0~5%',
          color: '#CEF2E9'
        }
      ]
    }
  },
  data() {
    return {
      name: ''
    }
  },
  computed: {
    // 自定义地图数据
    // http://datav.aliyun.com/
    getCustomMaps() {
      return {
        'chongqing': './mapJson/province/chongqing.json',
        'beijing': './mapJson/province/beijing.json',
        'shanghai': './mapJson/province/shanghai.json',
        'hebei': './mapJson/province/hebei.json',
        'chengde': './mapJson/province/hebei/chengde.json',
        'langfang': './mapJson/province/hebei/langfang.json',
        'qinhuangdao': './mapJson/province/hebei/qinhuangdao.json',
        'tangshan': './mapJson/province/hebei/tangshan.json',
        'zhangjiakou': './mapJson/province/hebei/zhangjiakou.json',
        ...this.customMaps
      }
    },
    // echarts属性
    charOptions() {
      const that = this
      const itemStyle = {
        color: this.backgroundColor,
        borderColor: this.borderColor,
        borderWidth: 2,
        opacity: 1
      }
      const label = {
        show: true,
        textStyle: {
          color: this.labelColor,
          fontSize: 12,
          fontWeight: 'bold',
          opacity: 1,
          backgroundColor: 'transparent',
          borderColor: '#fff'
        },
        formatter(d) {
          return `${d.name}\n${d.data && d.data.count || 0} / ${d.value || 0}%`
        }
      }
      // hover时的样式
      const emphasis = {
        itemStyle: {
          color: '#000'
        },
        label: {
          textStyle: {
            color: this.labelColor
          }
        }
      }
      return {
        series: [
          {
            type: 'map',
            map: this.map,
            data: this.value.map(d => {
              d.selected = d.name === that.name
              return d
            }),
            label,
            itemStyle,
            emphasis
          }
        ],
        visualMap: {
          show: true,
          left: 'right',
          bottom: 50,
          showLabel: true,
          align: 'left',
          pieces: this.pieces
        }
      }
    }
  },
  watch: {
    // 切换地图
    map: {
      handler(val) {
        this.onChangeMap(val)
      },
      immediate: true
    }
  },
  methods: {
    // 切换地图
    onChangeMap(val) {
      if (val) {
        if (val in this.getCustomMaps) {
          const data = this.getCustomMaps[val]
          if (typeof data === 'string') {
            registerMap(val, require(`${data}`))
          } else if (typeof data === 'object') {
            registerMap(val, data)
          }
        } else if (val === 'china') {
          registerMap(val, require('echarts/map/json/china'))
        } else {
          registerMap(val, require(`echarts/map/json/province/${val}`))
        }
        if (this.$refs.chart) {
          this.$refs.chart.clear()
          this.$refs.chart.mergeOptions(this.charOptions, true)
        }
      }
    },
    // 点击区域事件
    onClick(e) {
      if (this.disabled) return
      if (e.name === this.name) {
        this.name = ''
      } else {
        this.name = e.name
      }
      this.$emit('click', {
        name: e.name,
        value: e.value,
        x: e.event.offsetX,
        y: e.event.offsetY,
        ...(e.data || {})
      })
    }
  }
}
</script>
