<template>
  <div class="gift">
    <view class="gift-nav">
      <view
        v-for="(item, index) in navList"
        :key="index"
        class="gift-nav-item"
        :class="{ current: currentTab === index }"
        @click="handleTabChange(index)"
      >
        {{ item.title }}
      </view>
    </view>

    <swiper :current="currentTab" class="gift-swiper" duration="300" @change="changeTab">
      <swiper-item v-for="(item, index) in navList" :key="index">
        <view class="gift-swiper-item">
          <scroll-view
            class="gift-list"
            scroll-y
            :show-scrollbar="false"
            :scroll-top="tabScrollTop"
            lower-threshold="50"
            @scrolltolower="pageScroll"
          >
            <template v-if="item.list">
              <template v-for="(listItem, idx) in item.list">
                <coupon-item
                  :key="idx"
                  :is-cannot="currentTab === 0"
                  :is-use="currentTab === 1"
                  :current-tab="currentTab"
                  :status="item.status"
                  :coupon-item="listItem"
                />
              </template>
              <uni-load-more v-if="item.list.length" :status="item.loading" />
            </template>
            <empty
              v-if="item.loading === 'noMore' && !item.list.length"
              back-color="transparent"
              text="没有优惠券数据"
            />
          </scroll-view>
        </view>
      </swiper-item>
    </swiper>
    <view class="coupon-exchange" @click="goExchange">
      <text class="coupon-exchange-text">优惠券券码兑换</text>
    </view>
  </div>
</template>
<script>
import { getCouponList } from "@/api/coupon.api.js";
import couponItem from "./couponItem.vue";
import empty from "@/components/empty";
import { debounce } from "@/utils";
const commonParams = {
  loading: false,
  finished: false,
  total: 0,
  page: 1,
  pageSize: 10,
  list: []
};
export default {
  name: "CouponCardList",
  components: {
    couponItem,
    empty
  },
  data() {
    return {
      currentTab: 0,
      navList: [
        {
          status: 1,
          title: "未使用",
          ...JSON.parse(JSON.stringify(commonParams))
        },
        {
          status: 2,
          title: "已使用",
          ...JSON.parse(JSON.stringify(commonParams))
        },
        {
          status: 3,
          title: "已失效",
          ...JSON.parse(JSON.stringify(commonParams))
        }
      ]
    };
  },
  onLoad({ status }) {
    status && (this.currentTab = Number(status));
    this.getList();
  },
  methods: {
    handleTabChange(index) {
      this.currentTab = index;
      this.changeTab();
    },
    goExchange() {
      uni.navigateTo({
        url: "/pages/coupon/exchange"
      });
    },
    pageScroll() {
      if (!this.navList[this.currentTab].finished) {
        this.getList();
      }
    },

    changeTab: debounce(function(e) {
      if (e) {
        const index = e.detail.current;
        this.currentTab = index;
      }
      this.getList();
    }, 100),

    setNavListData(key, val) {
      this.$set(this.navList[this.currentTab], key, val);
    },
    async getList() {
      let { finished, page, pageSize, list, status } = this.navList[this.currentTab];
      if (finished) return;
      this.setNavListData("loading", "loading");
      const [res] = await getCouponList({
        pageNo: page,
        pageSize,
        status
      });
      if (res?.coupons?.length) {
        list = [...list, ...res.coupons];
        this.setNavListData("list", list);
        if (!res.hasNext) {
          this.setNavListData("finished", true);
          this.setNavListData("loading", "noMore");
        } else {
          page++;
          this.setNavListData("loading", "more");
          this.setNavListData("page", page);
        }
        return;
      }
      this.setNavListData("loading", "noMore");
    }
  }
};
</script>
<style lang="scss" scoped>
.gift {
  background: $page-color-base;
  height: 100vh;
  &-swiper {
    height: calc(100% - 80rpx);
    &-item {
      height: 100%;
      ::v-deep .gift-card {
        margin: 0 20rpx 20rpx;
      }
    }
  }

  .gift-list {
    height: 100%;
    padding: 0 $padding-md;
  }
  &-nav {
    display: flex;
    height: 80rpx;
    &-item {
      position: relative;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 26rpx;
      color: #333333;
      &.current {
        color: #ec1500;
        font-weight: bold;
        &:after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 80rpx;
          height: 0;
          border-bottom: 6rpx solid #ec1500;
          border-radius: 3rpx;
        }
      }
    }
  }
}
.coupon-exchange {
  width: 100%;
  height: 120rpx;
  position: fixed;
  bottom: 0;
  margin-top: 120rpx;
  background: #fff;
  border: 2rpx solid #ededed;
  display: flex;
  justify-content: center;
  align-items: center;
  &-text {
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
