<template>
  <view class="main">
    <view class="tabBox">
      <view :class="selectTab === item.value ? 'tabItem selectTabItem' : 'tabItem'" v-for="(item, index) in tabList"
        :key="index" @click="handleChangeTab(item.value)">
        {{ item.label }}
      </view>
    </view>

    <scroll-view class="couponContent" scroll-y>
      <view class="couponItem" v-for="(item, index) in showCouponList" :key="index">
        <view class="couponItemTop">
          <view class="couponItemLeft" v-if="item.CouponType !== 9000">
            <view class="couponItemPrice">
              <text class="couponItemPriceUnit">¥</text>
              <text class="couponItemPriceValue">{{ item.UseAmount }}</text>
            </view>

            <view class="couponItemRule" v-if="!item.CouponSendId && item.CouponPoint">{{ item.CouponPoint }}积分兑换</view>
            <view class="couponItemRule" v-else>{{
              item.WithAmount > 0
                ? "满" + item.WithAmount + "可用"
                : "无门槛使用"
            }}</view>
          </view>
          <view class="couponItemLeft" v-if="item.CouponType === 9000">
            <view class="couponItemPrice">
              <text class="couponItemPriceUnit">¥</text>
              <text class="couponItemPriceValue">{{ item.UseAmount }}</text>
            </view>
          </view>

          <view class="couponItemRight">
            <view class="couponItemRightLeft">
              <view class="couponItemName">{{ item.CouponName }}</view>
              <view class="couponItemTime" v-if="item.CouponSendId">有效期至{{ item.EndTime }}</view>
              <view class="couponItemTime" v-else>活动至{{ item.EndTime }}</view>
              <view class="couponItemUsedType" @click="handleShowRule(item)" v-if="item.PayMethodText">
                <view class="couponItemUsedTypeLabel">使用规则</view>
                <image class="couponItemUsedTypeIcon"
                  :style="{ transform: item.showRule ? 'rotate(180deg)' : 'rotate(0deg)' }"
                  src="http://saas.eshangtech.com/caiyunyiImg/bottomArrow.png" />
              </view>
            </view>
            <view class="couponItemRightRight">
              <view class="noUsed" v-if="item.CouponState === 0" @click="goShop(item)">去使用</view>
              <view class="used" v-if="item.CouponState === 1">已使用</view>
              <view class="used" v-if="item.CouponState === 2">已过期</view>
            </view>
          </view>
        </view>

        <view class="couponItemBottom" v-if="item.showRule">
          <view class="couponItemBottomDesc">{{ item.PayMethodText }}</view>
        </view>
      </view>
      <view v-if="showCouponList.length === 0">
        <NoData :text="'暂无信息'" />
      </view>
    </scroll-view>
  </view>
</template>


<script>
import NoData from "../../../components/noData.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,
      tabList: [{ label: "未使用", value: 1 }, { label: "已使用", value: 2 }, { label: "已过期", value: 3 }],// tab的列表
      selectTab: 1,
      allCouponList: [],// 全部类型的 列表
      showCouponList: [],// 当前显示的列表 
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
      isLoading: "isLoading",
    }),
  },
  components: {
    NoData,
  },
  onUnload() {
    this.novalid = [];
    this.couponList = [];
    this.pageMsg.isLoading = true;
    this.pageMsg.activeTabs = 0;
  },
  // onHide () {
  //   this.couponOrder = {}
  //   this.couponList = []
  //   this.novalid = []
  // },
  async onShow() {
    // this.getList();
    await this.handleGetData()
  },
  async onLoad(option) {
    this.$utils.addUserBehaviorNew({
      behaviorRecordDesc: "查看券包"
    });
    // this.setIsLoading(true)
    // this.getUnList();
    // this.$utils.addUserBehaviorNew();
  },
  // 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);
  // },
  methods: {
    ...mapMutations({
      setIsLoading: "setIsLoading",
    }),
    // 修改 是否显示规则
    handleShowRule(item) {
      item.showRule = !item.showRule
      this.$forceUpdate();
    },
    // 修改顶部的tab选择
    handleChangeTab(value) {
      this.selectTab = value
      this.showCouponList = this.allCouponList[this.selectTab - 1]

      console.log('this.showCouponList', this.showCouponList.length);

      this.$forceUpdate();
    },
    handleGoCouponsList(obj) {
      console.log('obj', obj);
      // uni.navigateTo({
      //   url: `/pages/homeFn/payfor/index?cid=${obj.CouponId}`,
      // });
    },
    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,
      // });
      if (item.CouponType === 9000) {
        uni.navigateTo({
          url: `/pages/payfor/index?cid=${item.CouponSendId}`,
        });
      } else {
        uni.navigateTo({
          url: "/pages/serviceList/index?type=food",
        });
      }
    },
    couponBtn() {
      this.$store.commit("couponPrice", this.couponList[this.radio]);
      uni.navigateBack({
        delta: 1,
      });
    },

    async handleGetData() {
      const req = {
        CouponStatus: "0,1,2"
      }
      const data = await this.$api.$get("/WeChat/GetMemberCouponList", req)
      console.log('data', data);

      let list = data.Result_Data.List

      // 待使用
      let toBeUsed = []
      // 已使用
      let usedAlready = []
      // 已失效
      let expired = []
      if (list && list.length > 0) {
        list.forEach((item) => {
          item.showRule = false
          if (item.CouponState === 0) {
            toBeUsed.push(item)
          } else if (item.CouponState === 1) {
            usedAlready.push(item)
          } else if (item.CouponState === 2) {
            expired.push(item)
          }
        })
      }
      console.log('toBeUsedtoBeUsedtoBeUsed', toBeUsed);

      this.allCouponList = [toBeUsed, usedAlready, expired]
      this.showCouponList = this.allCouponList[this.selectTab - 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) {
            console.log('rsrsrsrsrsrsrs', rs);

            _this.novalid = rs.Result_Data.List;
          }
          _this.isCustomLoading = false;
        });
    },
  },

};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background-color: #F1F5F6;

  .tabBox {
    width: 100%;
    height: 88rpx;
    box-sizing: border-box;
    padding: 30rpx 0 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .tabItem {
      // width: 120rpx;
      width: calc(100% / 3);
      height: 58rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: center;
      font-style: normal;
    }

    .selectTabItem {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #EC632E;
      line-height: 40rpx;
      text-align: center;
      font-style: normal;
      position: relative;
    }

    .selectTabItem::after {
      content: "";
      width: 2rem;
      height: 6rpx;
      background: #EC632E;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
    }
  }

  .couponContent {
    width: 100%;
    height: calc(100% - 88rpx);
    box-sizing: border-box;
    padding: 46rpx 24rpx 0;

    .couponItem {
      width: 100%;
      box-sizing: border-box;
      padding: 28rpx 24rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      margin-bottom: 22rpx;

      .couponItemTop {
        width: 100%;
        display: flex;
        align-items: center;

        .couponItemLeft {
          width: 160rpx;
          margin-right: 22rpx;

          .couponItemPrice {
            text-align: center;

            .couponItemPriceUnit {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 28rpx;
              color: #E84D38;
              line-height: 40rpx;
              text-align: center;
              font-style: normal;
            }

            .couponItemPriceValue {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 52rpx;
              color: #E84D38;
              line-height: 40rpx;
              text-align: center;
              font-style: normal;
            }
          }

          .couponItemRule {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #E84D38;
            line-height: 28rpx;
            text-align: center;
            font-style: normal;
            margin-top: 12rpx;
          }
        }

        .couponItemRight {
          width: calc(100% - 182rpx);
          display: flex;
          align-items: center;

          .couponItemRightLeft {
            width: calc(100% - 120rpx - 44rpx);

            .couponItemName {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 28rpx;
              color: #333333;
              line-height: 34rpx;
              text-align: left;
              font-style: normal;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              /* 最多显示2行 */
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .couponItemTime {
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #666666;
              line-height: 34rpx;
              text-align: left;
              font-style: normal;
              margin-top: 12rpx;
            }

            .couponItemUsedType {
              display: flex;
              align-items: center;
              margin-top: 16rpx;

              .couponItemUsedTypeLabel {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #999999;
                line-height: 28rpx;
                text-align: left;
                font-style: normal;
              }

              .couponItemUsedTypeIcon {
                width: 20rpx;
                height: 20rpx;
                margin-left: 4rpx;
              }
            }

          }

          .couponItemRightRight {
            width: 120rpx;
            margin-left: 44rpx;

            .noUsed {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #FFFFFF;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
              box-sizing: border-box;
              padding: 4rpx 18rpx;
              background: #E84D38;
              border-radius: 26rpx;
            }

            .used {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #FFFFFF;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
              padding: 4rpx 18rpx;
              background: #CCCCCC;
              border-radius: 26rpx;
            }
          }
        }
      }

      .couponItemBottom {
        width: 100%;
        box-sizing: border-box;
        padding: 0 50rpx 0 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;
        margin-top: 48rpx;
      }
    }
  }
}
</style>
