<template>
    <resource class="no-padding-right">
        <ul class="resource-tf-goods">
            <li class="product-item" v-for="(item, pi) in value.data.list" :key="pi">
                <product-link :value="item" class="link" :yas="value" :yas-f="index" :yas-i="pi"></product-link>
                <img-format :lazy="lazy" :src="item.default_images" :w="188" :h="250"></img-format>
                <div class="ellipsis">
                    <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: 'ResourceTfGoodsList',
    props: {
        value: Object,
        lazy: Boolean,
        index: Number
    },
    computed: {
    },
    components: {Resource}
};
</script>

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

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

        .link {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

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

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

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