<template>
    <div class="shopping-bag" @click="goCart">
        <div class="background"></div>
        <div class="bag"></div>
        <span v-if="product.cartCount > 0" class="number" :class="{over: product.cartCount > 99}">
            {{product.cartCount > 99 ? '99+' : product.cartCount}}
        </span>
    </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
    name: 'ShoppingBag',
    computed: {
        ...mapState(['product'])
    },
    methods: {
        goCart() {
            if (this.$yoho.isLogin()) {
                this.$yoho.goShopingCart();
            } else {
                this.$yoho.goLogin('', () => {
                    this.$yoho.goShopingCart();
                });
            }
        }
    }
};
</script>
<style lang="scss">
.shopping-bag {
    position: fixed;
    bottom: 160px;
    left: 30px;
    text-align: center;

    .background {
        width: 108px;
        height: 108px;
        opacity: .3;
        border-radius: 50%;
        background-color: #000;
    }

    .bag {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 48px;
        height: 48px;
        margin-left: -24px;
        margin-top: -26px;
        background: url("~img/product/shopping-bag.png");
        background-size: contain;
    }

    .number {
        position: absolute;
        width: 36px;
        height: 36px;
        top: 0;
        right: 0;
        color: #fff;
        font-size: 20px;
        line-height: 36px;
        text-align: center;
        border-radius: 50%;
        background-color: #d0021b;

        &.over {
            font-size: 14px;
        }
    }
}
</style>