<template>
    <transition name="fade">
        <div :class="alertClasses" v-show="show">
            <div class="alert-icon">
                <i class="flaticon2-bell-2"></i>
            </div>
            <div class="alert-text">
                <slot></slot>
            </div>
            <span class="close" v-show="important" @click="show = false">×</span>
        </div>
    </transition>
</template>

<script>
export default {
    props : {
        type : {default : 'info'},
        timeout : {default : 3000},
        important : {type : Boolean, default : false}
    },
    data() {
        return {
            show : true
        };
    },
    computed : {
        alertClasses() {
            let type = this.type;
            return {
                'alert' : true,
                'alert-dismissible' : true,
                'alert-success' : type === 'success',
                'alert-warning' : type === 'warning',
                'alert-danger' : type === 'danger',
                'alert-info' : type === 'info'
            };
        }
    },
    mounted() {
        if (!this.important) {
            setTimeout(
                () => this.show = false,
                this.timeout
            );
        }
    }
}
</script>
