<template>
    <view class="goods-list">
        <tui-skeleton v-if="isRequest" :loadingType="3" :isLoading="true"></tui-skeleton>
        <view class="sticky-top">
            <!-- 搜索框 -->
            <cm-simple-search @search="onSearch" @cancel="onCancel" v-model="keyword"></cm-simple-search>
            <!-- 筛选 -->
            <goods-filter @filter="onFilter"></goods-filter>
        </view>
        <!-- 商品列表 -->
        <view class="product-list">
            <view class="product-item" v-for="(item,index) in productList" :key="index">
                <cm-product :data="item"></cm-product>
            </view>
            <view class="product-item" v-for="i in emptyList" :key="i"></view>
        </view>
        <!-- 回到顶部 -->
        <tui-scroll-top :scrollTop="scrollTop" :bottom="30" :duration="600"></tui-scroll-top>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isRequest: true,
            scrollTop: 0,
            keyword: '1212',
            product: {
                activeStatus: 0,
                clubTaxPoint: 10,
                collageProduct: null,
                collageStatus: 0,
                couponsLogo: true,
                includedTax: '1',
                invoiceType: '2',
                mainImage: 'https://img-b.caimei365.com/group1/M00/03/20/Cmgy62BHH8aAFiGIAAGHr5DovGA124.jpg',
                name: '【测试用】Dermaheal HSR 德玛莉肌活丝蕴凝颜精华液',
                normalPrice: null,
                price: 2,
                productId: 6419,
                recommend: '0',
                unit: '片'
            }
        }
    },

    computed: {
        productList() {
            let list = []
            for (let i = 0; i < 20; i++) {
                list.push(this.product)
            }
            console.log(list)
            return list
        },
        emptyList() {
            let count = this.productList.length
            const len = 3 - (count % 3)
            if (len < 3) {
                return len
            } else {
                return 0
            }
        }
    },
    watch: {
        keyword(nval) {
            console.log(nval)
        }
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop
    },
    methods: {
        onSearch() {},
        onCancel() {},
        onFilter(e) {
            console.log(e)
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-list {
    box-sizing: border-box;
    min-height: 100vh;
    .product-list {
        @extend .cm-flex-between;
        flex-wrap: wrap;
        padding: 8rpx 24rpx;
        .product-item {
            width: 224rpx;
            padding: 8rpx 0;
        }
    }
}
</style>
