<template>
  <div class="coupon"  v-if="column === 1">
    <div class="coupon-item_one" :style="style" :key="index" v-for="(coupon, index) in couponList">
      <div class="Gi_one-left">
        <p>¥<span>{{ coupon.faceValue || '-' }}</span></p>
        <p>{{coupon.limitDesc}}</p>
      </div>
      <div class="Gi_one-middle">
        <p>{{ coupon.name }}</p>
        <p>{{ coupon.couponValidTime }}</p>
      </div>
      <cr-button class="Gi_one-right" type="primary" @click="pickupCoupon(coupon)">{{btnText(coupon.pickupAble)}}</cr-button>
      <div class="coupon-item-mask" v-if="!coupon.pickupAble && coupon.publishCountFinished">
        <p>已抢空</p>
      </div>
    </div>
  </div>
  <div v-else :class="['coupon', {'coupon_two': column === 2, 'coupon_multiple': column === 3}]">
    <div class="coupon-item" :style="style" :key="index" v-for="(coupon, index) in couponList">
      <p class="coupon-item-title">{{ coupon.name }}</p>
      <p class="coupon-item-amount">¥<span>{{ coupon.faceValue || '-' }}</span></p>
      <p class="coupon-item-amount">{{coupon.limitDesc}}</p>
      <cr-button shape="circle" type="primary" @click="pickupCoupon(coupon)">
        {{btnText(coupon.pickupAble)}}
      </cr-button>
      <div class="coupon-item-mask" v-if="!coupon.pickupAble && coupon.publishCountFinished">
        <p>已抢空</p>
      </div>
    </div>
  </div>
</template>
<script>
  import operationApi from '@api/operation.api';
  
  export default {
    inject: ['editor'],
    props: {
      couponsList: Array,
      couponsNumber: Number,
      column: {
        type: Number,
        default: 3
      },
      bgImage: String,
      bgColor: {
        type: String,
        default: '#fff'
      }
    },
    data() {
      return {
        list: []
      }
    },
    computed: {
      couponList() {
        if (this.editor) this.$nextTick(() =>this.editor.adjustHeight());
        return this.list.slice(0, this.couponsNumber);
      },
      style() {
        return {
          background: this.bgImage ? `url(${this.bgImage}) no-repeat 0 0 / cover` : '',
          backgroundColor: this.bgColor
        }
      }
    },
    watch: {
      couponsList: {
        handler: async function (newVal) {
          if(newVal) this.getCoupons(newVal);
        },
        immediate: true
      }
    },
    methods: {
      async pickupCoupon(coupon) {
        if (!coupon.pickupAble) {
          await operationApi.pickupCoupon({ couponId: coupon.id });
          this.$toast.success('领取成功');
          await this.getCoupons([coupon.id]);
        } else {
          window.location.href = coupon.navUrl;
        }
      },
      async getCoupons(ids) {
        const { coupons } = await operationApi.getCoupons({ couponIds: ids.join(',') });
        if(coupons && coupons.length) this.list = coupons;
      },
      btnText(pickupAble) {
        return pickupAble ? '去使用' : '立即领取';
      }
    }
  }
</script>
<style lang="less" scoped>
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .coupon {
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    font-size: 0;
    &-item {
      position: relative;
      padding: 4px 8px;
      display: inline-flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 88px;
      text-align: center;
      background: url('./images/coupon-bg@2x.png')  no-repeat 0 0 / cover;
      font-size: 12px;
      line-height: 18px;
      &:last-child {
        margin-right: 0;
      }
      &-title {
        color: #EC1500;
      }
      &-amount {
        color: #EC1500;
        span {
          font-size: 20px;
          line-height: 26px;
          font-weight: 600;
        }
      }
      &-condition {
        color: #999999;
      }

      &-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: 0.7;
        p {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 66px;
          height: 66px;
          line-height: 66px;
          text-align: center;
          border-radius: 50%;
          background-color: #000;
          color: #fff;
          font-weight: 600;
        }
      }
    }

    &_multiple {
      overflow-x: auto;
      white-space: nowrap;
      padding: 0 4px;
      .coupon-item {
        width: 114px;
        margin-right: 4px;
      }
    }

    &_two {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .coupon-item {
        margin-bottom: 8px;
        width: 170px;
        &_empty {
          padding: 0;
          margin: 0;
          height: 0;
        }
      }
    }

    &-item_one {
      position: relative;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      .Gi_one-left {
        position: relative;
        padding: 8px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 90px;
        &:after {
          content: "";
          position: absolute;
          right: 0;
          height: 100%;
          border-style: dashed;
          border-width: 0 1px 0 0;
          border-color: #EC3333;
          transform:scaleX(.5);
        }
        p {
          line-height: 18px;
          color: #EC3333;
          span {
            font-size: 20px;
            line-height: 26px;
            font-weight: 600;
          }
        }
      }
      .Gi_one-middle {
        flex: 1;
        padding: 8px 0;
        margin-left: 8px;
        text-align: left;
        p {
          &:first-child {
            font-size: 14px;
            line-height: 20px;
            font-weight: 600;
          }
          &:last-child {
            line-height: 24px;
          }
        }
      }
      .Gi_one-right {
        width: 56px;
        height: 80px !important;
      }
    }

    // 组件库替换变量处理
    /deep/ .cr-button--primary {
      height: 20px;
      line-height: 20px;
      border: 0;
      font-size: 12px;
      background: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
    }
  }
</style>