<template>
  <div class="coupon-list">
    <h3 class="coupon-title">选择{{ feeTitle }}</h3>
    <div class="coupon-list__list">
      <template v-if="list.length">
        <div v-for="(info, index) in list" :key="index" @click="handleSelectCoupon(info.id)">
          <div v-if="couponType == 4" class="minus-list__item">
            <div class="minus-list__left">
              <p>{{ info.activityDesc }}</p>
              <span>活动有效期：{{ info.startDate }}-{{ info.endDate }}</span>
            </div>
            <div class="minus-list__right">
              <cr-icon v-if="info.isSelect" type="checked" color="#ec3333" size="25px" />
              <cr-icon v-else type="circle" color="#dcdcdc" size="25px" />
            </div>
          </div>
          <div v-else class="coupon-list__item">
            <img :src="info.iconUrl" class="coupon-list__tag" />
            <div class="coupon-list__left">
              <div class="coupon-list__amount">
                <span>{{ currency }}</span>
                {{ info.faceValue }}
              </div>
              <div class="coupon-list__limit">{{ info.limitDesc }}</div>
            </div>
            <div class="coupon-list__content">
              <div class="coupon-list__desc">{{ info.name }}</div>
              <div class="coupon-list__date">{{ info.couponValidTime }}</div>
            </div>
            <div class="coupon-list__right">
              <cr-icon v-if="info.isSelect" type="checked" color="#ec3333" size="25px" />
              <cr-icon v-else type="circle" color="#dcdcdc" size="25px" />
            </div>
          </div>
        </div>
      </template>
      <div v-else class="coupon-list__empty"><empty text="暂无优惠券" /></div>
    </div>
    <div v-if="list.length" class="coupon-list__bottom">
      <button @click="handleRadioSubmit">确定</button>
    </div>
  </div>
</template>
<script>
import { getCouponChooseList } from '@/api/home.api';
import { TITLE_LIST } from '@/constants/order';
import Empty from './empty';
export default {
  name: 'CouponList',
  components: {
    Empty
  },
  props: {
    couponId: {
      type: [String, Number],
      default: 0
    },
    couponType: [String, Number],
    currency: {
      type: String,
      default: '¥'
    },
    goodsInfo: {
      type: Array,
      default: () => []
    },
    couponActivityInfoList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: []
    };
  },
  computed: {
    selectedCoupon() {
      return this.list.filter(l => {
        if (l.isSelect) return l;
      });
    },
    feeTitle() {
      return TITLE_LIST[this.couponType];
    }
  },
  watch: {
    couponId: {
      handler() {
        this.getCouponChooseList();
      },
      immediate: true
    },
    couponType: {
      handler() {
        this.getCouponChooseList();
      },
      immediate: true
    }
  },
  methods: {
    handleSelectCoupon(num) {
      this.list.map(item => {
        if (item.id == num) {
          item.isSelect = !item.isSelect;
        } else {
          item.isSelect = false;
        }
      });
    },
    handleRadioSubmit() {
      this.$emit('coupon-select', this.selectedCoupon);
    },
    async getCouponChooseList() {
      if (!this.goodsInfo.length) return;
      this.list = [];
      const selectedSkuList = this.goodsInfo.map(item => {
        const { skuSource, count, skuId } = item;
        return {
          skuNo: skuId,
          skuNum: count,
          skuSource
        };
      });
      const selectedCouponActivityList = [];
      this.couponActivityInfoList.forEach(item => {
        selectedCouponActivityList.push({
          couponActivityType: item.couponActivityType,
          couponActivityUseId: item.couponActivityUseId
        });
      });
      const [res] = await getCouponChooseList({
        selectedSkuList,
        couponActivityType: this.couponType,
        selectedCouponActivityList
      });
      if ((res && res.coupons) || (res && res.activityList)) {
        const data = this.couponType == 4 ? res.activityList : res.coupons;
        data.forEach(u => {
          u.id = this.couponType == 4 ? u.activityId : u.pickupId;
          if (u.id == this.couponId) u.isSelect = true;
          else u.isSelect = false;
        });
        this.list = data;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.coupon-title {
  text-align: center;
  margin: 0 auto;
  margin-top: 15px;
  width: 50%;
  .text-18();
}
.coupon-list {
  &__bottom {
    padding: 10px 20px 15px 20px;
    position: relative;
    box-sizing: border-box;
    button {
      width: 100%;
      background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
      border-radius: 80px;
      height: 40px;
      .text-14();
      line-height: 40px;
      color: #fff;
    }
  }

  &__list {
    padding: 10px 10px 0;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 50vh;
  }
  &__scroll {
    height: 100%;
  }
  &__empty {
    padding-top: 50px;
  }

  &__item {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffece6;
    border-radius: 6px;
    padding: 18px 10px;
    margin-bottom: 10px;

    &--disabled {
      -webkit-filter: grayscale(100%) opacity(0.8); /* Chrome, Safari, Opera */
      filter: grayscale(100%) opacity(0.8);

      .cr-coupon-list__right {
        display: none;
      }
    }
  }
  &__tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 16px;
  }
  &__left {
    text-align: center;
    color: #ec3333;
  }

  &__amount {
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    margin: 0;

    text {
      font-size: 16px;
      line-height: 22px;
    }
  }

  &__limit {
    .text-12();
    color: #ec3333;
    line-height: 17px;
    margin: 0;
  }

  &__content {
    padding: 0 18px;
  }

  &__desc {
    .text-14();
    line-height: 20px;
    font-weight: 500;
    color: #333;
    margin-bottom: 3px;
  }

  &__date {
    .text-12();
    color: #666666;
    line-height: 17px;
  }

  &__right {
    margin-left: auto;
    .radio {
      width: 30px;
      height: 30px;
      display: block;
      transform: scale(0.8);
      background-color: red !important;
    }
  }
}
::v-deep .cr-icon {
  line-height: 28px !important;
}
.minus-list {
  &__list {
    padding: 10px 10px 0;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 50vh;
  }
  &__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 10px;
  }
  &__left {
    .text-14();
    span {
      color: @font-color-base;
      .text-12();
    }
  }
}
</style>
