<template>
    <div class="shopping-bag" @click="yoho.goShopingCart()">
        <div class="background"></div>
        <div class="bag"></div>
        <span v-if="cartCount > 0" class="number" :class="{over: cartCount > 99}">
            {{cartCount > 99 ? '99+' : cartCount}}
        </span>
    </div>
</template>
<style>
    .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: resolve("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>
<script>
    const yoho = require('yoho');
    const tip = require('common/tip');

    module.exports = {
        name: 'shopping-bag',
        props: {
            cartCount: [Number, String]
        },
        data() {
            return {
                yoho: yoho
            };
        }
    };
</script>