<template>
  <Transition :duration="duration" :name="animateName">
    <div class="global-modal" :class="`position-${position}`" v-show="show">
      <div class="global-modal-mask"></div>
      <div class="global-modal-content">
        <div class="global-modal-wrapper">
          <slot></slot>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup>
import { ref } from "vue"

const props = defineProps({
  name: {
    default:"bottom",
    type:String
  },
  position:{
    default:"bottom",
    type:String
  },
  duration: {
    default: 300,
    type: Number
  },
  show: false,
  noAnimation: {
    default: false,
    type: Boolean
  }
})

const animateName = ref('')
const directionClass = ref('')

if (!props.noAnimation) {
  switch (props.name) {
    case 'top':
      animateName.value = 'transTop'
      break;
    case 'opacity':
      animateName.value = 'opacity'
      break;
    case 'scale':
      animateName.value = 'scale'
      break;
    default:
      animateName.value = 'transBottom'
      break;
  }
}

</script>

<style>
.global-modal-content {
  z-index: 10;
}
.transBottom-enter-active .global-modal-wrapper,
.transBottom-leave-active .global-modal-wrapper {
  transform: translate3d(0, 0, 0);
  transition: transform .3s ease;
}

.transBottom-enter-from .global-modal-wrapper,
.transBottom-leave-to .global-modal-wrapper {
  transform: translate3d(0, 100%, 0);
}

.transBottom-enter-active .global-modal-mask,
.transBottom-leave-active .global-modal-mask {
  opacity: 1;
  transition: opacity .3s ease;
}

.transBottom-enter-from .global-modal-mask,
.transBottom-leave-to .global-modal-mask {
  opacity: 0;
}

.opacity-enter-active .global-modal-wrapper,
.opacity-leave-active .global-modal-wrapper {
  opacity:1;
  transition: opacity .3s ease;
}

.opacity-enter-from .global-modal-wrapper,
.opacity-leave-to .global-modal-wrapper {
  opacity:0;
}

.opacity-enter-active .global-modal-mask,
.opacity-leave-active .global-modal-mask {
  opacity: 1;
  transition: opacity .3s ease;
}

.opacity-enter-from .global-modal-mask,
.opacity-leave-to .global-modal-mask {
  opacity: 0;
}

.scale-enter-active .global-modal-wrapper,
.scale-leave-active .global-modal-wrapper {
  opacity:1;
  transform: scale(1);
  transition: all .6s cubic-bezier(.58,.05,.07,1.4);
}

.scale-enter-from .global-modal-wrapper,
.scale-leave-to .global-modal-wrapper {
  opacity:0;
  transform: scale(.3);
}

.scale-enter-active .global-modal-mask,
.scale-leave-active .global-modal-mask {
  opacity: 1;
  transition: opacity .3s ease;
}

.scale-enter-from .global-modal-mask,
.scale-leave-to .global-modal-mask {
  opacity: 0;
}
</style>