<template>
  <view v-if="couponList.length" class="coupon">
    <view class="coupon-content">
      <view class="title">{{ title }}</view>
      <view
        class="content"
        :class="{
          oneCoupon: oneCoupon,
          showAllCoupon: couponList.length > 3 && showAllCoupon
        }"
      >
        <view v-for="(item, index) in couponList" :key="index" class="item">
          <view v-if="item.receiverStatus == 1" class="received" />
          <view class="value">
            <view class="value-content">
              <text class="number">{{ item.faceValue }}</text>
              <text class="unit">元</text>
            </view>
          </view>
          <view class="info">
            <view class="desc">{{ item.couponName }}</view>
            <view class="time">{{ item.startDate | format }}-{{ item.endDate | format }}</view>
          </view>
          <view class="receive">
            <button
              v-if="item.receiverStatus == 0"
              class="receive-button"
              @click="pickupCoupon(item.couponInfoId, index)"
            >
              立即领取
            </button>
          </view>
        </view>
      </view>
      <view v-if="couponList.length > 3" class="more" @click="toggle">
        <template v-if="!showAllCoupon">查看全部 <text class="iconfont icon-arrow-down"/></template>
        <template v-else>收起 <text class="iconfont icon-arrow-up"/></template>
      </view>
    </view>
  </view>
</template>
<script>
import { pickupCoupon } from "@/api/member.api";
export default {
  filters: {
    format(val) {
      return val ? val.replace(/-/g, ".") : "";
    }
  },
  props: {
    login: {
      type: Boolean,
      default: false
    },
    couponModule: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      couponList: [],
      title: "",
      showAllCoupon: false
    };
  },
  computed: {
    oneCoupon() {
      return this.couponList.length == 1 ? true : false;
    }
  },
  watch: {
    couponModule(val) {
      this.showAllCoupon = false;
      this.couponList = val.coupons || [];
      this.title = val.title || "";
    }
  },
  methods: {
    toggle() {
      this.showAllCoupon = !this.showAllCoupon;
    },
    async pickupCoupon(couponId, index) {
      if (!this.login) {
        this.$emit("handleLogin");
        return;
      }
      // 领取优惠券
      const [, err] = await pickupCoupon({
        couponPickupList: [
          {
            couponId,
            pickupNum: 1
          }
        ],
        systemSendCoupon: true
      });
      if (err) return;
      uni.showToast({
        title: "领取成功"
      });
      this.couponList[index].receiverStatus = 1;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/var.scss";
.coupon {
  padding-top: 26rpx;
  background: $gray-1;
  display: flex;
  justify-content: center;
  &-content {
    width: 702rpx;
    padding: 24rpx;
    box-sizing: border-box;
    background: $white;
    border-radius: 24rpx;
    .title {
      display: flex;
      align-items: center;
      color: $black;
      font-weight: $font-weight-bold;
      @include text-size(32);
    }
    .content {
      margin-top: $padding-sm;
      width: 100%;
      height: 540rpx;
      overflow: hidden;
      &.showAllCoupon {
        height: auto;
      }
      &.oneCoupon {
        height: 170rpx;
      }
      // height: 156rpx;
      .item {
        position: relative;
        width: 100%;
        height: 156rpx;
        background-image: url(https://img.lkbang.net/xcx/memberCenter/coupon_bg.png);
        background-size: cover;
        margin-bottom: 28rpx;
        display: flex;
        justify-content: space-between;
        &:last-child {
          margin-bottom: 0;
        }
        .received {
          position: absolute;
          top: -20rpx;
          right: -12rpx;
          width: 120rpx;
          height: 120rpx;
          background-image: url(https://img.lkbang.net/xcx/memberCenter/received.png);
          background-size: cover;
        }
        .value {
          flex-shrink: 0;
          width: 220rpx;
          margin-right: $padding-xs;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #a95000;
          &-content {
            display: flex;
            align-items: baseline;
            justify-content: center;
            .number {
              /* font-size: 88rpx; */
              font-size: 65rpx;
              font-weight: $font-weight-bold;
            }
            .unit {
              @include text-size(32);
            }
          }
        }
        .info {
          flex: 1;
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          color: #925018;
          overflow: hidden;
          .desc {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: $padding-unit;
            @include text-size(28);
            font-weight: $font-weight-bold;
          }
          .time {
            @include text-size(20);
          }
        }
        .receive {
          flex-shrink: 0;
          width: 190rpx;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          &-button {
            width: 148rpx;
            height: 52rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2rpx solid #55300f;
            border-radius: 32rpx;
            padding: 0 $padding-xs;
            color: #55300f;
            background: transparent;
            @include text-size(24);
          }
        }
      }
    }
    .more {
      margin-top: $padding-sm;
      text-align: center;
      color: $black;
      @include text-size(24);
      .iconfont {
        margin-left: $padding-unit;
        @include text-size(24);
      }
    }
  }
}
</style>
