<template>
  <div class="container">
    <van-tabs swipeable  :active="active">
      <van-tab title="未使用">
        <scroll-view scroll-y class="coupon-list-content">
          <div class="coupon-item" v-for="item in list1" :key="item.couponId">
            <v-coupon :options="item" :canUse="true" @use="useCoupon" />
          </div>
           <no-data name="暂无优惠卷" :options="list1"/>
        </scroll-view>

      </van-tab>
      <van-tab title="已使用">
        <scroll-view scroll-y class="coupon-list-content">
          <div class="coupon-item" v-for="item in list2" :key="item.couponId">
            <v-coupon :options="item" />
          </div>
          <no-data name="暂无优惠卷" :options="list2"/>
        </scroll-view>
      </van-tab>
      <van-tab title="已过期">
        <scroll-view scroll-y class="coupon-list-content">
          <div class="coupon-item" v-for="item in list0" :key="item.couponId">
            <v-coupon :options="item" :canUse="false" :status="false" />
          </div>
          <no-data name="暂无优惠卷" :options="list0"/>
        </scroll-view>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { getCouponList } from '@/api/coupon';
import Coupon from '@/components/Coupon';
import NoData from '@/components/NoData';
export default {
  components: { 'v-coupon': Coupon, 'no-data': NoData },
  name: 'couponList',

  data() {
    return {
      list1: [],
      list2: [],
      list0: [],
      active: 0
    };
  },
  methods: {
    useCoupon(item) {
      console.log(item,'coupon')
      if (item.bundleLimitList && item.bundleLimitList.length === 1) {
        wx.navigateTo({
          url: `/pages/bundleDetail/main?id=${item.bundleLimitList[0].bundId}&couponId=${item.couponId}&customerCouponId=${item.id}`
        });
      } else if (item.couponId + '' === '900009' || item.couponId + '' === '900015') {
        wx.reLaunch({ url: '/pages/bundle/main?tab=1' });
      } else {
        wx.reLaunch({ url: '/pages/bundle/main' });
      }
    }
  },
  onHide() {
    console.log('hide');
    this.active = 0;
  },
  onUnload() {
    console.log('unload');
    this.active = 0;
  },
  onShow() {
    wx.showLoading({
      mask: true,
      title: '加载中'
    });
    const _this = this;
    getCouponList({}).then(res => {
      // _this.couponList = res.data;
      if (res.status === '200') {
        // 未使用
        _this.list1 = res.data.filter(item => item.status === '1');
        // 已使用
        _this.list2 = res.data.filter(item => item.status === '2'||item.status === '3');
        console.log(_this.list2)
        // 已过期
        _this.list0 = res.data.filter(item => item.status === '0');
      } else {
        wx.showToast({
          title: res.message,
          icon: 'none',
          duration: 2500
        });
      }
      wx.hideLoading();
    });
  },
  onLoad(options) {
    console.log(options);
    if (options && options.tab) {
      this.active = options.tab;
    }
  }
};
</script>

<style lang="stylus">
.coupon-list-content {
  height: calc(100vh - 55px);
  box-sizing: border-box;
  overflow-y: auto;
}

.coupon-item {
  padding: 15rpx 20rpx;
}
</style>
