<template>
  <view class=" text-30rpx font-extrabold">
     <loading-view v-if="isFirstLoading"></loading-view>
    <mescroll-body  ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
      :down="downOption" :up="upOption">
      <view class="grid grid-cols-2  gap-x-80rpx pt-20rpx px-80rpx">
        <view @click="$u.route('/pageB/select_product/index',{id:item.id})" class="flex items-center justify-center flex-col mt-40rpx"
          v-for="(item,index) in dataList" :key="index">
          <u-image class="flex-none" width="240" height="240" :src="item.image" :lazy-load="true">
          </u-image>
          <view class="mt-15rpx">{{item.title}}</view>
        </view>
      </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 {
        isFirstLoading:true,
        downOption: {},
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1
        },
        dataList: [], //获取到的数据
      };
    },
    onLoad() {
      setTimeout(()=>{
        this.isFirstLoading=false
      },300)
    },
    methods: {
      downCallback() {
        this.mescroll.resetUpScroll();
        this.dataList = []
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData(page) {
        this.$api.get(`/v1/store`, {
          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" scoped>
</style>
