<template>
    <div class="goods-box" v-infinite-scroll="fetch()" infinite-scroll-disable="disableFetch">
        <ul class="cardlist card-large clearfix">
            <li class="card" v-for="item in data">
                <div class="card-pic">
                    <a href="{{item | goodsUrl}}">
                        <img v-lazy="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="inLoading">正在加载...</p>
        <p class="cardlist--end text-center" v-show="atEnd ">--End--</p>
        
        <div class="empty-tip" v-show="empty">
            <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);
    Vue.use(infinitScroll);

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

    module.exports = {
        props: {
            /* 开启滚动加载 */
            disableFetch: Boolean,

            // 数据
            data: Array,
            empty: Boolean
        },
        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 {
        .card {
            float: left;
            width: 372px;
            margin-right: 6px;

            &: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: 25px;
            text-align: center;
            font-size: 24px;
        }

        .card-label {
            margin: 0 0 10px;
            font-size: 24px;
            height: 65px;
            font-weight: normal;
        }
    }

    .good-price {
        color: #b0b0b0;
        margin-right: 10px;
        &: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>