<template>
    <navigate
        :url="disable ? '' : url"
        :extra="{
            act: 'trolleysClick',
            module: logkey,
        }"
        @tap="trolleysTap"
    >
        <view
            :class="{
                'disable': disable,
            }"
        >
            <view v-if="type === 'single'" class="trolleys">
                <view class="inner">
                    <view
                        v-if="number"
                        class="num"
                    >
                        {{ number }}
                    </view>
                    <view class="m-icon m-icon-trolleys"/>
                </view>
                <view
                    class="trolleys__msg"
                >
                    <view
                        :class="{
                            'trolleys__msg__inner--shrink': !msgPost,
                        }"
                        class="trolleys__msg__inner c-color c-line-clamp1 c-font-13"
                    >
                        <rich-text :nodes="msgPost"/>
                    </view>
                </view>
            </view>
            <view
                v-else
                class="item-trolleys c-color-title"
                :class="{horizontal: type === 'horizontal'}"
            >
                <view class="icon m-icon m-icon-gouwuche c-color-title">
                    <view v-if="number" class="red-dot">
                        <text class="dot-text">{{ number }}</text>
                    </view>
                </view>
                <view class="text c-color-title" :class="{'horizontal-text': type === 'horizontal'}">购物车</view>
            </view>
        </view>
        <view
            v-show="showGoods"
            :style="showAnm && anmStyle"
            :class="{
                added: showAnm,
                horizontal: type === 'horizontal',
            }"
            class="goodsadd"
        >
            <image
                class="goodsadd-img"
                :src="goodsImg"
            />
        </view>
    </navigate>
</template>

<script>
/**
 * @file 购物车样式组件
 * @author zhangeryi@baidu.com
 * @categories 展示类型
 * @tags
 */

import Navigate from '../common/navigate';
export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        // 跳转链接
        url: {
            type: String
        },
        // 购物车数量
        num: {
            'type': [String, Number],
            'default': 0
        },
        // 购物车提示
        msgPost: {
            'type': String
        },
        // 不可用
        disable: {
            type: [Boolean, Number]
        },
        // 打点key
        logkey: {
            type: String
        },
        // 购物车样式
        // single 背景红色样式
        // item  底部item项上下样式
        type: {
            'type': String,
            'default': 'single'
        },
        // 动画商品图
        goodsImg: {
            type: String
        },
        // 动画样式
        anmStyle: {
            type: Object
        }
    },
    components: {
        Navigate
    },
    data() {
        return {
            showGoods: false,
            showAnm: false
        };
    },
    computed: {
        number() {
            // 购物车显示数量
            return +this.num > 99 ? '99+' : +this.num;
        }
    },
    watch: {
        num(newVal, oldVal) {
            if (newVal - oldVal === 1 && this.goodsImg) {
                this.showGoods = true;
                this.showAnm = false;
                setTimeout(() => {
                    this.showAnm = true;
                    setTimeout(() => {
                        this.showAnm = false;
                        this.showGoods = false;
                    }, 500);
                }, 20);
            }
        }
    },
    methods: {
        trolleysTap() {
            // 购物车点击
            this.$emit('trolleysTap');
        }
    }
};
</script>
<style lang="less" scoped>
.disable {
    .trolleys {
        background: #C2C2C2;
        box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .4);
        .inner {
            position: relative;
            .num {
                background: #C2C2C2;
            }
        }
    }
    .item-trolleys {
        .red-dot {
            background-color: #C2C2C2;
        }
    }
}
.trolleys {
    position: relative;
    .inner {
        width: .4rem;
        height: .4rem;
        position: absolute;
        right: 0;
        z-index: 1;
        border-radius: 100%;
        background: #fd503e;
        box-shadow: 0 3px 10px 0 rgba(255, 112, 97, .4);
        text-align: center;
        line-height: .4rem;
        .num {
            position: absolute;
            right: 0;
            top: -2px;
            background: #fd503e;
            border: 1px solid #fff;
            font-size: 12px;
            line-height: 16px;
            height: 16px;
            min-width: 16px;
            padding: 0 3px;
            border-radius: 16px;
            color: #fff;
            box-sizing: border-box;
            transform: scale(.933333333);
        }
        .m-icon-trolleys {
            font-size: 18px;
            color: #fff;
        }
    }
    &__msg {
        height: .4rem;
        border-radius: .4rem;
        overflow: hidden;
        &__inner {
            transform: translateY(0);
            background: #FFF4F3;
            border: 1px solid #fd503e;
            border-radius: 100px;
            padding: 0 .4rem 0 .1rem;
            height: .29rem;
            line-height: .29rem;
            transition: .5s ease-in-out;
            box-sizing: border-box;
            margin-top: .055rem;
            margin-right: .1rem;
            &--shrink {
                transform: translateX(100%);
            }
        }
        
    }
}
.item-trolleys {
    color: #555;
    position: relative;
    .icon {
        text-align: center;
        font-size: .2rem;
    }
    .text {
        font-size: .12rem;
        line-height: .14rem;
        white-space: nowrap;
        margin-top: 2px;
    }
    .text.horizontal-text {
        font-size: .16rem;
        margin-left: .13rem;
        position: relative;
        top: -.02rem;
    }
    .red-dot {
        padding: 0 5px;
        height: .16rem;
        border-radius: .16rem;
        background-color: #fd503e;
        color: #fff;
        line-height: .16rem;
        text-align: center;
        position: absolute;
        top: -4px;
        left: 20px;
        min-width: 16px;
        box-sizing: border-box;
    }
    .dot-text {
        font-size: 12px;
        transform: scale(.93);
        display: block;
    }
}
.horizontal {
    .icon {
        display: inline-block;
    }
    .text {
        display: inline-block;
        margin-left: .06rem;
    }
    .red-dot {
        left: 10px;
    }
}
.goodsadd {
    position: fixed;
    z-index: 99;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    right: 30%;
    bottom: 30%;
    opacity: 1;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 3px 20px rgba(0, 0, 0, .08);
    transition: .5s ease-in-out;
    &.added {
        right: 17px;
        bottom: 17px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        opacity: .0;
    }
    &-img {
        width: 100%;
        height: 100%;
    }
    &.horizontal.added {
        right: 30px!important;
        bottom: 200px!important;
    }
}
</style>


