<script>
import Modal from '@molecules/VModal/VModal.vue'
import {CoordsMap} from './helpers'

export default {
  name: 'MapModal',
  components: {
    Modal,
  },
  props: {
    open: {
      type: Boolean,
      default: false
    },
    close: {
      type: Function,
      default: () => {}
    },
    id: {
      type: String,
      default: ""
    },
    data: {
      type: Object,
      default: () => ({})
    },
    text: {
      type: String,
      default: ""
    },
    headerClass: {
      type: String,
      default: ""
    },
    containerClass: {
      type: String,
      default: ""
    }
  },
  computed: {
  },
  updated () {
    this.$nextTick(function () {
      if (this.data && this.id && this.open) {
        const newMap = new CoordsMap(this.id)
        newMap.loadMap(this.data.coords, this.data.machine)
      }
    })
  },
  methods: {
  }
}

</script>

<template>
  <Modal
    v-if="open"
    :close="close"
    :isOpen="true"
    :containerClass="containerClass"
  >
    <div :class="headerClass">
      <slot name="header" />
    </div>
    <slot />
  </Modal>
</template>

<style scoped>
</style>
