<template>
  <teleport to="body">
    <transition name="slide-down" mode="out-in" appear>
      <div class="ui-toast" :style="{ zIndex: zIndex }" v-if="show">
        <div class="ui-toast__box" :class="[type]">
          <i v-if="type !== 'fixed' && type" class="icon"></i>
          <div class="ui-toast__msg" v-html="content"></div>
          <i class="iconfont icon-close close" @click="close" v-if="showClose"></i>
        </div>
      </div>
    </transition>
  </teleport>
</template>
<script>
  import { defineComponent, nextTick, ref } from 'vue';
  import { getZIndex } from './utils';
  export default defineComponent({
    name: 'UiToast',
    props: {
      type: String,
      delay: Number,
      content: String,
      destroy: Function,
      close: Function,
      showClose: Boolean,
    },
    setup: function (props, ctx) {
      const show = ref(true);
      const close = () => {
        show.value = false;
        nextTick(() => {
          if (typeof props.close == 'function') {
            props.close();
          }
          typeof props.destroy === 'function' && props.destroy();
        });
      };

      if (props.type !== 'fixed') {
        setTimeout(() => close(), props.delay || 3000);
      }
      return {
        show,
        type: props.type,
        close,
        content: props.content,
        zIndex: getZIndex(),
      };
    },
  });
</script>
<style lang="scss" scoped>
  .slide-down-enter-active,
  .slide-down-leave-active {
    will-change: transform;
    transition: all 0.35s ease-in-out;
  }
  .slide-down-enter-from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  .slide-down-enter {
    opacity: 1;
    transform: translate3d(-50%, 100%, 0);
  }
  .slide-down-leave-active {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
</style>
