<script>
export default {
  name: 'DestroyablePopup',
  data() {
    return {
      isPopupOpen: this.show, isDestroyPopup: false
    }
  },
  watch: {
    isPopupOpen(val) {
      this.isPopupOpen = val
      this.$emit('update:show', val)
    },
    show() {
      if (this.show) this.isDestroyPopup = false
      this.$nextTick(() => this.isPopupOpen = this.show)
    }
  },
  props: ['show']
}
</script>

<template>
  <div v-if="!isDestroyPopup" style="max-height: 90vh">
    <van-popup v-model="isPopupOpen" round position="bottom" @closed="()=>{isDestroyPopup = true}">
      <slot></slot>
    </van-popup>
  </div>
</template>
