<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 in data">
                <div class="card-pic">
                    <a href="{{item | goodsUrl}}">
                        <img v-bind:src="item.defaultImages | resize 372 499" alt="{{item.productName}}">
                    </a>
                </div>
                <div class="card-bd">
                    <h2 class="card-label">
                        <a href="{{item | goodsUrl}}" class="line-clamp-2">{{item.productName}}</a>
                    </h2>
                    <span class="good-price" :class="{'old-price': item.marketPrice}" v-if="item.marketPrice">¥ {{item.marketPrice | toFixed}}</span>
                    <span class="good-price" :class="{'sale-price': item.marketPrice}">¥ {{item.salesPrice | toFixed}}</span>
                </div>
            </li>
        </ul>
        <p class="cardlist--loading text-center" v-show="state === 1">正在加载...</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>
    const Vue = require('vue');
    const lazyload = require('vue-lazyload');
    const infinitScroll = require('vue-infinite-scroll');

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

    let bus = require('common/vue-bus');

    module.exports = {
        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');
            }
        }
    };

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

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

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

        .card {
            float: left;
            width: 374px;
            margin-right: 2px;

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

        .card-pic {
            width: 100%;
            height: 499px;

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

        .card-bd {
            min-height: 180px;
            margin-left: 30px;
            margin-right: 30px;
            padding-top: 26px;
            text-align: center;
            font-size: 0;
        }

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

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

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

        &.old-price {
            text-decoration: line-through;
        }

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

    .empty-tip {
        margin-top: 380px;
        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>