<template>
    <Portal>
        <transition
            :name="$options.name + '-fade'"
            v-on:after-leave="onClose"
            v-if="visible"
        >
            <div
                :class="bem()"
                :style="{zIndex: zIndex}"
                @mouseover="clearAutoClose"
                @mouseout="autoClose"
            >
                <slot/>
            </div>
        </transition>

    </Portal>
</template>

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

export default {
    name: createComponentName('tips'),
    components: {
        Portal,
    },
    mixins: [componentMixin],
    props: {
        delay: {
            type: Number,
            default: 2000,
        },
        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}-tips';

.@{b} {
    background: #474747;
    border-radius: 4px;
    color: #fff;
    font-size: 1.14em;
    padding: 20px;
    min-width: 160px;
    max-width: 400px;
    min-height: 24px;
    overflow: hidden;
    text-align: center;
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 99;
    transform: translate(-50%,-50%);
    transition: opacity .3s linear,visibility .3s linear;
}

.@{b}-fade-enter-active {
  transition: all .3s ease;
}
.@{b}-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.@{b}-fade-enter, .@{b}-fade-leave-to {
  opacity: 0;
}
</style>
