<template>
  <div class="modal is-active" @click="doClick">
  <div class="modal-background" :style="`opacity:${count===0? 0.7 : 0.3} !important;'`"></div>
    <div class="modal-card" :id="docid" :style="$store.state.ismobile? '' : `width:${width? width : '60%'}`">
      <header class="modal-card-head my-0 pt-4 pb-3" v-if="title">
        <p class="modal-card-title fsb-20 py-0 my-0" v-html="title"></p>
      </header>
      <section class="modal-card-body" :style="`min-height:${height? height : '700px'}`">        
        <component :is="compobj" v-bind="vbind" @modalevent="modalEvent" @close="$emit('close')"></component>
      </section>
    </div>
  </div>
</template>
<script>
export default {
  props: ['component', 'width', 'height', 'vbind', 'title'],
  data() {
    return {
      docid: this.$id(),
      count: 0
    }
  },
  created() {
    window.addEventListener('keydown', (e) => {if(e.key==='Escape') this.$emit('close')})
    const collection = document.getElementsByClassName("modal-background")
    this.count = collection.length
  },
  computed: {
    compobj() {
      return () => import(`@/components/${this.component}`)
    }
  },
  methods: {
    modalEvent(ev) {
      this.$emit(ev.name, ev.data)
    },
    doClick(e) {
      //e.stopPropagation()
      if(!e.srcElement.offsetParent) return
      if(document.getElementById(this.docid)) {
        if(!document.getElementById(this.docid).contains(e.target)) {
          this.$emit('close')
        }
      }
    }
  }
}
</script>