<template>
  <!-- 我的优惠券 -->
  <div class="mycoupon-wrapper maCoupon">
    <div class="user-com-title">我的优惠券</div>
    <div class="user-com-tabs">
      <span
        class="item"
        :class="{ on: tabCur ==1 }"
        @click="changeTabCur(1) "
      >可使用优惠券（{{availableNum}}）</span>
      <span
        class="item"
        :class="{ on: tabCur == 2 }"
        @click="changeTabCur(2) "
      >不可使用优惠券（{{expireList.length}}）</span>
    </div>
    <div class="main-section">
      <!-- 可用优惠券 -->
      <div class="main-ky" v-if="tabCur == 1">
        <ul>
          <li v-for="(item, index) in couponList" :key="index">
            <div class="left">
              <p v-if="item.type=='discount'">
                {{item.discount}}
                <span>折</span>
              </p>
              <p v-if="!(item.type=='discount')">
                <span>¥</span>1.5
              </p>
              <span>满{{item.at_least}}可使用</span>
            </div>
            <div class="right">
              <div class="top">
                <div class="title">{{item.coupon_name}}</div>
                <div class="btn" @click="goGoodCate">去使用</div>
              </div>
              <div class="time">有效期：{{ $dayjs(item.end_time*1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
            </div>
          </li>
        </ul>
        <!-- 分页 -->
        <!-- <Page :padding="0" @currentChange="currentChange" :total="total" :pageSize="query.limit"></Page> -->
      </div>
      <div class="main-bky" v-if="tabCur == 2">
        <ul>
          <li v-for="(item, index) in expireList" :key="index">
            <div class="tops">
              <div class="left">
                <p>
                  <span>¥</span>200
                </p>
                <span>无使用门槛</span>
              </div>
              <div class="right">
                <div class="top">
                  <div class="title">元旦满减券</div>
                </div>
                <div class="time">有效期：2022.12.12-202212.22</div>
              </div>
            </div>
            <div class="bottm">·这里是不可用的原因</div>
          </li>
        </ul>
        <!-- 分页 -->
        <!-- <Page :padding="0" @currentChange="currentChange" :total="total" :pageSize="query.limit"></Page> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myCoupon",
  auth: "guest",
  data() {
    return {
      total: 3,
      query: {
        page: 1,
        limit: 10
      },
      availableNum: 0,
      tabCur: 1,
      list: [1],
      couponList: [],
      expireList: []
    };
  },
  watch: {},
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "我的优惠券-" + this.$store.state.titleCon
    };
  },
  created() {
    this.getCouponList(this.tabCur);
    this.getCouponNum();
  },
  methods: {
    changeTabCur(i) {
      this.tabCur = i;
      this.getCouponList(i);
    },
    goGoodCate() {
      this.$router.push({ path: `/goods_cate` });
    },
    currentChange() {},
    getCouponList(state) {
      let obj = {
        couponURL: true,
        state: state
      };
      this.$axios
        .post(`coupon/api/coupon/memberpage`, obj)
        .then(res => {
          console.log(res);
          if (state == 1) {
            this.couponList = res.data.list;
          } else if (state == 1) {
            this.expireList = res.data.list;
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    getCouponNum() {
      let obj = {
        couponURL: true
      };
      this.$axios
        .post(`coupon/api/coupon/num`, obj)
        .then(res => {
          console.log(res, `getCouponNum`);
          this.availableNum = res.data;
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.maCoupon {
  padding: 0 30px;
}
.main-section {
  margin-top: 20px;
  .main-ky {
    ul {
      display: flex;
      flex-flow: wrap;
      li {
        width: 343px;
        margin: 0 40px 20px 0;
        margin-bottom: 20px;

        height: 88px;
        background-image: url("~assets/images/ky.png");
        background-size: 100% 100%;
        display: flex;
        .left {
          width: 113px;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative;
          &:after {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            height: 58px;
            border-right: 1px dashed rgba(230, 201, 165, 0.8);
          }

          span {
            font-size: 11px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(240, 132, 51, 0.78);
          }
          p {
            font-size: 32px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #f08433;
            span {
              font-size: 16px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #e5831e;
            }
          }
        }
        .right {
          width: calc(100% - 113px);
          padding: 0 20px;
          display: flex;
          justify-content: center;
          flex-direction: column;
          .top {
            display: flex;
            justify-content: space-between;
            .title {
              font-size: 18px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #f08433;
            }
            .btn {
              width: 60px;
              height: 24px;
              background: linear-gradient(133deg, #fb6677 0%, #f33b50 100%);
              border-radius: 14px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 24px;
              text-align: center;
              cursor: pointer;
            }
          }
          .time {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(240, 132, 51, 0.78);
            margin-top: 5px;
          }
        }
      }
    }
  }
  .main-bky {
    ul {
      display: flex;
      flex-flow: wrap;
      li {
        margin: 0 40px 20px 0;
        margin-bottom: 20px;
        width: 347px;
        height: 125px;
        background-image: url("~assets/images/bky.png");
        background-size: 100% 100%;
        .tops {
          display: flex;
          height: 88px;

          .left {
            width: 113px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            &:after {
              content: "";
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 100%;
              height: 58px;
              border-right: 1px dashed rgba(230, 201, 165, 0.8);
            }

            span {
              font-size: 11px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;

              color: #999999;
              margin-bottom: 13px;
            }
            p {
              font-size: 32px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;

              color: #999999;
              span {
                font-size: 16px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;

                color: #999999;
              }
            }
          }
          .right {
            width: calc(100% - 113px);
            padding: 0 20px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            .top {
              display: flex;
              justify-content: space-between;
              .title {
                line-height: 25px;
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;

                color: #999999;
              }
            }
            .time {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;

              color: #bfbfbf;
              margin-top: 5px;
            }
          }
        }
        .bottm {
          height: 37px;
          line-height: 37px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-left: 26px;
        }
      }
    }
  }
}
.user-com-tabs {
  .item {
    margin-right: 70px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    position: relative;
    cursor: pointer;
  }
  .on {
    &:after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      width: 47px;
      height: 2px;
      background: var(--themeColor);
    }
  }
}
</style>
