
<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts';
  import {
    getSonRegionByCodes,
    getRegionByCodes,
  } from 'api/base_info/region/';

  require('echarts/theme/macarons'); // echarts 主题
  import { debounce } from 'utils';

  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '330px'
      },
      autoResize: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        chart: null,
        clientWidth: 350,
        clientHeight:500
      };
    },
    mounted() {
      this.initChart();
      if (this.autoResize) {
        this.__resizeHanlder = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
//        window.addEventListener('resize', this.__resizeHanlder)
      }

      // 监听侧边栏的变化
      const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
//      sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
    },
    provinceRegions() {
      return getSonRegionByCodes(1);
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      if (this.autoResize) {
//        window.removeEventListener('resize', this.__resizeHanlder)
      }

      const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
//      sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)

      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        let that = this;
        var mydata = getSonRegionByCodes(1);
        this.chart = echarts.init(this.$el, 'macarons');
        this.chart.setOption({
          title: {
//            text: '全国地图大数据',
            subtext: '',
            x:'center'
          },
          tooltip : {
            trigger: 'item'
          },

          //左侧小导航图标
//          visualMap: {
//            show : true,
//            x: 'left',
//            y: 'center',
//            splitList: [
//              {start: 500, end:600},{start: 400, end: 500},
//              {start: 300, end: 400},{start: 200, end: 300},
//              {start: 100, end: 200},{start: 0, end: 100},
//            ],
//            color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
//          },
          //配置属性
          series: [{
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
              normal: {
                show: true  //省份名称
              },
              emphasis: {
                show: false
              }
            },
            data:mydata  //数据
          }],
          grid:{
            x:0,
            y:0,
            x2:0,
            y2:0
          }
        });
        this.chart.on('click', function(param) {
          let mydata = getSonRegionByCodes(1);
          var name = param.name;
          let provinceId = 0;
          mydata.map(function(item){
            console.log(item.name.indexOf(name));
            if(item.name.indexOf(name) !=-1){
              provinceId = item.agencyId;
            }
          });
          that.$emit('headCallBack', provinceId);
        });
      }
    }
  }
</script>
