<template>
    <div class="el-highlight-tip" :class="{'highlight_s': highlight, 'glitter': $data._glitter,'display-block':block}">
        <div class="shallow_tip" v-if="$data._glitter"></div>
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "su-content-highlight-tip",
    props: {
        glitter: { // 是否闪烁
            type: Boolean,
            default: true
        },
        delay: { // 高亮的延迟时间
            type: Number,
            default: 5000
        },
        /* display:block 块级元素 宽度父级适应*/
        block:{
            type:Boolean,
            default:false,
        }

    },
    data() {
        return {
            highlight: false,
            timer: null,
            _glitter: false
        }
    },
    created() {

    },
    methods: {
        // 显示高亮提示
        startTip() {
            this.highlight = true;
            this.$data._glitter = this.glitter;
            if(this.delay > 0) {
                this.delayStopTip();
            }
        },
        // 隐藏高亮提示
        stopTip() {
            this.highlight = false;
            this.$data._glitter = false;
        },
        // 延迟隐藏高亮提示
        delayStopTip() {
            let that = this;
            clearTimeout(that.timer);
            that.timer = setTimeout(function() {
                that.highlight = false;
                that.$data._glitter = false;
            }, that.delay)
        }

    }
}
</script>

<style lang="less" scoped>
.el-highlight-tip {
    display: inline-block;
    position: relative;
    border: 1px solid transparent;
    &.display-block{
        display: block;
    }
    &.highlight_s {
        border: 1px solid #40a9ff;
    }

    &.glitter {
        animation: fade 600ms infinite;
        -webkit-animation: fade 600ms infinite;
    }

    .shallow_tip {
        width: calc(100% + 2px);
        height: calc(100% + 2px );
        position: absolute;
        top: -3px;
        left: -3px;
        border: 2px solid rgba(9, 109, 217, 0.2);
    }

}

@keyframes fade {
    from {
        opacity: 1.0;
    }
    50% {
        opacity: 0.4;
    }
    to {
        opacity: 1.0;
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 1.0;
    }
    50% {
        opacity: 0.4;
    }
    to {
        opacity: 1.0;
    }
}

</style>
