<template>
    <view
        class="mb-msg"
        :style="{'transform': isMsgUpfold, 'bottom': flexdBottom}"
    >
        <swiper
            :interval="noticeConfigDuration"
            :autoplay="suspensionAutoplay"
            :circular="noticeTips.length > 1 ? true : false"
            vertical
            class="mb-msg-sw"
        >
            <swiper-item
                v-for="(item, i) in noticeTips"
                :key="i"
                clsss="mb-msg-sw-item"
                @touchmove.stop="stopIndex"
                @tap="suspensionClk(item,i)"
            >
                <view class="mb-msg-sw-item-wrap">
                    <view class="mb-msg-sw-item-wrap-left">
                        <view class="mb-msg-sw-item-wrap-image">
                            <image
                                v-if="item.content && item.content.avatar"
                                :src="item.content.avatar"
                                class="mb-msg-sw-item-wrap-image-show"
                            />
                        </view>
                        <view class="mb-msg-sw-item-wrap-tips c-line-clamp2">{{ item.content.desc }}</view>
                    </view>
                    <view class="mb-msg-sw-item-wrap-btn">{{ item.content.btn || '查看' }}</view>
                    <view
                        class="mb-msg-sw-item-wrap-close"
                        @tap.stop="onHandleClose"
                    >
                        <c-icon
                            color="#fff"
                            font-size="10px"
                            name="close"
                        />
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>

import {request} from '../../utils/request';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import * as conf from '../../utils/conf';

/**
 * @author v_caobaoling
 * @file 消息强化组件
 * @categories 通用组件
 * @tags [component]
 */

// 消息动效延迟时间
const msgDelay = 500;
// 消息下拉开始时间点
let msgBeginTime = null;

export default {
    config: {
        component: true
    },
    components: {
        CIcon
    },
    props: {
        /**
         * 消息列表
         */
        noticeTips: {
            type: Array,
            default() {
                return [];
            }
        },
        /**
         * 通知类型轮播间隔
         */
        noticeConfigDuration: {
            type: Number,
            default: 4000
        },
        /**
         * 通知类型悬浮时间
         */
        noticeConfigShow: {
            type: Number,
            default: 12000
        },
        /**
         * 自动轮播时机
         */
        suspensionAutoplay: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            // 是否展示
            close: false,
            // 消息列表是否展开
            isMsgUpfold: 'translateX()',
            // 滑动距离
            upDistance: 0,
            flexdBottom: '58px'
        };
    },
    created() {
        if (process.env.MARS_ENV === 'swan') {
            this.flexdBottom = '10px';
        }
    },
    methods: {
        medMsgIntensifyStyle(e) {
            const diff = e.scrollTop - this.upDistance;
            let isMsgUpfoldEquipment = this.$api.getSystemInfoSync().screenWidth;
            // 消息收起展开
            if (this.upDistance === 0) {
                this.upDistance = e.scrollTop;
                return;
            }
            // 上滑到顶部，初始为展开状态
            if (e.scrollTop === 0) {
                this.isMsgUpfold = 'translateX(0)';
            }
            if (Math.abs(diff) < 44 || e.scrollTop < 0) {
                return;
            }
            // 下拉
            if (diff > 44) {
                this.isMsgUpfold = `translateX(${isMsgUpfoldEquipment - 70}px)`;
                msgBeginTime = Date.now();
            }
            // 上滑, 滑动距离大于44，且下拉与上滑的间隔超过 msgDelay，且 上次记录的下拉时间为空
            else if (diff < -44 && (Date.now() - msgBeginTime > msgDelay || !msgBeginTime)) {
                msgBeginTime = null;
                this.isMsgUpfold = `translateX(${isMsgUpfoldEquipment - 70}px)`;
            }
            this.upDistance = e.scrollTop;
        },
        onHandleClose() {
            this.$emit('onHandleClose');
        },
        stopIndex() {
            return;
        },
        suspensionClk(item, index) {
            request({
                url: conf.apiHost + item.clickUrl,
                isNeedLogin: false,
                isFirstScreen: false
            }).then(res => {
                this.$emit('noticeReadEvents', item);
            });
        }
    }
};
</script>
<style lang="less" scoped>
.mb-msg {
    position: fixed;
    width: 100%;
    z-index: 99;
    padding: 0 17px;
    box-sizing: border-box;
    transition: transform 0.5s;

    &-sw {
        height: 60px;
        background: #000;
        box-shadow: 0 3px 17px 0 rgba(0, 0, 0, .06);
        border-radius: 30px;
        opacity: 0.7;

        &-item {
            &-wrap {
                padding: 10px 0 10px 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                &-left {
                    display: flex;
                    align-items: center;
                    width: calc(66%);
                }

                &-image {
                    position: relative;
                    margin-right: 10px;

                    &-show {
                        display: block;
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                    }
                }

                &-name {
                    font-family: PingFangSC-Regular;
                    font-size: 16px;
                    color: #1f1f1f;
                    letter-spacing: 0;
                    line-height: 25px;
                }

                &-tips {
                    width: calc(79%);
                    font-family: PingFangSC-Regular;
                    font-size: 12px;
                    color: #fff;
                    letter-spacing: 0;
                }

                &-btn {
                    width: 55px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    font-family: PingFangSC-Medium;
                    font-size: 13px;
                    margin-right: 34px;
                    color: #fff;
                    background: #00c8c8;
                    border-radius: 10px;
                }

                &-close {
                    position: absolute;
                    font-size: 10px;
                    right: 12px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #525252;
                }
            }
        }
    }
}
</style>
