<template>
    <div class="c_popup">
        <div class="c_popupBg"></div>
        <div class="c_popupBox">
            <div class="c_popupWrapper">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<script>
import Migrating from 'touch-vue/src/mixins/migrating';
import emitter from 'touch-vue/src/mixins/emitter';

export default {
  name: 'ToPopup',

  mixins: [emitter, Migrating],

  props: {
    title: {
      type: String,
      default: ''
    },

    modal: {
      type: Boolean,
      default: true
    },

    closeOnClickModal: {
      type: Boolean,
      default: true
    },

    closeOnPressEscape: {
      type: Boolean,
      default: true
    },

    showClose: {
      type: Boolean,
      default: true
    },

    fullscreen: Boolean,

    customClass: {
      type: String,
      default: ''
    },

    destroyOnClose: Boolean
  },

  data() {
    return {
      closed: false,
      key: 0
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.closed = false;
        this.$emit('open');
        this.$nextTick(() => {
          // this.$refs.dialog.scrollTop = 0;
        });
        //document.body.appendChild(this.$el);
      } else {
        if (!this.closed) this.$emit('close');
        if (this.destroyOnClose) {
          this.$nextTick(() => {
            this.key++;
          });
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      document.body.appendChild(this.$el);
    });
  },
  destroyed() {
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
  }
};
</script>
