<template>
  <div class="map">
    <div>
      <mini-map ref="map" @done="onDone" />
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
  import MiniMap from '@/views/widgets/miniMap/index.vue'
  type ICoordinate = [number, number]

  @Component({ name: 'PointMap', components: { MiniMap } })
  export default class Map extends Vue {
    @Prop({ type: Array }) coordinate!: ICoordinate
    isDone: boolean = false
    onDone() {
      this.isDone = true
      this.addMarker(this.coordinate)
    }

    @Watch('coordinate')
    addMarker(coordinate) {
      if (this.isDone) {
        const { addMarker } = (this.$refs.map as any) || {}
        if (addMarker) {
          addMarker(coordinate)
        }
      }
    }
  }
</script>

<style lang="scss">
  .map {
    height: 100%;
    position: relative;
    > div {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
</style>
