<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"
        @use="handleUse"
      />
    </view>

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

<script>
import login from "@/lib/utils/login";
import coupon from "@/components/coupon/coupon.vue";
import { getMySkuList, useMySku } from "@/lib/api/shop";
export default {
  name: "PageMyCoupon",
  components: {
    coupon,
  },
  data() {
    return {
      navCur: "curr", // 当前显示的nav: curr  his
      userInfo: {},
      currList: [],
      hisList: [],
    };
  },
  async onLoad() {
    this.userInfo = await login.getUserInfo();
    if (this.userInfo && this.userInfo.session) {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
    } else {
      uni.showToast({
        title: "请先登录",
        icon: "none",
      });
    }
    this.initList();
  },
  methods: {
    async initList() {
      const currList = [];
      const hisList = [];
      const { data } = await getMySkuList();
      if (data) {
        for (let j = 0; j < data.length; j++) {
          if (!data[j].is_use) {
            currList.push(data[j]);
          } else {
            hisList.push(data[j]);
          }
        }
      }
      this.currList = currList;
      this.hisList = hisList;
      uni.hideLoading();
    },
    // 切换 nav
    change(alias) {
      if (alias == this.navCur) {
        return;
      }
      this.navCur = alias;
    },
    async handleUse(item) {
      // if (item.is_use) {
      //   return;
      // }
      const confirm = await new Promise((resolve) => {
        uni.showModal({
          title: "提示",
          content: "请在门店内与店员沟通后当面兑换。卡券失效后无法找回。",
          cancelText: "不在门店",
          confirmText: "确认兑换",
          success: function (res) {
            if (res.confirm) {
              resolve(true);
            } else if (res.cancel) {
              resolve(false);
            }
          },
        });
      });
      if (!confirm) return;
      const res = await useMySku({ sku_id: item.sku_id });
      uni.showToast({
        icon: "none",
        title: res.errno !== 10000 ? res.errmsg : "兑换成功",
      });
      res.errno === 10000 && this.initList();
    },
  },
};
</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>
