<template>
  <div class="uif-popup-wrap">
    <transition name="uif-popup-mask">
      <div v-if="mask && visible" class="uif-popup-mask" @click="handleMaskClick"></div>
    </transition>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'u-popup-wrap',
  props: {
    mask: {
      type: Boolean,
      default: true
    },
    maskClosable: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false
    }
  },
  mounted () {
    this.visible = true
  },
  methods: {
    handleMaskClick () {
      if (this.maskClosable) {
        this.destroy()
      }
    },
    destroy () {
      this.visible = false
      this.$emit('destroy', this)
    }
  }
}
</script>
