
<template>
    <div>
        <product-card 
        v-for="( item, index ) in data" 
        :key="index"
        @buyer-click="aa"
        @cart-add="onAdd" 
        @cart-reduce="reduceCart"
        :vendor="item.vesName"
        :cover="item.adUrl"
        :video="item.videoUrl"
        :totle="item.limitQty"
        :title="item.prName"
        :follows="item.follows"
        :saled="item.saleQty"
        :productKey="`${ item.acId }-${ item.prId }`"
        :marketPrice="item.marketAmt"
        :price="item.saleAmt"
        :limit="item.ulimitQty"
        :status="item.status"
        :buyer="item.consumers"
        :cartCount="item.cartCount"
        :type="item.type"
        :preSaleDate="item.preSaleDate"
        :pickUpDate="item.pickUpDate"
        :brandBtnText="item.brandBtnText"
    />
    </div>
</template>

<script>
import productCard from './index'
import mock from './mock.json';
export default {
    name: "product-card-demo",
    data() {
        return {
            type: 'primary',
            data: mock.data.products
        }
    },
    components: {
        productCard
    },
    methods: {
        aa( a, b ) {
            console.log( a, b, mock.data.products[0].adUrl );
        },
        onAdd(key,data) {
            let _data = this.data;
            _data.forEach( ( i ) => {
                let a = `${ i.acId }-${ i.prId }`;
                if ( a === data.productKey ) {
                    console.log( data );
                    i.cartCount = i.cartCount + 1;
                }
                // return i;
            } );
            this.data = _data;
        },
        reduceCart(key,data) {
            let _data = this.data;
            _data.forEach( ( i ) => {
                let a = `${ i.acId }-${ i.prId }`;
                if ( a === data.productKey ) {
                    console.log( data );
                    i.cartCount = i.cartCount - 1;
                }
                // return i;
            } );
            this.data = _data;
        }
    }
}
</script>
<style>
    .page {
        background: #ccc;
    }
    .content {
        padding: 0 !important;
    }
</style>