<template>
    <view class="bubble c-padding-h">
        <view class="bubble-cont c-font-normal" :class="showBubbleBar ? '' : 'hidden-style'">
            <!-- 气泡都滚 -->
            <view
                v-if="showBubbleBar && exp === 'whole'"
                :style="{
                    transform: 'translateY(' + -currentIndex * height + 'px)',
                    transition: showTrans ? 'all .7s cubic-bezier(0.2, 0, 0.2, 1)' : 'none',
                }"
            >
                <view
                    v-for="(item, index) in dynamics"
                    :key="index"
                    class="bubble-li"
                    :style="{
                        opacity: index === currentIndex ? 1 : 0,
                        transition: showTrans ? 'all .7s cubic-bezier(0.2, 0, 0.2, 1)' : 'none',
                    }"
                >
                    <view
                        class="bubble-item"
                        :style="{
                            height: height + 'px',
                        }"
                    >
                        <c-avatar :src="icon" :size="iconSize"/>
                        <rich-text
                            class="c-line-clamp1 c-gap-left"
                            :style="{marginLeft: textLeft}"
                            :nodes="item"
                        />
                    </view>
                </view>
            </view>
            <!-- 气泡不滚文字滚 -->
            <view
                v-else-if="showBubbleBar && currentIndex >= 0"
                class="bubble-text bubble-show"
                :class="{'bubble-item-white': exp === 'whitetext', 'bubble-text--transparent': hideBgColor}"
                :style="{
                    height: height + 'px',
                }"
            >
                <view
                    :style="{
                        transform: 'translateY(' + -currentIndex * height + 'px)',
                        transition: showTrans ? 'all .7s cubic-bezier(0.2, 0, 0.2, 1)' : 'none',
                    }"
                >
                    <view
                        v-for="(item, index) in dynamics"
                        :key="index"
                        class="bubble-li bubble-text-item"
                        :style="{
                            opacity: index === currentIndex ? 1 : 0,
                            transition: showTrans ? 'all .7s cubic-bezier(0.2, 0, 0.2, 1)' : 'none',
                            height: height + 'px',
                        }"
                    >
                        <c-avatar :src="icon" :size="iconSize"/>
                        <rich-text
                            class="c-line-clamp1 c-gap-left"
                            :style="{marginLeft: textLeft}"
                            :nodes="item"
                        />
                        <view v-show="showCloseIcon" @tap="onClose">
                            <c-icon
                                class="bubble-close"
                                name="close"
                                font-size="18px"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 问诊-气泡通知
 * @author 陈硕
 */
import Avatar from '@baidu/med-ui/components/Avatar/Avatar';
import Icon from '@baidu/med-ui/components/Icon/Icon';

export default {
    config: {
        component: true
    },
    props: {
        showCloseIcon: {
            type: Boolean,
            default: false
        },
        dynamics: {
            type: Array
        },
        exp: {
            type: String,
            default: 'whole'
        },
        height: {
            type: Number,
            default: 38
        },
        iconSize: {
            type: Number,
            default: 24
        },
        textLeft: {
            type: String,
            default: '.1rem'
        },
        delay: {
            type: Number,
            default: -1
        },
        hideBgColor: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            icon: 'https://expertimg.cdn.bcebos.com/expertcms%2Fmed%2Fallhealth%2Fprofile%2Fprofile_avatar.png',
            currentIndex: -1,
            timer: 3000,
            showTrans: false,
            showBubbleBar: true
        };
    },
    components: {
        'c-avatar': Avatar,
        'c-icon': Icon
    },
    watch: {
        currentIndex(newVal) {
            this.carouselLoop(newVal);
        }
    },
    created() {
        this.carouselLoop(0);
    },
    methods: {
        onClose() {
            this.showBubbleBar = false;
        },
        carouselLoop(newVal, isFirst) {
            if (newVal === this.dynamics.length - 1) {
                setTimeout(() => {
                    this.currentIndex = 0;
                    this.showTrans = false;
                }, this.timer / 2);
            } else if (this.delay >= 0 && newVal === 0) {
                setTimeout(() => {
                    this.currentIndex += 1;
                    this.showTrans = true;
                }, this.delay);
            } else {
                setTimeout(() => {
                    this.currentIndex += 1;
                    this.showTrans = true;
                }, this.timer);
            }
        }
    }
};
</script>

<style lang="less">
.bubble {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 919;
}
.bubble-cont {
    height: 60px;
    overflow: hidden;
    // padding: 15px 0 10px 0;
    box-sizing: border-box;
    position: relative;
}
.bubble-li {
    opacity: 0;
}
.bubble-item {
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 0 7px;
    border-radius: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}
.bubble-item-white {
    color: #333 !important;
    background: rgba(255, 255, 255, 0.77) !important;
}
.bubble-text {
    height: 38px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.67);
    box-shadow: 0 3px 5px rgba(214, 202, 202, 0.08);
    color: #fff;
    border-radius: 30px;

    &--transparent {
        background: none;
        box-shadow: none;
    }
}
.bubble-text-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 38px;
    padding: 0 7px;
    position: relative;
    .c-line-clamp1 {
        width: 260px;
    }
    .bubble-close {
        color: #fff;
        position: absolute;
        top: 7px;
        right: 10px;
    }
}
.bubble-show {
    animation: fadeIn 0.6s;
}
.hidden-style {
    height: 0;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
</style>
