<template>
  <section class="AiMap">
    <div ref="amap" class="map"/>
  </section>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "AiMap",
  props: {
    plugins: {default: () => ['AMap.DistrictSearch']},
    map: Object,
    lib: Object
  },
  data() {
    return {
      amap: null
    }
  },
  methods: {
    initMap() {
      let {plugins} = this
      AMapLoader.load({
        key: '54a02a43d9828a8f9cd4f26fe281e74e',
        version: '2.0',
        plugins
      }).then(AMap => {
        this.amap = new AMap.Map(this.$refs.amap, {
          resizeEnable: true,
          zoom: 14,
        })
        this.$emit('update:lib', AMap)
        this.$emit('update:map', this.amap)
      })
    },
  },
  mounted() {
    this.initMap()
  },
  destroyed() {
    this.amap?.destroy()
  }
}
</script>

<style lang="scss" scoped>
.AiMap {
  .map {
    height: 100%;
  }

  ::v-deep .amap-logo, ::v-deep .amap-copyright {
    display: none !important;
  }

  ::v-deep .amap-icon {
    width: 40px !important;
    height: 40px !important;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
