
<template>
  <div id="map" style="height:330px;width:100%"></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:["list", "provinceName"],
    data() {
      return {
        mapType: "china",
        chart: null,
        clientWidth: 350,
        clientHeight:500
      };
    },
    watch: {
      list: {
        handler(newValue, oldValue) {
          if(this.provinceName){
            this.initChart(this.provinceName);
          } else {
            this.initChart("china");
          }
          console.log(newValue);
        },
        deep: true
      },
      provinceName(newValue, oldValue) {
        this.chart = null;
        this.initChart(newValue);
      },
    },
    mounted() {
      console.log(this.list);
//      console.log(this.provinceName);
//      this.initChart("china");
      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(target) {
        let that = this;
        var markPointData = this.list;
        markPointData.map(function(item){
          item.coord = [item.longitude, item.latitude];
        });
        var mydata = getSonRegionByCodes(1);
        this.chart = echarts.init(this.$el, 'macarons');
        var option = {
          title: {
            subtext: '',
            x:'center'
          },
          tooltip : {
            trigger: 'item'
          },
          series: [{ //系列列表
            name: "中国",
            type: "map",
            mapType: target,
            roam: true,//缩放
            zoom: 1.2,
            label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
              normal: {
                show: true
              },
              emphasis: {
                show: false
              }
            },
            effect : {
              show: true,
              shadowBlur : 0
            },
            markPoint: { //图表标注。
              symbol: 'image://https://xxmp.upyuns.com/attachment/images/6/2019/04/DkmpHZN172505Hq68HvpNYKA5DS7qm.png',
              symbolSize: 14,//图形大小
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                }
              },
              data: markPointData
            }
          }],
          mapLocation : {
             x : 'left'
         },
          grid:{
            x:0,
            y:0,
            x2:0,
            y2:0
          }
        };
        this.chart.setOption(option);
        this.chart.on('click', function(param) {
          if(param.seriesName == "中国"){
            let mydata = getSonRegionByCodes(1);
            var name = param.name;
//            if(!name){
//              return;
//            }
            let provinceId = 0;
//            option.series[0].name="省份";
//            option.series[0].mapType = name;
//            that.mapType = name;
//            that.chart.clear();
//            that.chart.setOption(option);
            mydata.map(function(item){
              console.log(item.name.indexOf(name));
              if(item.name.indexOf(name) !=-1){
                provinceId = item.agencyId;
              }
            });
//            that.$emit('headCallBack', provinceId);
            if(name && provinceId !=0){
              that.$router.push({path: '/provinceMap?provinceId='+provinceId+"&provinceName="+name})
            }
          }
        });
      }
    }
  }
</script>
