<template>
    <div :class="[$style.message,visible&&$style.visible,type]">
        <IconFont>{{getIconCode}}</IconFont>
        <span :class="$style.msg">{{msg}}</span>
    </div>
</template>

<script>
    import IconFont from "../../basic/IconFont";
    export default {
        name: "Message",
        components: {IconFont},
        data(){
            return {
                visible:false,
                timer:null,
                msg:"",
                type:undefined
            }
        },
        computed:{
            getIconCode(){
                switch(this.type){
                    case 'error':return '\ue124';
                    case 'success':return '\ue123';
                    case 'warning':return '\ue122';
                    case 'notice':
                    default:
                        return '\ue121';
                }
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../../cssInjection/cssFunction.scss';
    @import '../../../cssInjection/cssLayout.scss';
    .message{
        position: fixed;
        z-index: 200;
        left: 50%;
        top: 80px;
        transform: translateX(-50%);
        width: 380px;
        height: 46px;
        line-height: 46px;
        font-size: 14px;
        border-radius: 4PX;
        opacity: 0;
        margin-top: -20px;
        pointer-events: none;
        transition: opacity .2s,margin-top .2s,pointer-events 0s .2s;
        &.visible{
            opacity: 1;
            margin-top: 0;
            pointer-events: auto;
            transition: opacity .2s,margin-top .2s,pointer-events 0s 0s;
        }
        >*{
            display: inline-block;
            vertical-align: middle;
        }
        >.msg{
            margin-left: 8px;
        }
        &:global{
            border: 1PX solid #ebeef5;
            background-color: #edf2fc;
            color: #909399;
            padding: 0 15px 0 20px;
            &.success{
                background-color: #f0f9eb;
                border-color: #e1f3d8;
                color: #67c23a;
            }
            &.warning{
                background-color: #fdf6ec;
                border-color: #faecd8;
                color: #e6a23c;
            }
            &.error{
                background-color: #fef0f0;
                border-color: #fde2e2;
                color: #f56c6c;
            }
        }
    }
</style>