<template>
    <view class="act-notice">
        <view
            v-if="tip && tip.text"
            class="act-tip c-font-small c-gap-inner-bottom"
            :style="{
                background: bgColor,
                paddingRight: rightIcon ? '30px' : '20px'
            }"
        >
            <view class="act-tip-wrap">
                <view class="act-tip-cont" :style="{
                    transform: 'translateX(' + offset + 'px)',
                    transition: showTrans && 'all '+ speed + 's linear'
                }">
                    <image v-if="tip.icon" :src="tip.icon" class="act-tip-icon c-gap-right-middle" lazy-load />
                    <text :style="{color: fontColor}">{{tip.text}}</text>
                </view>
                <view class="act-tip-right c-inline-block">
                    <c-icon name="right" font-size="10px" class="icon"/>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 滚动通知条
* @author chenshuo04
* @categories 滚动通知组件
* @tags [component]
*/

import CIcon from '@baidu/med-ui/components/Icon/Icon';
let actNoticeTimer = null;
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon
    },
    props: {
        // 通知内容
        tip: {
            type: Object
        },
        // 背景色
        bgColor: {
            type: String,
            default: 'rgb(255,111,97, 0.1)'
        },
        // 字体颜色
        fontColor: {
            type: String,
            default: '#ff6050'
        },
        // 是否需要右侧箭头
        rightIcon: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            offset: 0,
            wrapWidth: 0,
            contWidth: 0,
            showTrans: true,
            speed: 12
        };
    },
    created() {
        setTimeout(() => {
            this.getWidth();
        }, 3000);
    },
    pageLifetimes: {
        show() {
            actNoticeTimer && clearTimeout(actNoticeTimer);
            this.clearData();
            setTimeout(() => {
                this.getWidth();
            }, 1000);
        }
    },
    destroyed() {
        actNoticeTimer && clearTimeout(actNoticeTimer);
    },
    methods: {
        clearData() {
            Object.assign(this, {
                offset: 0,
                wrapWidth: 0,
                contWidth: 0,
                showTrans: false,
                speed: 12
            });
        },
        getWidth() {
            const query = this.$api.createSelectorQuery().select('.act-tip-cont');
            query.boundingClientRect(rect => {
                const {width} = rect || {};
                if (width) {
                    this.$api.createSelectorQuery().select('.act-tip-wrap')
                    .boundingClientRect(wrapRect => {
                        Object.assign(this, {
                            wrapWidth: wrapRect.width,
                            contWidth: width,
                            showTrans: true
                        });
                        this.offset = -width;
                        this.onStart();
                    }).exec();
                } else {
                    setTimeout(() => this.getWidth(), 300);
                }
            })
            .exec();
        },
        onStart() {
            const {wrapWidth, contWidth} = this;
            actNoticeTimer = setTimeout(() => {
                this.showTrans = false;
                this.offset = wrapWidth;
                setTimeout(() => {
                    this.showTrans = true;
                    this.speed = (wrapWidth + contWidth) / contWidth * 12;
                    this.offset = -contWidth;
                }, 50);
                this.onStart();
            }, this.speed * 1000);
        }
    }
};
</script>

<style lang="less" scoped>
.act-notice {
    .act-tip {
        width: 100vw;
        box-sizing: border-box;
        color: #333;
        padding: 5px 20px;
        // border-radius: 8px;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        &-icon {
            position: relative;
            top: 2px;
            width: 14px;
            height: 14px;
        }
        &-wrap {
            overflow: hidden;
        }
        &-cont {
            display: inline-block;
        }
        &-right {
            position: absolute;
            right: 15px;
            .icon {
                color: #ff6161;
                font-weight: bold;
            }
        }
    }
}
</style>
