<template>
    <view class="bubble c-padding-h" :style="{'z-index': zIndex}">
        <view class="bubble-cont c-font-normal">
            <!-- 气泡都滚 -->
            <view
                v-if="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="{
                        height: height + 'px',
                        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',
                            float: float,
                            background: background,
                            boxShadow: boxShadow,
                        }"
                    >
                        <view v-if="hasAvatar" class="bubble-item__avatar"><c-avatar :src="item.avatar || icon" :size="iconSize"/></view>
                        <rich-text
                            class="c-line-clamp1 c-gap-left"
                            :style="{marginLeft: textLeft}"
                            :nodes="item.text || item"
                        />
                    </view>
                </view>
            </view>
            <!-- 气泡不滚文字滚 -->
            <view
                v-else-if="currentIndex >= 0"
                class="bubble-text bubble-show"
                :class="{'bubble-item-white': exp === 'whitetext'}"
                :style="{
                    height: height + 'px',
                    boxShadow: boxShadow,
                }"
            >
                <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
                            v-if="hasAvatar"
                            :src="item.avatar || icon"
                            :size="iconSize"
                        />
                        <rich-text
                            class="c-line-clamp1 c-gap-left"
                            :style="{marginLeft: textLeft}"
                            :nodes="item.text || item"
                        />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 问诊-气泡通知
* @author 陈硕
* @categories 业务组件
* @tags [component]
*/
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';

export default {
    config: {
        component: true
    },
    props: {
        // 气泡数据
        dynamics: {
            type: Array
        },
        // 整个气泡是否都滚
        exp: {
            'type': String,
            'default': 'whole'
        },
        // 高度
        height: {
            'type': Number,
            'default': 38
        },
        // icon尺寸
        iconSize: {
            'type': Number,
            'default': 24
        },
        // 文字左外边距
        textLeft: {
            'type': String,
            'default': '.1rem'
        },
        // 是否显示头像
        hasAvatar: {
            'type': Boolean,
            'default': true
        },
        // 气泡位置
        float: {
            'type': String,
            'default': 'left'
        },
        // 背景颜色
        background: {
            'type': String,
            'default': 'rgba(0, 0, 0, .6)'
        },
        // zIndex
        zIndex: {
            'type': Number,
            'default': 919
        },
        // 阴影颜色
        boxShadow: {
            'type': String,
            'default': '0 3px 5px rgba(0, 0, 0, .08)'
        }
    },
    data() {
        return {
            icon: 'https://expertimg.cdn.bcebos.com/expertcms%2Fmed%2Fallhealth%2Fprofile%2Fprofile_avatar.png',
            currentIndex: -1,
            timer: 2000,
            showTrans: false
        };
    },
    components: {
        CAvatar
    },
    watch: {
        currentIndex(newVal) {
            this.carouselLoop(newVal);
        }
    },
    created() {
        this.carouselLoop(0);
    },
    methods: {
        carouselLoop(newVal, isFirst) {
            if (newVal === this.dynamics.length - 1) {
                setTimeout(() => {
                    this.currentIndex = 0;
                    this.showTrans = false;
                }, this.timer / 2);
            }
            else {
                setTimeout(() => {
                    this.currentIndex += 1;
                    this.showTrans = true;
                }, this.timer);
            }
        }
    }
};
</script>

<style lang="less">
.bubble {
    position: absolute;
    left: 0;
    right: 0;
}
.bubble-cont {
    height: 30px;
    overflow: hidden;
    // padding: 15px 0 10px 0;
    box-sizing: border-box;
    position: relative;
}
.bubble-li {
    opacity: 0;
}
.bubble-item {
    color: #fff;
    padding: 0 4px;
    padding-right: 10px;
    border-radius: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    // float: left;
    max-width: 100%;
    &__avatar {
        flex: none;
    }
}
.bubble-item-white {
    color: #333 !important;
    background: rgba(255, 255, 255, .77) !important;
}
.bubble-text {
    height: 38px;
    overflow: hidden;
    background: rgba(0, 0, 0, .67);
    color: #fff;
    border-radius: 30px;
}
.bubble-text-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 38px;
    padding: 0 7px;
}
.bubble-show {
    animation: fadeIn .6s;
}
@keyframes fadeIn {
    0% {
        opacity:0;
     }
    100% {
        opacity:1;
    }
}
</style>
