<template>
    <div id="map_container"></div>
  </template>
  
  <script>
  import AMapLoader from "@amap/amap-jsapi-loader";
  // 导入方法
  import { location, parkingMarker } from "./mapFunction.js";
  import { mapActions, mapState } from 'vuex'
  window._AMapSecurityConfig = {
    securityJsCode: "2d2a5f5eaef9995554d8b572561136b1",
  };
  export default {
    name: "Maps",
    data() {
      return {
        map: null,
        // 地图是否加载完成
        mapStatus: false,
      };
    },
    mounted() {
      this.initMap();
      this.$bus.$on('location', () => {
        this.mapStatus && location(this.map)
      })
      this.getParking()
    },
    methods: {
      initMap() {
        AMapLoader.load({
          key: "02b3b7548cbd3fb6cbae4b49374abdfb",
          version: "2.0",
          plugins: ["AMap.Geolocation", "AMap.Walking"], // 需要用到的高德插件
        }).then((AMap) => {
            this.map = new AMap.Map("map_container", {
              viewMode: "3D",
              zoom: 16,
              center: [108.731156, 34.309486], //初始化地图中心点位置
            });
            // 地图加载完成
            this.map.on("complete", () => {
              this.mapStatus = true;
              location(this.map);
              // 停车场图标
              parkingMarker(this.map, this.parkingList)
              this.chooseCar()
            });
          })
          .catch((e) => {
            console.log(e);
          });
      },
      // 获取停车场
      ...mapActions('parkingAbout', ['getParking']),
      // 获取停车场车辆
      chooseCar() {
        const cars = document.querySelectorAll('#text_id')
        const _this = this
        cars.forEach(item => {
          item.addEventListener('click', function(e) {
            e.stopPropagation()
            const id = this.getAttribute('text_id')
            localStorage.setItem('id', id)
            _this.$router.push({ name: 'Car', query: {id}});
          })
        })
      }
    },
    computed: {
      ...mapState('parkingAbout', ['parkingList'])
    },
  };
  </script>
  
  <style lang="scss" scoped>
  #map_container {
    width: 100%;
    height: 100vh;
    position: relative;
  }
  </style>