<template>
  <view>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
      :up="upOption">
      <view class="px-rowSm mt-20rpx">
        <u-waterfall v-model="dataList" ref="uWaterfall">
          <template v-slot:left="{ leftList }">
            <view v-for="(item, index) in leftList" :key="index" class="px-rowSm mb-base">
              <goods-item :goods="item.sku" :isCollection="true"></goods-item>
            </view>
          </template>
          <template v-slot:right="{ rightList }">
            <view v-for="(item, index) in rightList" :key="index" class="px-rowSm mb-base">
              <goods-item :goods="item.sku" :isCollection="true"></goods-item>
            </view>
          </template>
        </u-waterfall>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        downOption: {
          auto: false,
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1,
        },
        dataList: [], //获取到的数据
      };
    },
    methods: {
      downCallback() {
        this.$refs.uWaterfall.clear();
        this.mescroll.resetUpScroll();
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData(page) {
        this.$api.get(`/v1/product/favorites`, {
          params: {
            page: page.num,
            per_page: page.size
          }
        }).then(res => {
          this.mescroll.endSuccess(res.data.length)
          if (page.num == 1) this.dataList = [];
          this.dataList = this.dataList.concat(res.data);
        }).catch(err => {
          this.mescroll.endErr()
        })
      },
    }
  }
</script>

<style lang="scss">

</style>
