<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',
                    fontSize: fontSize,
                }"
            >
                <view
                    v-for="(item, index) in dynamicsNew"
                    :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="icon" class="bubble-item__icon">
                            <c-icon
                                v-if="icon"
                                :name="icon"
                                :font-size="iconSize + 'px'"
                                :style="{
                                    'margin-left': '5px',
                                }"
                            />
                        </view>
                        <view v-else class="bubble-item__icon">
                            <c-avatar :size="24"/>
                        </view>
                        <rich-text
                            class="c-line-clamp1 c-gap-left rich-text"
                            :style="{marginLeft: textLeft}"
                            :nodes="item.content"
                        />
                        <rich-text
                            class="c-line-clamp1 c-gap-left"
                            :style="{
                                marginLeft: textLeft,
                                flex: '1 0 0.6rem',
                                'text-align': 'right',
                            }"
                            :nodes="item.before + '分钟前'"
                        />
                    </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,
                    fontSize: fontSize,
                }"
            >
                <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 dynamicsNew"
                        :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-icon
                            v-if="icon"
                            :name="icon"
                            :font-size="iconSize + 'px'"
                            :style="{
                                'margin-left': '5px',
                            }"
                        />
                        <view v-else class="bubble-item__icon">
                            <c-avatar :size="24"/>
                        </view>
                        <rich-text
                            class="c-line-clamp1 c-gap-left rich-text"
                            :style="{marginLeft: textLeft}"
                            :nodes="item.content"
                        />
                        <rich-text
                            class="c-line-clamp1 c-gap-left"
                            :style="{
                                marginLeft: textLeft,
                                flex: '1 0 0.6rem',
                                'text-align': 'right',
                            }"
                            :nodes="item.before + '分钟前'"
                        />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
* @file 问诊-气泡滚动
* @author hanwensheng
* @categories 业务组件
* @tags [component]
*/
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';

export default {
    config: {
        component: true
    },
    props: {
        // 气泡数据
        dynamics: {
            type: Array
        },
        // 整个气泡是否都滚
        exp: {
            'type': String,
            'default': 'whole'
        },
        timer:{
            'type': Number,
            'default': 3000
        },
        // 高度
        height: {
            'type': Number,
            'default': 38
        },
        icon:{
            'type': String,
        },
        // icon尺寸
        iconSize: {
            'type': Number,
            'default': 16
        },
        // 文字大小
        fontSize:{
            'type': String,
            'default': '14px'
        },
        // 文字左外边距
        textLeft: {
            'type': String,
            'default': '.1rem'
        },
        // 气泡位置
        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 {
            currentIndex: -1,
            showTrans: false,
            dynamicsNew: []
        };
    },
    components: {
        CIcon,
        CAvatar
    },
    watch: {
        currentIndex(newVal) {
            this.carouselLoop(newVal);
        }
    },
    created() {
        // 底部轮播最后一张到第一张过渡,数组最后追加一个
        let dynamicsNew = this.dynamics;
        dynamicsNew.push(dynamicsNew[0]);
        this.dynamicsNew = dynamicsNew;
        this.carouselLoop(0, true);
    },
    methods: {
        carouselLoop(newVal, isFirst) {
            if (newVal === 0 && isFirst){
                this.currentIndex += 1;
                this.showTrans = true;
                return;
            }
            let self = this;
            if ((newVal === this.dynamicsNew.length - 1)) {
                setTimeout(() => {
                    self.currentIndex = 0;
                    self.showTrans = false;
                }, this.timer / 2);
            }
            else {
                setTimeout(() => {
                    self.currentIndex += 1;
                    self.showTrans = true;
                }, this.timer);
            }
        }
    }
};
</script>

<style lang="less">
.bubble {
    position: absolute;
    left: 0;
    right: 0;
}
.bubble-cont {
    height: 60px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}
.bubble-li {
    opacity: 0;
}
.bubble-item {
    color: #fff;
    padding: 0 7px;
    background: rgba(0, 0, 0, 0.6);
    padding-right: 10px;
    border-radius: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
    &__icon {
        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);
    box-shadow: 0 3px 5px rgba(214, 202, 202, 0.08);
    color: #fff;
    border-radius: 30px;
}
.bubble-text-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 38px;
    padding: 0 .15rem 0 7px;
    position: relative;
}
.bubble-show {
    animation: fadeIn .6s;
}
.rich-text {
    height: .2rem;
    display: flex;
    align-items: center;
}
@keyframes fadeIn {
    0% {
        opacity:0;
     }
    100% {
        opacity:1;
    }
}
</style>
