<template>
  <Teleport to="body">
      <div
          v-show="showMask && show"
          class="pop-mask"
          :class="popMaskClass"
          @click="clickMask"
      ></div>
      <span
          v-if="allowClose && outClose && show"
          class="pop-out-close lofty_iconfont"
          :class="[closeIcon.startsWith('lofty-') ? closeIcon : 'lofty-' + closeIcon]"
          @click="close"
      ></span>
      <transition
          :name="animation"
          :css="enableAnimation"
          v-on:after-enter="$emit('after-enter')"
      >
        <div
            class="pop hidden-scrollbar"
            :class="[animation, customClass]"
            v-show="show"
            aria-modal="true"
            role="dialog"
        >
          <slot></slot>
          <span
              v-show="allowClose && !outClose"
              class="lofty_iconfont lofty-pop-close-icon"
              :class="[closeIcon.startsWith('lofty-') ? closeIcon : 'lofty-' + closeIcon]"
              @click="close"
          ></span>
        </div>
      </transition>
  </Teleport>
</template>

<script>
import util from '@/util';

export default {
  emits: ['after-enter'],
  props: {
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    showMask: {
      type: Boolean,
      default: true
    },
    enableAnimation: {
      type: Boolean,
      default: true
    },
    animation: {
      type: String,
      default: 'fadeIn'
    },
    popMaskClass: {
      type: String,
      default: ''
    },
    customClass: {
      type: String,
      default: ''
    },
    allowClose: {
      type: Boolean,
      default: true
    },
    closeIcon: {
      type: String,
      default: 'icon-close'
    },
    outClose:{
      type: Boolean,
      default: false
    },
    onClose: Function
  },
  data() {
    return {
      show: false,
      popStyle: {}
    };
  },
  computed: {
    isMobile() {
      return util.isMobile;
    }
  },
  created() {
    if (this.isMobile) {
      this.popStyle = {
        position: 'absolute'
      };
    }
  },
  methods: {
    clickMask() {
      if (this.closeOnClickModal) {
        this.close()
      }
    },
    open() {
      this.show = true;
      this.enabledScroll(true);
    },
    hide() {
      this.show = false;
      this.enabledScroll(false);
    },
    close() {
      this.hide();
      if (this.onClose) {
        this.onClose();
      }
    },
    enabledScroll(value) {
      if (value) {
        document.body.classList.add("lofty-overflow-hidden");
      } else {
        document.body.classList.remove("lofty-overflow-hidden");
      }
    }
  },
  unmounted() {
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
  }
};
</script>

<style lang="scss">
@use "pop.scss" as *;
.pop {
  &.fadeIn {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &.fadeIn-enter-active,
  &.fadeIn-leave-active {
    transition: opacity 0.2s ease;
  }
  &.fadeIn-enter,
  &.fadeIn-leave-to {
    opacity: 0;
  }

  &.bottomToUp {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
  }
  &.bottomToUp-enter-active,
  &.bottomToUp-leave-active {
    transition: transform ease 0.2s;
  }
  &.bottomToUp-enter,
  &.bottomToUp-leave-to {
    transform: translate(-50%, 100%);
  }
  &.leftToRight {
    top: 50%;
    left: 0;
    right: auto;
    transform: translate(0, -50%);
  }
  &.leftToRight-enter-active,
  &.leftToRight-leave-active {
    transition: transform ease 0.2s;
  }
  &.leftToRight-enter,
  &.leftToRight-leave-to {
    transform: translate(-100%, -50%);
  }
  &.fadeInRight {
    top: 50%;
    left: auto;
    right: 0;
    transform: translate(0, -50%);
  }
  &.fadeInRight-enter-active,
  &.fadeInRight-leave-active {
    transition: transform ease 0.2s;
  }
  &.fadeInRight-enter,
  &.fadeInRight-leave-to {
    transform: translate(100%, -50%);
  }

  &.scale {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: all ease 0.2s;
  }
  &.scale-enter-active,
  &.scale-leave-active {
    transition: all ease 0.2s;
  }
  &.scale-enter {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 1;
  }
  &.scale-leave-to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
</style>
