<template>
    <div class="alert" v-bind:class="flash.type">
        <div class="sign-up-exit-img flash-cancel-img" @click="remove">
            <img :src="cancelBtnImg" alt="">
        </div>
        <p>{{ flash.message }}</p>
    </div>
</template>

<script>
    export default {
        props: ['flash', 'cancelBtnImg'],

        created: function() {
            var this_this = this;
            setTimeout(function() {
                this_this.$emit('onRemoveFlash', this_this.flash)
            }, 5000)
        },

        methods: {
            remove: function() {
                this.$emit('onRemoveFlash', this.flash)
            }
        }
    }
</script>

<style>
.alert {
    background: blue;
    color: white;
    font-size: 24px;
    position: fixed;
    z-index: 99999999;
    width: 100%;
    opacity: 65%;
    padding: 10px;
}
.alert p {
    text-align: center;
}
.alert.alert-error {
    background: red;
}
.alert.alert-success {
    background: green;
}
.alert.alert-warning {
    background: yellow;
    color: black;
}
.flash-cancel-img {
    position: absolute;
    right: 30px;
}
</style>