<template>
  <div class="coupon-container">
    <cr-tabs v-model="couponActive" v-bind="tabsConfig" @change="handleCoupon">
      <cr-tab title="未使用" />
      <cr-tab title="已使用" />
      <cr-tab title="已失效" />
    </cr-tabs>
    <div class="coupon-list">
      <scroll-view ref="scrollView" @toBottom="loadData">
        <template v-if="couponList.length">
          <template v-for="(item, idx) in couponList">
            <coupon-item
              v-if="item"
              :key="idx"
              :is-cannot="isCannot"
              :is-use="isUse"
              :coupon-item="item"
            />
          </template>
        </template>
        <div v-else class="empty">
          <img class="empty-img" :src="MallGoodsNotFound" alt="" />
          <p class="empty-text">没有优惠券数据</p>
        </div>
        <load-more v-if="couponList.length > 6" :status="loadingType" />
      </scroll-view>
    </div>
  </div>
</template>
<script>
import ScrollView from '@/components/scrollView.vue';
import LoadMore from '@/components/loadMore';
import CouponItem from './components/couponItem';
import { getCouponList } from '@/api/coupon.api.js';
import MallGoodsNotFound from '@/assets/images/coupon/MallGoodsNotFound.png';
export default {
  components: {
    ScrollView,
    CouponItem,
    LoadMore
  },
  data() {
    return {
      loading: true,
      MallGoodsNotFound,
      couponList: [],
      loadingType: 'loading',
      couponActive: 0,
      pageNo: 1,
      scrollTop: 0,
      tabsConfig: {
        'title-inactive-color': '#333333',
        'title-bg-color': '#F7F7F7'
      }
    };
  },
  computed: {
    isCannot() {
      return this.couponActive === 0;
    },
    isUse() {
      return this.couponActive === 1;
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    handleCoupon() {
      this.pageNo = 1;
      this.loading = true;
      this.loadingType = 'loading';
      this.couponList = [''];
      this.$refs.scrollView.$refs.scrollContent.scrollTop = 0;
      this.loadData();
    },
    async loadData() {
      console.log(this.loading);
      if (this.loading) {
        this.loading = false;
        if (this.loadingType === 'noMore') return;
        const status = this.couponActive + 1;
        const [data] = await getCouponList({
          status,
          pageNo: this.pageNo++,
          pageSize: 50
        });
        this.loadingType = 'loading';
        this.loading = true;
        const { coupons = [] } = data || {};
        // 2是第一页  上面参数有做++操作
        if (this.pageNo === 2) {
          this.couponList = coupons;
        } else {
          this.couponList = this.couponList.concat(coupons);
        }
        if (!data || !data.hasNext || !coupons.length) {
          this.loadingType = 'noMore';
        }
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
