<template>
    <Portal>
        <transition
            name="gd-message-fade"
            v-on:after-leave="onClose"
            v-if="visible">
            <div
                :class="bem()"
                :style="{zIndex: zIndex, top: top}"
                @mouseover="clearAutoClose"
                @mouseout="autoClose"
            >
                <div :class="bem('content')">
                    <slot>{{ message }}</slot>
                </div>
                <icon
                    v-if="showClose"
                    name="close"
                    color="#AAA"
                    :class="bem('close')"
                    @click.native="visible = false"
                />
            </div>
        </transition>
    </Portal>
</template>

<script>
import { componentMixin, createComponentName } from '../_utils/component';
import Portal from '../Portal';
import Icon from '../Icon';
import popupManager from '../_utils/popup-manager';

export default {
    name: createComponentName('message'),
    components: {
        Portal,
        Icon,
    },
    mixins: [componentMixin],
    props: {
        top: {
            type: String,
            default: '25vh',
        },
        delay: {
            type: Number,
            default: 2000,
        },
        showClose: {
            type: Boolean,
            default: true,
        },
        onClose: {
            type: [Function, undefined],

        },
    },
    data() {
        return {
            visible: false,
            zIndex: 0,
        };
    },
    watch: {
        visible(value, old) {
            if (value && value !== old) {
                this.zIndex = popupManager.getZindex();
            }
        },
    },
    mounted() {
        this.autoClose();
    },
    methods: {
        autoClose() {
            if (this.delay) {
                this.timer = setTimeout(() => {
                    this.visible = false;
                }, this.delay);
            }
        },
        clearAutoClose() {
            clearTimeout(this.timer);
        },
    },
};
</script>

<style lang="less">
@import '../_styles/base.less';

@b: ~'@{prefix}-message';

.@{b} {
    position: fixed;
    left: 50%;
    padding: 8px 16px;
    min-width:192px;
    background:rgba(255,255,255,1);
    transform: translateX(-50%);
    box-shadow:0px 8px 12px 0px rgba(120,144,156,0.08);
    border-radius:2px;
    display: flex;
    border: 1px solid #ECEFF1;

    &__content {
        line-height: 20px;
        color: #37474F;
        font-size: 14px;
        flex: 1 1 auto;
    }

    &__close {
        margin-left: 40px;
        cursor: pointer;
    }
}

.gd-message-fade-enter-active {
    animation: gd-message-fade-in 0.3s;
}

.gd-message-fade-leave-active {
    animation: gd-message-fade-out 0.3s;
}

@keyframes gd-message-fade-in {
    0% {
        transform: translate3d(-50%, -40px, 0);
        opacity: 0;
    }
}

@keyframes gd-message-fade-out {
    100% {
        transform: translate3d(-50%, -40px, 0);
        opacity: 0;
    }
}
</style>
