<template>
  <aside v-if="toastTitle" class="absolute toast center" @click="close">{{toastTitle}}</aside>
</template>

<script>
import props from '../props';
export default {
  name: "popup-toast",

  watch:{

    title:{
      handler:function () {
        if (this.title) {
          return this.open();
        }
      },
      immediate:true
    }

  },

  methods:{
    open:function () {

      if (this.title) {
        clearTimeout(this.time);

        this.toastTitle = this.title;

        this.time = setTimeout(()=> this.close(),this.duration || 3000);
      }

    },
    close(){
      clearTimeout(this.time);
      this.$emit('destroy-popup');
    }
  },

  data(){
    return {
      toastTitle:''
    }
  },

  props

}
</script>

<style scoped lang="scss" src="../style.scss"></style>