<template>
  <div class="coupon-list">
    <cr-image
      src="@/assets/images/maxMember/coupon-title.png"
      width="2.6rem"
      height="2.13rem"
      class="coupon-list__title"
    />
    <div class="coupon-list__container">
      <coupon-item v-for="(item, index) in coupons" :key="index" :coupon="item" :index="index" />
    </div>
  </div>
</template>

<script>
import { pickupCoupon } from '@/api/coupon.api';
import couponItem from './couponItem.vue';
import { isApp, isWxMp } from '@/service/validation.service';
export default {
  components: {
    couponItem
  },
  props: {
    canPick: Boolean,
    coupons: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    async pickup(index) {
      const { id, receiverType, couponCategory, receiverLimitCount } = this.coupons[index];
      const [res] = await pickupCoupon({
        couponPickupList: [
          {
            couponId: id,
            couponType: couponCategory,
            pickupNum: receiverLimitCount
          }
        ],
        systemSendCoupon: receiverType === 2
      });
      if (res) {
        // 领取成功不会刷新接口
        this.$set(this.coupons[index], 'picked', true);
        this.$toast('领取成功！');
      }
    },
    async pickupTd(index) {
      if (!this.canPick) return this.$toast('请开通会员后领取');
      const that = this;
      if (isApp) {
        await that.pickup(index);
      } else if (isWxMp) {
        this.pickup(index);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.coupon-list {
  background: url('~@/assets/images/maxMember/coupon-container.png') left center no-repeat;
  background-size: 100%;
  margin: @padding-sm auto;
  width: 351px;
  height: 80px;
  position: relative;
  overflow: hidden;
  z-index: 2;
  border-radius: @border-radius-lg;
  display: flex;
  padding-right: 1px;
  &::before {
    content: ' ';
    display: block;
    width: 76px;
    height: 80px;
  }
  &__title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  &__container {
    height: 80px;
    display: flex;
    overflow-x: scroll;
    flex: 1;
    align-items: center;
    border-radius: @border-radius-lg;
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    &::before {
      content: ' ';
      display: block;
      flex-shrink: 0;
      height: 69px;
      width: @padding-md;
    }
    &::after {
      content: ' ';
      display: block;
      flex-shrink: 0;
      height: 69px;
      width: @padding-unit - 2;
    }
  }
}
</style>
