<template>
    <div :class="classes()">
        <h-swipe-cell :rightWidth="65">
            <div :class="classes('content')">
                <div class="info" v-if="info">
                    <h-icon type="canico" size="32rpx" color="#FF6600" />
                    <span class="info-text">{{info}}</span>
                </div>
                
                <div :class="classes('product-content')">
                    <div :class="classes('checked-radio', { checked, disabled })" @click="onCheck">
                        <h-icon v-if="checked" type="success" size="10" color="#fff" />
                    </div>
                    <!--商品封面图-->
                    <div class="cover-box" @click="onTap">
                        <h-image v-if="cover" :src="cover" mode="cover" />
                        <h-image v-if="tag" :src="tag" class="tag" mode="cover"/>
                        <div class="vendor" v-if="vendor">{{vendor}}</div>
                        <!--已售完/库存不足/已结束/已下架-->
                        <div :class="['cover-mask', status ]"></div>
                    </div>
                    <div class="base-info">
                        <div class="title">{{title}}</div>
                        <div class="sub-title">
                            <slot>{{subTitle}}</slot>
                        </div>
                        <div class="price-and-buy">
                            <div class="price">
                                <span class="big">{{price}}</span><span class="small" v-if="marketPrice">{{marketPrice}}</span>
                            </div>
                            <div class="cart-button">
                                <!--购物车按钮封面-->
                                <div class="button-cover waiting" v-if="status==='waiting'">{{statusText}}</div>
                                <div class="button-cover soldout" v-if="status==='soldout'">抢光了</div>
                                <!--购物车数量控制-->
                                <h-counter 
                                    size="small"
                                    v-if="cartCount>0 && status!=='soldout' && status!=='waiting'"
                                    :value="cartCount"
                                    :disableInput="false"
                                    :asyncChange="true"
                                    :min="1"
                                    :max="maxCartCount"
                                    @plus="onAdd"
                                    @minus="onReduce"
                                    @input="onChange"
                                    @focus="onFocus"
                                    @blur="onBlur"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="right" class="swipe-cell-right" @click="onSwipeRight">
                <div class="swipe-cell-text">
                    <span>{{swipeRightText}}</span>
                </div>
            </div>
        </h-swipe-cell>
    </div>
</template>
<script>
import hSwipeCell from '../swipe-cell/index.vue';
import hIcon from '../icon/index.vue';
import hImage from '../image/index.vue';
import hCounter from '../counter/index.vue';
import { classesMixin } from '../../common/mixins/classname';
let classMixin = classesMixin('shop-car-card');
export default {
    name: 'h-shop-car-card',
    mixins: [ classMixin ],
    components: {
        hSwipeCell,
        hIcon,
        hImage,
        hCounter
    },
    props: {
        info: String,
        title: String,
        subTitle: String,
        cover: String,
        tag: String,
        vendor: String,
        price: Number,
        marketPrice: Number,
        statusText: String,
        productKey: String,
        asyncChange: Boolean,
        swipeRightText: {
            type: String,
            default: '删除'
        },
        checked: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        status: {
            type: String,
            default: 'active' // active soldout lack over
        },
        cartCount: {
            type: Number,
            default: 0
        },
        maxCartCount:{
            type: Number,
            value: 99
        }
    },
    methods: {
        onSwipeRight() {
            const params = {};
            params.key = this.productKey;
            params.item = this.$props;
            this.$emit("swipeRight", params);
        },
        onCheck() {
            const params = {};
            params.key = this.productKey;
            params.item = this.$props;
            this.$emit("check", params );
        },
        onTap() {
            const params = {};
            params.key = this.productKey;
            params.item = this.$props;
            this.$emit("onTap", params);
        },
        onAdd( val ) {
            const params = {};
            params.key = this.productKey;
            params.item = this.$props;
            this.$emit("add", params);
        },
        onReduce( val ) {
            const params = {};
            params.key = this.productKey;
            params.item = this.$props;
            this.$emit("reduce", params);
        },
        onChange( val ) {
            let changeVal = val;
            if (!changeVal || changeVal <= 1) {
                changeVal = 1
            } else if (changeVal > this.maxCartCount) {
                changeVal = this.maxCartCount;
            } else {
                changeVal = parseInt(changeVal);
            }
            this.$emit("change", {val: changeVal, key: this.productKey, item: this.$props});
        },
        onFocus(e) {
            const params = {};
            params.key = this.productKey;
            params.item = this.$props;
            this.$emit("focus", params);
        },
        onBlur(e) {
            const params = {};
            params.key = this.productKey;
            params.item = this.$props;

            let changeVal = e.target.value;
            params.val =changeVal;
            this.$emit("blur", params);
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>