<template>
    <div class="goods-box" v-infinite-scroll="fetch" infinite-scroll-disable="disableFetch" :infinite-scroll-distance="1200">
        <ul class="cardlist card-large clearfix">
            <li class="card" v-for="(item, index) in data" :key="item.product_skn" @click="clickProduct(item, index)">
                <div class="card-pic">
                    <a v-good-href="item">
                        <img v-img-src="{src: item.default_images, width: 330, height: 440}" :alt="item.product_name">
                    </a>
                </div>
                <div class="card-bd">
                    <h2 class="card-label">
                        <a v-good-href="item" class="line-clamp-1">{{item.product_name}}</a>
                    </h2>
                    <h2 class="card-label-desc" v-if="item.product_name1">
                        <a v-good-href="item" class="line-clamp-1">{{item.product_name}}</a>
                    </h2>
                    <span class="good-price" :class="{'sale-price': item.market_price}">¥{{item.sales_price | toFixed}}</span>
                    <span class="good-price" :class="{'old-price': item.market_price}" v-if="item.market_price">¥{{item.market_price | toFixed}}</span>
                </div>
            </li>
        </ul>
        <p class="cardlist--loading text-center" v-show="state === 1">loading...</p>
        <!--<p class="cardlist--end text-center" v-show="state === 0 ">--End--</p>-->

        <div class="empty-tip" v-show="state === -1">
            <i class="icon icon-search"></i>
            <p class="empty-tip-cn">未找到相关商品</p>
            <p class="empty-tip-en">Did not find the relevant goods</p>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import lazyload from 'vue-lazyload';
    import infinitScroll from 'vue-infinite-scroll';
    import bus from 'common/vue-bus';

    Vue.use(lazyload, { preLoad: 3 });
    Vue.use(infinitScroll);


    export default {
        props: {
            /* 开启滚动加载 */
            disableFetch: Boolean,

            // 数据
            data: Array,
            state: [Number, Object]   // -1: 无数据 0: 全部加载完  1: 正在加载
        },
        computed: {
            // 空列表: data.length === 0
            whenEmpty() {
                return !this.data.length;
            }
        },
        methods: {
            fetch: function() {
                bus.$emit('list.paging');
            },
            clickProduct(item, index) {
                this.$emit('click-product', item, index);
            }
        }
    };

</script>
<style>
    @import "../../../scss/common/_color.css";

    .cardlist {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cardlist--loading {
        font-size: 32px;
        text-align: center;
        padding: 16px 0;
    }

    .card-large {
        background-color: #fff;

        .card {
            float: left;
            width: 330px;
            margin: 0 30px;

            &:nth-child(2n) {
                margin: 0;
            }
        }

        .card-pic {
            width: 330px;
            height: 440px;

            a,
            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        .card-bd {
            min-height: 180px;
            padding-top: 40px;
            font-size: 0;
            font-family: "BrownStd", "PingFang SC", Helvetica, Roboto, "Heiti SC", "\9ED1\4F53", Arial;
        }

        .card-label {
            margin: 0 0 30px;
            font-size: 24px;
            line-height: 1.4;
            font-weight: normal;
        }

        .card-label-desc {
            margin: 0 0 14px;
            font-size: 20px;
            line-height: 1.4;
            height: 67.1999999999px;
            font-weight: normal;

            a {
                color: #888;
            }
        }
    }

    .good-price {
        color: #b0b0b0;
        margin-right: 14px;
        font-size: 24px;

        &:last-of-type {
            margin-right: 0;
        }

        &.old-price {
            font-size: 18px;
            color: #b0b0b0;
            text-decoration: line-through;
        }

        &.sale-price {
            color: #000;
        }
    }

    .empty-tip {
        margin-top: 200px;
        color: #b0b0b0;
        text-align: center;

        .icon-search {
            display: inline-block;
            font-size: 200px;
            margin-bottom: 56px;
        }
    }

    .empty-tip-cn {
        font-size: 34px;
        margin-bottom: 30px;
    }

    .empty-tip-en {
        font-size: 20px;
    }

</style>