<template>
  <view class="min-h-full flex flex-col">
    <!-- <view>
      <u-line></u-line>
      <view class="h-120rpx flex justify-between items-center px-20rpx">
        <view>
          <text class="text-32rpx">2020年3月</text>
          <u-icon name="arrow-down" class="ml-15rpx"></u-icon>
        </view>
        <view class="text-hex-b7b7b7 text-26rpx">
          <text>增加1000积分</text>
          <text class="ml-20rpx">减少1000积分</text>
        </view>
      </view>
      <u-line></u-line>
    </view> -->
    <view class="flex-1 overflow-hidden relative">
      <view class="absolute left-0 w-full top-0 h-full">
        <scroll-view scroll-y class="h-full">
          <view class="h-20rpx"></view>
          <mescroll-body

            :height="height"
            ref="mescrollRef"
            @init="mescrollInit"
            @down="downCallback"
            @up="upCallback"
            :down="downOption"
            :up="upOption"
          >
            <view class="bg-white p-20rpx mb-10rpx" v-for="item in dataList" :key="item">
              <view class="flex justify-between text-32rpx">
                <view>{{item.desc}}</view>
                <view class="text-hex-cb9e7a">{{item.points}}积分</view>
              </view>
              <view class="mt-20rpx text-28rpx text-hex-a3a3a3">{{item.created_at}}</view>
            </view>
          </mescroll-body>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      dataList: [],
      downOption: {
        auto: false,
      },
      upOption: {
        page: {
          size: 20,
        },
        noMoreSize: 1,
      },
    };
  },
  computed: {
    height() {
      const { windowHeight, statusBarHeight } = this.$u.sys();
      return windowHeight - statusBarHeight - 44 + 'px';
    },
  },
  methods: {
    downCallback() {
      this.dataList = [];
      this.mescroll.resetUpScroll();
    },
    async upCallback(page) {
      this.loadData(page);
    },
    async loadData(page) {
      let obj = {
        page: page.num,
        per_page: page.size,
      };
      await this.$api.get('/v1/points/points-logs', {
          params: obj,
        }).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>
page {
  height: 100%;
}
</style>
<style lang="scss" scoped></style>
