<template>
  <div class="dv-chart-wrap">
    <div class="dv-map dv-chart"></div>
    <dv-loading v-if="loading"></dv-loading>
  </div>
</template>

<script>
import EchartComponent from "../../../mixins/EchartComponent";
import echarts from 'echarts';
import axios from "axios";

export default {
  name: 'DvMap',
  mixins: [EchartComponent],
  props: {
    tooltip: {
      type: Object,
      default () {
        return {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        };
      }
    },
    dimensions: {
      type: Array,
      required: false,
      default () {
        return [];
      }
    },
    indexes: {
      type: Array,
      required: false,
      default () {
        return [];
      },
    },
    itemStyle: {
      type: Object,
      default () {
        return {
          normal: {
            label: {
              show: true,
              textStyle: {
                fontSize: 10
              }
            }
          },
          emphasis: {
          }
        };
      }
    },
    items: {
      type: Array,
      default () {
        return [];
      }
    },
    mapUrl: {
      type: String,
      default: 'https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json'
    },
    dataRange: {
      type: Object,
      default() {
        return {
          x: 'left',
          y: 'center',
          splitList: [
            {start: 0.8, label: '80%以上', color: '#FF6699'},
            {start: 0.6, end: 0.8, label: '60-80%', color: '#CC3300'},
            {start: 0.4, end: 0.6, label: '40-60%', color: '#F7BB37'},
            {start: 0.3, end: 0.4, label: '30-40%', color: '#3BAE56'},
            {start: 0.2, end: 0.3, label: '20-30%', color: '#92D050'},
            {start: 0.1, end: 0.2, label: '10-20%', color: '#3899FF'},
            {start: 0, end: 0.1, label: '0-10%', color: '#BFBFBF'}
          ],
          textStyle: {
            color: '#fff' // 值域文字颜色
          },
          color: ['orangered', 'yellow', 'lightskyblue']
        };
      }
    },
    mapLoader: {
      type: Function,
      async default(mapUrl) {
        const response = await axios.get(mapUrl);
        return response.data;
      }
    }
  },
  computed: {
    legendData () {
      return this.items.map((item) => {
        return item[this.dimensions[0].name];
      });
    },
  },
  data () {
    return {
      selected: {},
      autoInitialize: false
    };
  },
  watch: {
    items: {
      handler () {
        this.onDataReady();
      },
      deep: true
    },
    indexes: {
      handler () {
        this.onDataReady();
      },
      deep: true
    },
    dataRange: {
      handler (value) {
        this.chart.setOption({
          dataRange: value
        });
      },
      deep: true
    },
    async mapUrl() {
      await this.loadMap();
      this.onDataReady();
    }
  },
  methods: {
    async loadMap() {
      const result = await this.mapLoader(this.mapUrl);
      echarts.registerMap(this.mapUrl, result);
    },
    getLegend () {
      return Object.assign({}, this.legend, {
        data: this.legendData
      });
    },
    getSeries () {
      const series = [];
      const index = this.indexes[0];
      const dimension = this.dimensions[0];
      const itemStyle = dimension.itemStyle || this.itemStyle;
      const serie = {
        name: index.title || index.name,
        type: 'map',
        mapType: this.mapUrl,
        itemStyle,
        ...index.config
      };
      serie.data = this.items.map((dataItem) => {
        return {
          name: dataItem[dimension.name],
          value: dataItem[index.name]
        };
      });
      series.push(serie);
      return series;
    },
    getExtensionOptions () {
      return {
        visualMap: this.dataRange
      };
    },
    bindEvent () {
      this.chart.on('click', ({ seriesIndex, dataIndex, data }) => {
        this.$emit('select', data, seriesIndex, dataIndex);
      });
    },
    onDataReady () {
      this.chart && this.chart.setOption({
        legend: this.getLegend(),
        series: this.getSeries()
      });
    }
  },
  async mounted() {
    await this.loadMap();
    this.initializeChart();
    this.onDataReady();
  }
};
</script>
