<template>
  <div class="coupon" v-show="!pageMsg.isLoading">
    <!-- Tabs Header -->
    <div class="tabs-header">
      <div class="tab-item" :class="{ active: pageMsg.activeTabs === 0 }" @click="changeActive(0)">
        有效
      </div>
      <div class="tab-item" :class="{ active: pageMsg.activeTabs === 1 }" @click="changeActive(1)">
        无效
      </div>
    </div>

    <!-- Tabs Content -->
    <div class="tabs-content">
      <!-- 有效 Tab -->
      <div v-if="pageMsg.activeTabs === 0" class="tab-panel">
        <div style="padding-top: 24rpx">
          <div class="couponList">
            <div class="couponItem" v-for="(item, i) in couponList" :key="i" @drop="goShop(item)">
              <div class="itemleft">
                <div>
                  <span class="leftUnit">¥</span>
                  <span class="money">{{ item.UseAmount }}</span>
                </div>
                <div v-if="!item.CouponSendId && item.CouponPoint" class="condition">
                  {{ item.CouponPoint }}积分兑换
                </div>
                <div v-else class="condition">
                  {{
                    item.WithAmount > 0
                      ? "满" + item.WithAmount + "可用"
                      : "无门槛使用"
                  }}
                </div>
              </div>
              <div class="itemRight">
                <div>
                  <div class="couponName">{{ item.CouponName }}</div>
                  <div class="timeText">
                    <span class="coupon-date" v-if="item.CouponSendId">有效期至{{ item.EndTime }}</span>
                    <span class="coupon-date" v-else>活动至{{ item.EndTime }}</span>
                  </div>
                </div>

                <div class="useBtn">
                  <span class="useBtnText" v-if="!item.CouponSendId" @click="goShop(item)">去兑换</span>
                  <span class="useBtnText" @click="goShop(item)" v-else-if="item.CouponState == 0">立即使用</span>
                  <span class="useBtnText" v-else>{{
                    item.CouponStateText
                  }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- <Card
            :props="item"
            v-for="(item, i) in couponList"
            :key="i"
            @drop="goShop"
          /> -->
        </div>
        <no-data :text="'您暂无可使用的优惠券'" :isShow="!(couponList && couponList.length > 0)" />
      </div>

      <!-- 无效 Tab -->
      <div v-if="pageMsg.activeTabs === 1" class="tab-panel">
        <div style="padding-top: 24rpx">
          <div class="invalidList">
            <div class="couponItem" v-for="(item, i) in novalid" :key="i" @drop="goShop(item)">
              <div class="itemleft">
                <div>
                  <span class="leftUnit">¥</span>
                  <span class="money">{{ item.UseAmount }}</span>
                </div>
                <div v-if="!item.CouponSendId && item.CouponPoint" class="condition">
                  {{ item.CouponPoint }}积分兑换
                </div>
                <div v-else class="condition">
                  {{
                    item.WithAmount > 0
                      ? "满" + item.WithAmount + "可用"
                      : "无门槛使用"
                  }}
                </div>
              </div>
              <div class="itemRight">
                <div>
                  <div class="couponName">{{ item.CouponName }}</div>
                  <div class="timeText">
                    <span class="coupon-date" v-if="item.CouponSendId">有效期至{{ item.EndTime }}</span>
                    <span class="coupon-date" v-else>活动至{{ item.EndTime }}</span>
                  </div>
                </div>

                <div class="useBtn">
                  <span class="useBtnText">已过期</span>
                </div>
              </div>
            </div>
          </div>
          <!-- <Card
            :props="item"
            v-for="(item, i) in novalid"
            :key="i"
            @drop="goShop"
          /> -->
        </div>
        <no-data :text="'暂无信息'" :isShow="!(novalid.length > 0)" />
      </div>
    </div>
    <CustomLoading :visible="isCustomLoading" />
  </div>
</template>


<script>
import NoData from "@/components/noData.vue";
import Card from "@/components/card.vue";
import CustomLoading from "../../../components/customLoading.vue";
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      radio: 0,
      pageMsg: {
        isLoading: true,
        pageSize: 10,
        pageIndex: 1,
        activeTabs: 0,
      },
      isCoupon: false,
      isBgcolor: false,
      couponOrder: {},
      couponList: [],
      specialCards: [], // 专享券
      novalid: [],
      isCustomLoading: false
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
      isLoading: "isLoading",
    }),
  },
  components: {
    NoData,
    Card, CustomLoading
  },
  methods: {
    ...mapMutations({
      setIsLoading: "setIsLoading",
    }),
    changeActive(index) {
      this.pageMsg.activeTabs = index;
    },
    getRadio(item) {
      if (this.radio === item) {
        this.radio = "";
      } else {
        this.radio = parseInt(item);
      }
    },
    goShop(item) {
      uni.navigateTo({
        url: "/pages/couponDetail/index?sendId=" + item.CouponSendId,
      });
    },
    couponBtn() {
      this.$store.commit("couponPrice", this.couponList[this.radio]);
      uni.navigateBack({
        delta: 1,
      });
    },

    getList() {
      let _this = this;
      this.$api
        .$get("/WeChat/GetMemberCouponList", { CouponStatus: 0 })
        .then((rs) => {
          _this.pageMsg.isLoading = false;
          if (rs.Result_Code === 100) {
            _this.couponList =
              _this.pageMsg.pageIndex === 1
                ? rs.Result_Data.List
                : _this.couponList.concat(rs.Result_Data.List);
            if (rs.Result_Data.TotalCount > _this.couponList.length) {
              _this.pageMsg.isLoadMore = true;
            } else {
              _this.pageMsg.isLoadMore = false;
            }
          }
        });
    },

    getUnList() {
      this.isCustomLoading = true
      let _this = this;
      _this.$api
        .$get("/WeChat/GetMemberCouponList", { CouponStatus: "1,2" })
        .then((rs) => {
          if (rs.Result_Code === 100) {
            _this.novalid = rs.Result_Data.List;
          }
          _this.isCustomLoading = false
        });
    },
  },
  onUnload() {
    this.novalid = [];
    this.couponList = [];
    this.pageMsg.isLoading = true;
    this.pageMsg.activeTabs = 0;
  },
  // onHide () {
  //   this.couponOrder = {}
  //   this.couponList = []
  //   this.novalid = []
  // },
  onShow() {
    this.getList();
  },
  onLoad(option) {
    // this.setIsLoading(true)

    this.getUnList();
  },
  onReachBottom() {
    if (this.pageMsg.isLoadMore) {
      this.pageMsg.pageIndex += 1;
      this.getList();
    }
  },
  onPullDownRefresh() {
    this.pageMsg.pageIndex = 1;
    this.getList();
    this.getUnList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
};
</script>

<style lang="stylus" scoped>
bodyColor = #CAA97F;
color999 = #999999;

.coupon {
  padding-bottom: 20rpx;
}

.coupon-bg {
  opacity: 0.5;
}

.coupon-title {
  color: #333333;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  width: 638rpx;
  margin: 30rpx auto 0 auto;

  image {
    width: 62rpx;
    height: 62rpx;
    margin-right: 24rpx;
    border-radius: 36rpx;
  }
}

.tabs-header {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #eee;
}

.tab-item {
  // flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  cursor: pointer;
  color: #333;
}

.tab-item.active {
  font-weight: bold;
  color: #caa97f; /* 激活状态颜色 */
  border-bottom: 2px solid #caa97f; /* 激活状态下的底部边框 */
}

.tabs-content {
  padding: 10px;
}

.tab-panel {
  display: block;

  .couponList {
    width: 100%;
    box-sizing: border-box;

    .couponItem {
      width: 100%;
      height: 144rpx;
      background: url('https://eshangtech.com/wanmeiyizhanImg/home/validCoupons.png') no-repeat center;
      background-size: contain;
      box-sizing: border-box;
      padding: 32rpx 0;
      display: flex;
      align-items: center;
      margin-bottom: 32rpx;

      .itemleft {
        width: 195rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: 2rpx dashed #E5CD92;

        .leftUnit {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 34rpx;
          color: #BA922F;
          line-height: 48rpx;
          text-align: left;
          font-style: normal;
          margin-right: 4rpx;
        }

        .money {
          font-family: DINAlternate, DINAlternate;
          font-weight: bold;
          font-size: 48rpx;
          color: #BA922F;
          line-height: 56rpx;
          text-align: left;
          font-style: normal;
        }

        .condition {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #BA922F;
          line-height: 28rpx;
          text-align: justify;
          font-style: normal;
        }
      }

      .itemRight {
        flex: 1;
        width: 100%;
        box-sizing: border-box;
        padding: 0 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .couponName {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #130F05;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .timeText {
          .coupon-date {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #716F69;
            line-height: 32rpx;
            text-align: justify;
            font-style: normal;
          }
        }

        .useBtn {
          .useBtnText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #FFFFFF;
            line-height: 36rpx;
            text-align: center;
            font-style: normal;
            padding: 8rpx 20rpx;
            background: #BA922F;
            border-radius: 4rpx;
          }
        }
      }
    }
  }

  .invalidList {
    width: 100%;
    box-sizing: border-box;

    .couponItem {
      width: 100%;
      height: 144rpx;
      background: url('https://eshangtech.com/wanmeiyizhanImg/home/invalidCoupons.png') no-repeat center;
      background-size: contain;
      box-sizing: border-box;
      padding: 32rpx 0;
      display: flex;
      align-items: center;
      margin-bottom: 32rpx;

      .itemleft {
        width: 195rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: 2rpx dashed #E5CD92;

        .leftUnit {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 34rpx;
          color: #716F69;
          line-height: 48rpx;
          text-align: left;
          font-style: normal;
          margin-right: 4rpx;
        }

        .money {
          font-family: DINAlternate, DINAlternate;
          font-weight: bold;
          font-size: 48rpx;
          color: #716F69;
          line-height: 56rpx;
          text-align: left;
          font-style: normal;
        }

        .condition {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #716F69;
          line-height: 28rpx;
          text-align: justify;
          font-style: normal;
        }
      }

      .itemRight {
        flex: 1;
        width: 100%;
        box-sizing: border-box;
        padding: 0 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .couponName {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #716F69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .timeText {
          .coupon-date {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #716F69;
            line-height: 32rpx;
            text-align: justify;
            font-style: normal;
          }
        }

        .useBtn {
          .useBtnText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #716F69;
            line-height: 36rpx;
            text-align: center;
            font-style: normal;
            // padding: 8rpx 20rpx;
            // background: #BA922F;
            // border-radius: 4rpx;
          }
        }
      }
    }
  }
}

.coupon-card {
  background: url('https://eshangtech.com/ShopICO/coupon-bg.png') no-repeat center; // eshangtech.com/ShopICO/coupon-bg.png) no-repeat center
  background-size: contain;
  height: 229rpx;
  width: 669rpx;
  padding: 20rpx 30rpx;
  margin: 30rpx auto 0 auto;
  box-sizing: border-box;
  font-size: 24rpx;
}

.coupon-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.coupon-left {
  text-align: center;
  color: bodyColor;
}

.coupon-price {
  color: #323033;
  font-size: 46rpx;
  font-weight: bolder;
  font-family: 'San Francisco Display Medium';
  line-height: 46rpx;
}

.coupon-manjian {
  margin-top: 20rpx;
}

.coupon-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-top 16rpx
}

.coupon-img {
  width: 110rpx;
  height: 110rpx;
  border-radius: 10rpx;
  background: #dddddd;
  margin-right: 20rpx;
}

.coupon-zx {
  display: inline-block;
  padding: 6rpx 10rpx;
  color: #be6f6b;
  border: 2rpx solid #edd0cc;
  background: #fef4f3;
  border-radius: 6rpx;
  margin: 6rpx 0;
}

.coupon-name {
  color: #000;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  // font-weight 800
}

.coupon-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
}

.coupon-use-door {
  background: url('https://eshangtech.com/ShopICO/coupon-btn.png') no-repeat center; // eshangtech.com/ShopICO/coupon-btn.png) no-repeat center
  background-size: contain;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  width: 120rpx;
  height: 40rpx;
  line-height: 40rpx;
}

.coupon-door {
  display: inline-block;
  background: #f2f2f2;
  color: #999;
  padding: 6rpx 30rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.coupon-date {
  color: #333333;
}

.span24 {
  display: block;
  color: color999;
  font-size: 24rpx;
}

.coupon-btn {
  height: 100rpx;
  width: 100%;
  line-height: 100rpx;
  background: #333;
  color: bodyColor;
  text-align: center;
  font-size: 30rpx;
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
}

.activity-btn {
  width: 152rpx;
  height: 46rpx;
  // position absolute
  // bottom 74rpx
  // left 55rpx
  color: #666;
  background: #eee;
  border: 2rpx solid #ededed;
  font-size: 24rpx;
  text-align: center;
  border-radius: 36rpx;
  line-height: 48rpx;
  margin-top: 36rpx;
  margin-bottom: 17rpx;
}

.activity-card {
  background: url('https://eshangtech.com/ShopICO/activity_card_201907292.png') no-repeat center; // eshangtech.com/ShopICO/activity_card_201907292.png) no-repeat center
  background-size: contain;
  width: 673rpx;
  height: 310rpx;
  padding: 35rpx 56rpx;
  text-align: left;
  margin: 12rpx auto 0 auto;
  box-sizing: border-box;
  font-size: 24rpx;
}

.use-card-btn {
  width: 152rpx;
  height: 46rpx;
  color: #fff;
  background: linear-gradient(to right, #A17356, #D8AA8B);
  font-size: 24rpx;
  text-align: center;
  border-radius: 36rpx;
  line-height: 48rpx;
  margin-top: 38rpx;
  margin-bottom: 17rpx;
}
</style>
