<template>
  <view class="coupon-page">
    <view class="tab flex-row">
      <view
        class="curr"
        :class="navCur == 'curr' ? 'cur' : ''"
        @tap="change('curr')"
      >
        <text>可用卡券</text>
      </view>
      <view
        class="his"
        :class="navCur == 'his' ? 'cur' : ''"
        @tap="change('his')"
      >
        <text>历史卡券</text>
      </view>
    </view>
    <view v-show="navCur == 'curr'" class="list">
      <coupon v-for="item in currList" :key="item.id" :coupon="item" />
    </view>

    <view v-show="navCur == 'his'" class="list">
      <coupon v-for="item in hisList" :key="item.id" :coupon="item" />
    </view>
  </view>
</template>

<script>
import coupon from "@/components/coupon/coupon.vue";
import api from "@/lib/api/api";
export default {
  name: "PageMyCoupon",
  components: {
    coupon,
  },
  data() {
    return {
      navCur: "curr", // 当前显示的nav: curr  his
      userInfo: {},
      currList: [],
      hisList: [],
    };
  },
  onLoad() {
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
    } else {
      uni.showToast({
        title: "请先登录",
        icon: "none",
      });
    }
  },
  onShow() {
    if (!this.userInfo) {
      return;
    }

    this.initList();
  },
  methods: {
    async initList() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      const { data } = await api.myCouponList(this.userInfo.session);
      if (data) {
        for (let j = 0; j < data.length; j++) {
          if (data[j].use_type == 1) {
            this.currList.push(data[j]);
          } else if (data[j].use_type == 2 || data[j].use_type == 0) {
            this.hisList.push(data[j]);
          }
        }
      }
      uni.hideLoading();
    },
    // 切换 nav
    change(alias) {
      if (alias == this.navCur) {
        return;
      }
      this.navCur = alias;
    },
  },
};
</script>

<style lang="scss">
.coupon-page {
  background: #f5f5f5;
  min-height: 100vh;
  position: relative;
  .tab {
    width: 100%;
    height: 76rpx;
    background: #ffffff;
    letter-spacing: 3rpx;
    position: sticky;
    top: 0;
    z-index: 99;
    .curr,
    .his {
      width: 50%;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #9496a5;
      text {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 76rpx;
      }
    }
    .cur {
      color: #08c2c3;
      text {
        padding-top: 8rpx;
        border-bottom: 8rpx solid #08c2c3;
      }
    }
  }

  .list {
    padding-top: 24rpx;
    position: relative;
    z-index: 0;
  }
}
</style>
