<template>
    <view class="sidebar">
        <!-- 直播浮层 -->
        <view
            v-if="otherFab && otherFab.url"
            class="sidebar__item-live"
        >
            <image
                class="sidebar__item-live__img"
                :src="otherFab.img"
                @tap="onItemTab(otherFab)"
            />
        </view>
        <view
            v-for="(item, index) in data"
            :key="index"
            class="sidebar__item"
            @tap="onItemTab(item)"
        >
            <login-btn
                :disabled="!item.isNeedLogin || isLogin"
                @onLoginSuccess="onLoginSuccess"
                @onTapEnd="onLoginBtnTapEnd"
            >
                <view>
                    <text v-if="item.icon" :class="['sidebar__item__icon', 'm-icon', item.icon]"/>
                </view>
            </login-btn>
            <text v-if="cartNum && item.type === 'cart'" class="sidebar__item__num img-bg">{{ cartNum }}</text>
        </view>
        <!-- 返回顶部 -->
        <view
            v-if="enableToTop && showToTop"
            class="sidebar__item sidebar__item-totop"
            @tap="onItemTab({type: 'toTop'})"
        >
            <text :class="['sidebar__item__icon', 'm-icon', 'm-icon-huidingbu-icon']"/>
        </view>
        <!-- 分享好友弹层 -->
        <share-img
            v-if="showShareImg"
            :hide-swan-top-close="false"
            :src="shareData.h5ShareImg"
            @close="onShareModal('close')"
        />
    </view>
</template>

<script>
import {ubcSend} from '@utils/log';
import LoginBtn from '@components/common/login-btn';
import ShareImg from '@commonComponents/share-img';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import * as login from '@utils/login';
import {navigate} from '@utils/navigate';
import * as TrolleysUtil from '@utils/newTrolleys';
/**
 * @file 主会场侧边栏
 * @author mayifan02
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        LoginBtn,
        ShareImg
    },
    data() {
        const sys = getSystemInfo();
        const screenHeight = sys.screenHeight;
        return {
            screenHeight,
            showShareImg: false,
            showToTop: false,
            num: 0
        };
    },
    props: {
        /**
         * 数据
         */
        data: {
            type: Array,
            default: () => {
                return [
                    {
                        type: 'share',
                        icon: 'm-icon-share'
                    },
                    {
                        type: 'cart',
                        icon: 'm-icon-gouwuche',
                        unifiUrl: '/pages/gy/medstorecart/index',
                        isNeedLogin: true
                    }
                ];
            }
        },
        /**
         * 返回顶部
         */
        enableToTop: {
            type: Boolean,
            default: true
        },
        /** 其他浮层 */
        otherFab: {
            type: Object,
            default: null
        },
        /**
         * 滚动距离
         */
        pageScroll: {
            type: Number,
            default: 0
        },
        /**
         * 登陆状态
         */
        isLogin: {
            type: Boolean,
            default: false
        },
        /**
         * 购物车数量请求地址
         */
        getCartNumApi: {
            type: String,
            default: ''
        },
        /**
         * 分享数据
         */
        shareData: {
            type: Object,
            default: () => {
                return {
                    h5ShareImg: 'https://medactivity.cdn.bcebos.com/new-user/share3.jpg',
                    title: '来就送！885元健康新人礼！',
                    shareUrl: 'https://m.baidu.com/bh/m/jump?path=/pages/act/new-user/index?sf_ref=share',
                    content: '限时发福利，每人限领一份！',
                    imageUrl: 'https://expertimg.bj.bcebos.com/expertcms%2Fmed%2Fallhealth%2Fbd_health_logo.png'
                };
            }
        },

        /**
         * 日志value前缀
         */
        logPrefix: {
            type: String,
            default: '618_prima'
        },
        // ubc日志必传字段page
        page: {
            type: String,
            default: ''
        }
    },
    watch: {
        // 页面滚动距离
        pageScroll(nval, oval) {
            if (nval) {
                if (this.enableToTop) {
                    this.showToTop = nval >= this.screenHeight;
                }
            }
        },
        getCartNumApi(nval, oval) {
            this.getCartNum();
        }
    },
    created() {
        // 获取购物车数量
        this.getCartNum();
    },
    pageLifetimes: {
        show() {
            this.getCartNum();
        }
    },
    computed: {
        cartNum() {
            // 购物车显示数量
            return +this.num > 99 ? '99+' : +this.num;
        }
    },
    methods: {
        onItemTab(btn) {
            const log = {
                page: this.page,
                type: 'clk',
                value: `${this.logPrefix}_sidebar_${btn.type}`,
                ext: {
                    pd: 'act'
                }
            };
            if (btn.unifiUrl || btn.url) {
                navigate({
                    url: btn.unifiUrl || btn.url,
                    urlType: btn.urlType || 0,
                    log
                });
                return;
            } else if (btn.type === 'share') {
                this.onShareModal('open');
            } else if (btn.type === 'toTop') {
                this.$api.pageScrollTo({scrollTop: 0, duration: 200});
                setTimeout(() => {
                    this.showToTop = false;
                }, 200);
            }
            ubcSend(log);
        },
        // h5登陆
        onLoginBtnTapEnd() {
            if (process.env.MARS_ENV === 'h5') {
                login.toH5LoginPage();
            }
        },
        // 小程序登陆成功
        onLoginSuccess() {
            /**
             * 小程序登陆成功回调
             */
            this.$emit('onLoginSuccess');
        },
        // 分享弹窗
        onShareModal(type) {
            if (process.env.MARS_ENV === 'swan') {
                this.$api.openShare({
                    ...this.shareData,
                    success: res => {
                        this.$api.showToast({
                            title: '分享成功'
                        });
                    }
                });
                return;
            }
            if (type === 'open') {
                this.showShareImg = true;
            } else if (type === 'close') {
                this.showShareImg = false;
            }
        },
        // 添加购物车
        changeCartNum(num) {
            this.num = parseInt(num, 10) || 0;
        },
        // 获取购物车数量
        getCartNum() {
            if (!this.getCartNumApi) {
                return;
            }
            TrolleysUtil.asyncAddTrolleys({url: this.getCartNumApi}).then(({data}) => {
                this.num = +data.drugNum || 0;
            });
        }
    }
};
</script>
<style lang="less" scoped>
@keyframes breathe1 {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.img-bg {
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat;
}

.sidebar {
    position: fixed;
    right: 5px;
    bottom: 25%;
    z-index: 900;

    &__item {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: inset 0px 0.33px 11px 0px rgba(255, 170, 129, 0.28);
        margin-bottom: 3px;
        transition: All .16s cubic-bezier(.46, 0, 1, 1);

        &-totop {
            margin-top: 20px;
        }

        &-live {
            width: 44px;
            height: 19.32vw;
            position: relative;
            margin-bottom: 10px;

            &__img {
                position: absolute;
                right: 0;
                width: 19.32vw;
                height: 100%;
            }
        }

        &__icon {
            color: #ff534f;
            font-size: 19px;
        }

        &__num {
            position: absolute;
            right: 0;
            top: 0;
            text-align: center;
            width: 17.3px;
            height: 17.3px;
            line-height: 17.3px;
            color: #fff;
            font-size: 0.1rem;
            background-image: url(https://medactivity.cdn.bcebos.com/act618/main/main-cart-num-bg.png);
        }
    }
}
</style>
