<template>
    
    <div
        v-show="showNoticeBar"
        :class="classes({ wrapable: this.wrapable })"
        :style="{ color, background }"
        @click="handleClick"
    >
        <slot name="left-icon">
            <h-icon v-if="leftIcon" :class="classes('left-icon')" :type="leftIcon" />
        </slot>
        <div ref="wrap" :class="classes('wrap')">
            <div
            ref="content"
            :class="[
                classes('content'),
                this.animationClass,
                { 'van-ellipsis': !this.scrollable && !this.wrapable }
            ]"
            :style="contentStyle"
            @animationend="this.onAnimationEnd"
            >
                <slot>{{text}}</slot>
            </div>
        </div>
        <slot name="right-icon" >
            <h-icon v-if="mode" :class="classes('right-icon')" :type="mode === 'closeable' ? 'guanbi-fill' : mode === 'link' ? 'jiantou' : ''" @click="onClickIcon" />
        </slot>
    </div>
</template>
<script>
import { classesMixin } from '../../common/mixins/classname';
import hIcon from '../icon/index';
let classMixin = classesMixin('notice-bar');
export default {
    name: 'h-notice-bar',
    mixins: [classMixin],
    components: {
        hIcon
    },
    props: {
        text: String,
        mode: String,
        color: String,
        leftIcon: String,
        wrapable: Boolean,
        background: String,
        delay: {
            type: [String, Number],
            default: 1
        },
        scrollable: {
            type: Boolean,
            default: true
        },
        speed: {
            type: Number,
            default: 50
        }
    },
    data() {
        return {
        wrapWidth: 0,
        firstRound: true,
        duration: 0,
        offsetWidth: 0,
        showNoticeBar: true,
        animationClass: ''
        };
    },
    watch: {
        text: {
        handler() {
            this.$nextTick(() => {
            const { wrap, content } = this.$refs;
            if (!wrap || !content) {
                return;
            }

            const wrapWidth = wrap.getBoundingClientRect().width;
            const offsetWidth = content.getBoundingClientRect().width;
            if (this.scrollable && offsetWidth > wrapWidth) {
                this.wrapWidth = wrapWidth;
                this.offsetWidth = offsetWidth;
                this.duration = offsetWidth / this.speed;
                this.animationClass = this.classes('play');
            }
            });
        },
        immediate: true
        }
    },
    computed: {
        contentStyle() {
            return {
            paddingLeft: this.firstRound ? 0 : this.wrapWidth + 'px',
            animationDelay: (this.firstRound ? this.delay : 0) + 's',
            animationDuration: this.duration + 's'
            }
        }
    },
    methods: {
        handleClick( e ) {
            this.$emit( 'click', e );
        },
        onAnimationEnd() {
            this.firstRound = false;
            this.$nextTick(() => {
                this.duration = (this.offsetWidth + this.wrapWidth) / this.speed;
                this.animationClass = this.classes('play--infinite');
            });
        },
        onClickIcon() {
            if (this.mode === 'closeable') {
                this.showNoticeBar = false;
                this.$emit('close');
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
