<template>
  <view class="">
    <loading-view v-if="isFirstLoading"></loading-view>
    <view class="text-center text-42rpx pt-30rpx">线上预约店</view>
    <view class="my-20rpx px-80rpx" @tap="navigateToCategory">
      <image mode="widtFix" class="w-full h-250rpx rounded-15rpx" :src="image"></image>
    </view>
    <view class="my-20rpx px-80rpx">
      <u-line></u-line>
    </view>
    <view class="text-center text-42rpx">线下预约店</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', { mid: item.id })"
          class="flex items-center justify-center flex-col mt-40rpx text-30rpx font-extrabold"
          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 leading-40rpx">{{ 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: [], //获取到的数据
      image: '/static/images/user/u=2313295534,3451005153&fm=253&fmt=auto&app=138&f=JPEG.webp',
    };
  },
  onLoad() {
    setTimeout(() => {
      this.isFirstLoading = false;
    }, 300);
    this.$api.get(`/v1/ads`, { params: { keys: 'wechat_mini_store_online' }}).then(res => {
      let url = '/static/images/user/u=2313295534,3451005153&fm=253&fmt=auto&app=138&f=JPEG.webp'
      if (res && res.wechat_mini_store_online.length > 0) {
        url = res.wechat_mini_store_online[0].image
      }
      this.image = url
    })
  },
  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();
        });
    },
    navigateToCategory() {
      uni.setStorageSync('store_order_pre', 1)
      uni.switchTab({
        url: '/pages/sort/index'
      })
    },
  },
};
</script>

<style lang="scss" scoped></style>
