<template>
  <transition
    appear
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut"
    :duration="150"
  >
    <div class="ui-popup-notification">
      <slot></slot>
    </div>
  </transition>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'

@Component({
  inheritAttrs: false,
})
export default class PopupItemWrapper extends Vue {
  @Prop(Number) duration!: number
  @Prop(Number) notificationId!: number

  timeout?: any

  mounted() {
    this.timeout = setTimeout(() => this.close(), this.duration * 1000)
  }

  destroyed() {
    if (this.timeout) {
      clearTimeout(this.timeout)
    }
  }

  @Emit()
  close() {
    return this.notificationId
  }
}
</script>
