<template>
  <div id="map" class="map-item"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import * as echarts from "echarts";
// import { getMapGeoData, getMapPointList } from "../service";
import getMapGeoData from "./mapGeoData.js";
import mapPointList from "./mapPointList";

export default defineComponent({
  setup() {},
  mounted() {
    this.initEcharts();
  },
  data() {
    return {
      pointList: [],
      mapEcharts: null,
    };
  },
  computed: {
    options() {
      return {
        tooltip: {
          borderColor: "#333",
          formatter: function (params) {
            return params.name;
          },
        },
        geo: {
          map: "ZJ",
          show: true,
          // roam: true,
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#c6e7fe",
              borderColor: "#4198ff",
              shadowColor: "#c6e7fe",
            },
            emphasis: {
              color: "#75c3f9", //悬浮背景
            },
          },
        },
        grid: {
          top: "0",
          left: "0%",
          right: "0%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 2,
            symbolOffset: [0, 0],
            label: {
              normal: {
                show: true,
                position: "right",
                color: "#333",
                formatter: "{b}",
                fontWeight: "bold",
              },
              emphasis: {
                show: true,
                color: "#4198ff",
              },
            },
            itemStyle: {
              color: "#f3696a",
            },
            symbolKeepAspect: true,
            symbol:
              "path://M6.09,0a5,5,0,0,0-5,5c0,2.77,5,9.28,5,9.28s5-6.51,5-9.28A5,5,0,0,0,6.09,0Zm0,7.41A2.29,2.29,0,1,1,8.38,5.12,2.31,2.31,0,0,1,6.09,7.41Z",
            symbolSize: 16,
            data: this.pointList,
          },
        ],
      };
    },
  },
  methods: {
    async initEcharts() {
      // const { data: getMapData } = await getMapGeoData();
      // const { data: pointList } = await getMapPointList();
      const { data: getMapData } = getMapGeoData;
      const { data: pointList } = mapPointList;

      echarts.registerMap("ZJ", getMapData);
      const mapEcharts = echarts.init(document.getElementById("map"));

      mapEcharts.showLoading({ color: "#fff" });
      mapEcharts.on("click", this.mapClickHandle);

      this.pointList = pointList || [];
      setTimeout(() => {
        mapEcharts.setOption(this.options);
        mapEcharts.hideLoading();
        this.mapEcharts = mapEcharts;
      }, 400);
    },
    mapClickHandle() {},
  },
  unmounted() {
    if (!this.mapEcharts) {
      return;
    }
    this.mapEcharts.dispose();
    this.mapEcharts = null;
  },
});
</script>

<style >
.map-item canvas:first-of-type {
  transform: scaleY(1.1) scaleX(1.3);
}
</style>
<style lang="scss" scoped>
.map-item {
  flex: 1;
  box-sizing: border-box;
  height: 100%;
}
</style>
