<template>
  <div>
    <div id="map"></div>
  </div>
</template>
 
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import baseConfig from "../../../public/config/project.config.json";
import circle from "./circle.vue";
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "56bf9671d4b3517d294caec4751889a1", // 后期需替换
};
// import circle from "./circle.vue";
import { getDevicePosition } from "@/api/cockpit/cockpit";
export default {
  data() {
    return {
      map: null,
      // 标记点的数据
      deviceList: [],
    };
  },
  components: {
    // circle,
  },
  methods: {
    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "40849e82b4e33f5255b17372520c954d", // 后期需替换
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 初始化地图
          this.map = new AMap.Map("map", {
            viewMode: "2D", //  是否为3D地图模式
            zoom: 18, // 初始化地图级别
            center:
              this.deviceList.length > 0 &&
              this.deviceList[0].lat &&
              this.deviceList[0].lon
                ? [
                    Number(this.deviceList[0].lon),
                    Number(this.deviceList[0].lat),
                  ]
                : [116.4, 39.9],
            resizeEnable: true,
          });
          this.marker();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 标记点
    marker() {
      // 循环所有的标记点
      for (let i = 0; i < this.deviceList.length; i++) {
        if (this.deviceList[i].lon && this.deviceList[i].lat) {
          var marker = new AMap.Marker({
            position: [
              Number(this.deviceList[i].lon),
              Number(this.deviceList[i].lat),
            ], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            map: this.map,
            title: this.deviceList[i].deviceName,
            content:
              '<div class="circle-container"><div class="circle-one"></div><div class="circle-three"></div><div class="circle-two"></div><div class="circle-four"></div></div>',
            offset: new AMap.Pixel(-15, -20),
          });
          
          
          // 将创建的点标记添加到已有的地图实例：
          this.map.add([marker]);
          // 信息窗体
          // var infoWindow = new AMap.InfoWindow({
          //   content: "提示信息",
          // });
          // marker.on("click", function () {
          //   infoWindow.open(map, marker.getPosition());
          // });
        }
      }
    },
    // 获取坐标数据
    fetchPositionData() {
      getDevicePosition()
        .then((res) => {
          // this.deviceList = res.data; // 有数据之后可以直接使用暂时模拟数据
          this.deviceList = [
            {
              deviceName: "燃气灶",
              lat: "39.97",
              lon: "116.3",
            },
            {
              deviceName: "燃气灶",
              lat: "39.93",
              lon: "116.15",
            },
            {
              deviceName: "燃气灶",
              lat: "39.8",
              lon: "116.22",
            },
            {
              deviceName: "燃气灶",
              lat: "39.74",
              lon: "116.33",
            },
          ];
          // 初始化地图
          this.initMap();
        })
        .catch(() => {
          this.initMap();
        });
    },
  },
  created() {
    this.fetchPositionData();
  },
};
</script>
 
<style scoped>
#map {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}
</style>
<style>
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}
</style>
<style lang="scss" scoped>
circle-container {
  position: absolute;
  width: 30px;
  height: 30px;
}

.circle-one,
.circle-two,
.circle-three,
.circle-four {
  width: 0px;
  height: 0px;
  background-color: transparent;
  border: 3px solid rgb(181, 211, 247);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.circle-one {
  animation: transition-circle 2s infinite;
}

.circle-two {
  animation: transition-circle 2s infinite 0.7s;
}

.circle-three {
  animation: transition-circle 2s infinite 1.4s;
}
.circle-three {
  animation: transition-circle 2s infinite 1.8s;
}

@keyframes transition-circle {
  0% {
    width: 0px;
    height: 0px;
    opacity: 1;
  }
  50% {
    width: 30px;
    height: 30px;
    opacity: 0.5;
  }
  100% {
    width: 35px;
    height: 35px;
    opacity: 0;
  }
}
</style>