<template>
    <resource class="no-padding-right">
        <ul class="resource-products">
            <li class="product-item" v-for="(item, index) in value.data.list" :key="index">
                <img-format :lazy="lazy" :src="item.default_images" :w="94" :h="125"></img-format>
                <div class="ellipsis">
                    <p class="brand" v-if="item.brand_name">{{item.brand_name}}</p>
                    <p class="title" v-if="item.product_name">{{item.product_name}}</p>
                    <p class="price" v-if="item.sales_price">￥{{item.sales_price}}</p>
                </div>
            </li>
        </ul>
    </resource>
</template>

<script>
import Resource from './resource';

export default {
    name: 'ResourceProductList',
    props: {
        value: Object,
        lazy: Boolean,
        index: Number
    },
    computed: {
    },
    components: {Resource}
};
</script>

<style lang="scss">
.resource-products {
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;

    li.product-item {
        display: inline-block;
        padding-right: 20px;
        text-align: center;
        line-height: 40px;

        img {
            width: 188px;
            height: 250px;
        }

        .ellipsis>p {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: 24px;
            max-width: 188px;
            font-family: HelveticaNeue , Tahoma, Arial, HiraginoSansGB-W3, "PingFang SC", "Heiti SC";

            &.price {
                font-size: 28px;
            }
        }
    }
}
</style>