<style lang=sass>
@import "../../assets/components/_toast.scss";
</style>
<template>
<div class="toast-wrap" :class="activeCls"  >
    <div class="toast" :transition="transition" v-show="visible">
        <p class="toast-txt" v-text="text"></p>
    </div>
</div>
</template>

<script>
export default{
	props:{
		visible:{
			type:Boolean,
			default:false,
			twoWay:true
		},
		text:String,
		transition:{
			type:String,
			default:"toast-fade-in"
		},
		autoPlay:{
			type:Boolean,
			default:false
		},
		delay:{
			type:Number,
			default:2000
		}
	},
	data(){
		return{
			activeCls:null
		}
	},
	watch:{
		visible(val){
			val?this.activeCls="active":this.activeCls=null;
			if(val&&this.autoPlay){
				this.autoHide();
			}

		}
		
	},
	methods:{
		autoHide(){
			var self=this;
			var timer=setTimeout(function(){
				self.visible=false;
				clearTimeout(timer);
			},this.delay);
		}
	}
}
</script>