<template>
  <div :class="[b(),className]"
       :style="styleSizeName">
    <div :ref="id"
         :style="styleChartName"></div>
  </div>
</template>

<script>
import create from "../../create";
import { getList } from '@/api/map'
let mapData = null
export default create({
  name: "map",
  props: {
    mapFormatter: Function
  },
  data () {
    return {
      leave: 1,
      bannerCount: 0,
      bannerCheck: "",
      centerData: []
    };
  },
  watch: {
    mapData () {
      this.updateChart();
    },
    dataChartLen () {
      this.setBanner();
    },
    bannerTime () {
      this.setBanner();
    },
    banner: {
      handler () {
        this.setBanner();
      },
      immediate: true
    },
    width () {
      this.updateData();
    },
    height () {
      this.updateData();
    },
  },
  computed: {
    dataChartLen () {
      return (Array.isArray(this.dataChart) ? this.dataChart : []).length
    },
    zoom () {
      return this.option.zoom || 1;
    },
    mapData () {
      return this.option.mapData || {};
    },
    borderWidth () {
      return this.option.borderWidth || 3;
    },
    borderColor () {
      return this.option.borderColor || "#389BB7";
    },
    areaColor () {
      return this.option.areaColor || "#0c162f";
    },
    empColor () {
      return this.option.empColor || "#fff";
    },
    empAreaColor () {
      return this.option.empAreaColor || "yellow";
    },
    color () {
      return this.option.color || "#fff";
    },
    roam () {
      return this.validData(this.option.roam, true)
    },
    fontSize () {
      return this.option.fontSize || 24;
    },
    bannerTime () {
      return this.option.bannerTime || 3000;
    },
    banner () {
      return this.option.banner;
    },
    loadingParams () {
      return {
        text: this.option.loadingText || 'Loading...',
        color: this.option.loadingColor || '#000',
        fontSize: this.option.loadingFontSize || 14,
        maskColor: this.option.loadingBackgroundColor || 'rgba(0,0,0,0)'
      }
    }
  },
  created () {
    mapData = this.mapData
  },
  methods: {
    handleEventDblClick (e) {
      if (e.componentType != 'geo' || !this.option.deep) return;
      this.myChart.showLoading(this.loadingParams);
      getList({ parentId: this.mapData }).then(res => {
        let list = res.data.data || []
        let area = list.find(ele => ele.name == e.name)
        if (area) {
          this.leave = this.leave + 1;
          this.object.option.mapData = area.id;
        }
        else {
          this.object.option.mapData = mapData
          this.leave = 1;
        }
      })
    },
    resetBanner () {
      this.$nextTick(() => {
        this.myChart.dispatchAction({
          type: "hideTip"
        });
        // this.myChart.dispatchAction({
        //   type: "downplay"
        // });
      });
    },
    setBanner () {
      clearInterval(this.bannerCheck);
      if (this.banner) {
        this.bannerCheck = setInterval(() => {
          const curr = this.bannerCount % this.dataChartLen;
          this.myChart.dispatchAction({
            type: "showTip",
            seriesIndex: "0",
            dataIndex: curr
          });
          this.myChart.dispatchAction({
            type: "downplay"
          });
          this.myChart.dispatchAction({
            type: "highlight",
            dataIndex: curr
          });
          this.bannerCount += 1;
        }, this.bannerTime);
      }
    },
    updateChart () {
      this.myChart.showLoading(this.loadingParams);
      this.mapFormatter(this.mapData).then(res => {
        this.myChart.hideLoading();
        const data = res.data;
        const optionData = this.deepClone(data);
        window.echarts.registerMap("MAP", optionData);
        const option = {
          tooltip: this.getOptionTip(),
          geo: {
            tooltip: this.getOptionTip(),
            map: "MAP",
            label: {
              emphasis: {
                show: false
              }
            },
            animation: true,
            zoom: this.zoom,
            layoutCenter: ["50%", "50%"],
            layoutSize: 1200,
            roam: this.roam,
            label: {
              show: true,
              fontSize: this.fontSize,
              color: this.color
            },
            left: this.option.gridX,
            top: this.option.gridY,
            right: this.option.gridX2,
            bottom: this.option.gridY2,
            emphasis: {
              label: {
                color: this.empColor
              },
              itemStyle: {
                areaColor: this.empAreaColor
              }
            },
            itemStyle: {
              borderWidth: this.borderWidth,
              borderColor: this.borderColor,
              areaColor: this.areaColor
            }
          },
          series: [
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              showEffectOn: "emphasis",
              rippleEffect: {
                brushType: "fill",
                scale: 4
              },
              symbol: this.option.symbol ? 'image://' + this.option.symbol : undefined,
              symbolSize: this.option.symbolSize || 15,
              hoverAnimation: true,
              data: Array.isArray(this.dataChart) ? this.dataChart : [].map(ele => {
                ele.zoom = ele.zoom || 1;
                return {
                  ...ele,
                  ...{
                    symbol: ele.symbol ? 'image://' + ele.symbol : undefined,
                    value: [ele.lng, ele.lat]
                  }
                }
              }).filter(ele => ele.zoom == this.leave),
              label: {
                show: true,
                position: this.option.position || 'right',
                fontSize: this.fontSize,
                color: this.color,
                formatter: params => {
                  return params.name;
                }
              },
              itemStyle: {
                color: this.color
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: this.fontSize + 20,
                  color: this.option.empColor
                },
                itemStyle: {
                  color: this.option.empColor
                }
              }
            }
          ]
        };
        this.myChart.off("mouseover");
        this.myChart.off("mouseout");

        this.myChart.on("mouseover", () => {
          clearInterval(this.bannerCheck);
          this.resetBanner();
        });
        this.myChart.on("mouseout", () => {
          this.bannerCount = 0;
          this.setBanner();
        });

        this.myChart.resize();
        this.myChart.setOption(option, true);
      })

    }
  }
});
</script>



