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

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

export default {
    name: 'ResourceProductList',
    props: {
        value: Array
    },
    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 {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: 28px;
            max-width: 188px;
        }
    }
}
</style>