<template>
  <view>
    <!-- tabs -->
    <view
      class="fixed shadow-down  left-0 right-0 z-8 bg-white flex items-center justify-between px-57rpx py-rowLg text-lg text-txGray">
      <view @tap="handType('unuse')" :class="status=='unuse'?'text-primary':''">未使用</view>
      <view class="w-2rpx h-30rpx bg-txGray"></view>
      <view @tap="handType('used')" :class="status=='used'?'text-primary':''">已使用</view>
      <view class="w-2rpx h-30rpx bg-txGray"></view>
      <view @tap="handType('expired')" :class="status=='expired'?'text-primary':''">已过期</view>
    </view>
    <!-- 列表 -->
    <mescroll-body top="105" :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
      @up="upCallback" :down="downOption" :up="upOption">
      <!-- 未使用 -->
      <block v-if="status=='unuse'">
        <coupon-list :list="dataList" :checkout="false"></coupon-list>
      </block>
      <!-- 过期 已使用 -->
      <block v-else>
        <coupon-list disable :list="dataList" :checkout="false"></coupon-list>
      </block>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        status: 'unuse', //状态: unuse 未使用, used 已使用, expired 已过期
        downOption: {
          auto: false,
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1
        },
        dataList: [], //获取到的数据
      };
    },
    computed: {
      height() {
        const {
          windowHeight,
          statusBarHeight
        } = this.$u.sys();
        return windowHeight - statusBarHeight - 44 + 'px';
      },
    },
    methods: {
      downCallback() {
        this.mescroll.resetUpScroll();
        this.dataList = []
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData({
        num,
        size
      }) {
        let obj = {
          status: this.status,
          page: num,
          per_page: size
        }
        this.$api.get(`/v1/coupons`, {
          params: obj
        }).then(res => {
          this.mescroll.endSuccess(res.data.length)
          if (num == 1) this.dataList = [];
          this.dataList = this.dataList.concat(res.data);
        }).catch(err => {
          this.mescroll.endErr()
        })
      },
      handType(val) {
        this.status = val
        this.downCallback()
      },
    }
  }
</script>

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