<template>
<transition name="fade">
  <div class="ui dimmer modals page" v-if="showBackDrop" style="display: block !important; overflow-y: scroll;" :style="{ visibility: showBackDrop ? 'visible' : 'hidden', opacity: showBackDrop ? '1' : '0'}" @click="closeModal()">
    <transition name="scale">
      <div :id="id" class="ui modal active visibility" v-show="showModal" :class="[size, type, isScroll ? 'scrolling' : ''] " @click="clickContent($event)">
        <slot></slot>
      </div>
    </transition>
  </div>
</transition>
</template>

<script>
export default {
name: 'modal',
  props: {
    size: {
      type: String,
      default: 'small'
    },
    type: {
      type: String,
      default: ''
    },
    closeable: {
      type: Boolean,
      default: true
    },
    isScroll: {
      type: Boolean,
      default: false
    }

      },

  data() {
    return {
      id: `modal_${Math.random()}`,
      showBackDrop: false,
      showModal: false
        }
  },

  mounted() {
    document.body.classList.add("dimmable");

  },

  methods: {
    clickContent(event) {
      event.stopPropagation();
    },
    open() {
      this.showBackDrop = true
      document.body.classList.add("dimmed");
      setTimeout(() => {
        this.showModal = true;
        setTimeout(() => {
          this.$el.firstChild.style.top = ((document.body.offsetHeight - this.$el.firstChild.offsetHeight) / 2) + 'px';
        })
      });

    },
    close() {
      this.showModal = false
      setTimeout(() => {
        this.showBackDrop = false
        document.body.classList.remove("dimmed");
      }, 30);
    },
    closeModal() {
      if (!this.closeable) {
        return;
      }
      this.close();
    }

  }
}
</script>


<style>


.modal .header {background: #f0f8ff !important;}

.scale-enter-active {
  animation: scaleIn .5s;
}

.scale-leave-active {
  animation: scaleOut .5s;
}

.fade-enter-active {
  animation: fadeIn .5s;
}

.fade-leave-active {
  animation: fadeOut .5s;
}
</style>