<template>
  <div id="node4" v-if="showPage">
    <div class="top-title">已合作社区分布图</div>
    <el-amap ref="map" :center="mapCenter" :zoom="12" :map-style="setMapStyle" vid="amapDemo" class="amap-demo">
      <el-amap-marker v-for="(item,index) in markers" :key="index" :position="item.position" :icon="item.icon" :title="item.title" :offset="item.offset" :content="item.content" />
    </el-amap>
  </div>
</template>

<script>
// import G2 from '@antv/g2'
// import DataSet from '@antv/data-set'
import $ from "jquery";
// import AMapUI from 'AMapUI'
import light1 from "@/assets/light1.png";
import light2 from "@/assets/light2.png";
import light3 from "@/assets/light3.png";
import light4 from "@/assets/light4.png";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      showPage: false,
      light1,
      light2,
      light3,
      light4,
      markers: [],
      mapCenter: [118.753086, 31.972501],
      setMapStyle: "amap://styles/blue"
    };
  },
  computed: {
    ...mapState("community", {
      list: s => s.list
    })
  },
  mounted() {
    this.FetchCommunityList({ pageNum: 1, pageSize: 10000 }).then(() => {
      this.showPage = true;
      let i = 0;
      let arr = [this.light1, this.light2, this.light3, this.light4];
      this.list.forEach(item => {
        item.position = [];
        item.position.push(item.longitude);
        item.position.push(item.latitude);
        item.title = item.communityName;
        item.offset = [-60, -60];
        item.content = `<div class='point'>
        <img src='${arr[i]}'>
        <span>${item.communityName}</span>
        </div>`;
        if (i < 3) {
          i++;
        } else {
          i = 0;
        }
      });
      console.log(this.list)
      this.markers = this.list
      setInterval(() => {
        this.rander();
      }, 1600);
    });
  },
  methods: {
    ...mapActions("community", ["FetchCommunityList"]),
    rander() {
      $(".point img")
        .animate({ opacity: 0 }, 800)
        .animate({ opacity: 1 }, 800);
    }
  }
};
</script>

<style lang="scss">
#node4 {
  border-radius: 5px;
}
.top-title {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  margin-top: 30px;
  z-index: 20;
  color: #a6b9c8;
  font-size: 18px;
}
.point {
  position: relative;
  width: 120px;
  height: 120px;
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  span {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: white;
  }
}
</style>
