<template>
  <view class="min-h-full flex flex-col">
    <view class="h-358rpx bg-gradient-to-t to-hex-fff4e5 from-hex-ffd4b2">
      <view class="text-center text-48rpx pt-80rpx font-medium">积分兑换</view>
      <view class="text-center mt-50rpx text-28rpx">我的积分：{{points}} 积分</view>
      <view class="flex justify-around mt-70rpx">
        <!-- <view class="bg-white rounded-full text-hex-fe9b35 h-48rpx leading-48rpx px-46rpx">我的兑换</view> -->
        <view class="bg-white rounded-full text-hex-fe9b35 h-48rpx leading-48rpx px-46rpx" @click="$u.route('/pages/points/record')">积分明细</view>
      </view>
    </view>
    <!-- <view class="mt-10rpx bg-white py-20rpx">
      <view class="flex">
        <view class="h-30rpx w-22rpx bg-hex-e0a272"></view>
        <view class="text-32rpx ml-14rpx">优惠券</view>
      </view>
      <scroll-view scroll-x class="w-full whitespace-nowrap mt-20rpx">
        <CouponComp v-for="item in 4" :key="item" @click="onLq"></CouponComp>
      </scroll-view>
    </view> -->

    <view class="mt-10rpx bg-white py-20rpx flex-1">
      <view class="flex">
        <view class="h-30rpx w-22rpx bg-hex-e0a272"></view>
        <view class="text-32rpx ml-14rpx">兑好礼</view>
      </view>
      <view class="mt-20rpx">
        <u-tabs :list="list" is-scroll :current="current" @change="change" active-color="#e0a272" height="60" bar-height="8"></u-tabs>
      </view>
      <view class="px-20rpx">
        <mescroll-body
          :height="height"
          :bottombar="false"
          ref="mescrollRef"
          @init="mescrollInit"
          @down="downCallback"
          @up="upCallback"
          :up="upOption"
        >
          <u-waterfall v-model="goodsList" ref="waterfall">
            <template v-slot:left="{ leftList }">
              <view v-for="(item, index) in leftList" :key="index" class="text-center my-20rpx">
                <PointsGoodsComp :data="item"></PointsGoodsComp>
              </view>
            </template>
            <template v-slot:right="{ rightList }">
              <view v-for="(item, index) in rightList" :key="index" class="text-center my-20rpx">
                <PointsGoodsComp :data="item"></PointsGoodsComp>
              </view>
            </template>
          </u-waterfall>
        </mescroll-body>
      </view>
    </view>
  </view>
</template>
<script>
import CouponComp from './components/coupon-comp.vue';
import PointsGoodsComp from './components/points-goods-comp.vue';
import { mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
  mixins:[MescrollMixin],
  components: {
    CouponComp,
    PointsGoodsComp,
  },
  data() {
    return {
      firstLoading: true,
      upOption: {
        auto: false,
      },
      list: [],
      current: 0,
      goodsList:[]
    };
  },
  watch:{
    goods:{
      immediate:true,
      deep:true,
      handler(e){
        this.goodsList = e.map(el=>el)
      }
    }
  },
  computed:{
    ...mapGetters(['user']),
    points(){
      return this.user?.points ?? 0
    },
    goods() {
      return this.list[this.current]?.goods ?? [];
    },
    height() {
      const { windowHeight, statusBarHeight } = this.$u.sys();
      return windowHeight - statusBarHeight - 296 + 'px';
    },
  },
  created(){
    this.$store.dispatch('user/getUserInfo')
  },
  methods: {
     async downCallback() {
       this.$refs.waterfall.clear();
      this.mescroll.resetUpScroll();
    },
    async upCallback(page) {
      if (this.firstLoading) {
        await this.getCategories();
      }
      this.getGoodsList(page);
      // this.firstLoading = false;
    },
    async getCategories(){
      const resData = await this.$api.get('/v1/points/categories')
      resData.unshift({
        icon: "",
        id: -999,
        name: "全部"
      })
      this.list = resData.map((e) => {
        return {
          ...e,
          num: 1,
          y: 0,
          curPageLen: 0,
          hasNext: true,
          goods: null,
        };
      });
    },
    async getGoodsList({ num, size }){
      let keyword = this.list[this.current].id;
      const resData = await this.$api.get('/v1/points/products', {
        params: {
          per_page: size,
          page: num,
          category: keyword == -999?'':keyword,
        },
      });
      const { data } = resData;
      let curTab = this.list[this.current];
      if (num === 1) curTab.goods = [];
      curTab.goods = curTab.goods.concat(data);
      curTab.num = num;
      curTab.curPageLen = data.length;
      curTab.hasNext = this.mescroll.optUp.hasNext;
      this.mescroll.endSuccess(data.length, size == data.length);
    },
    change(index) {
      if (!this.current) this.current = 0;
      this.$refs.waterfall.clear();
       this.$nextTick(() => {
          let preTab = this.list[this.current];
          preTab.y = this.mescroll.getScrollTop();
          this.current = index;
          const curTab = this.list[index];
          if (!curTab.goods) {
            this.mescroll.resetUpScroll();
          } else {
            this.mescroll.setPageNum(curTab.num + 1);
            this.mescroll.endSuccess(curTab.curPageLen, curTab.hasNext);
            this.$nextTick(() => {
              this.mescroll.scrollTo(curTab.y, 0);
            });
          }
       })
    },
    onLq() {
      console.log('====');
    },
  },
};
</script>
<style>
page{
  height: 100%;
}
</style>
