<template>
  <view class="coupon-list">
    <view class="coupon-title">选择{{ feeTitle }}</view>
    <view class="coupon-list__list">
      <template v-if="list.length">
        <scroll-view :scroll-y="true" class="coupon-list__scroll">
          <view v-for="(info, index) in list" :key="index" @click="handleSelectCoupon(info.id)">
            <view v-if="couponType == 4" class="minus-list__item">
              <view class="minus-list__left">
                <view>{{ info.activityDesc }}</view>
                <text>活动有效期：{{ info.startDate }}-{{ info.endDate }}</text>
              </view>
              <view class="minus-list__right">
                <radio :value="index" color="#EC1500" :checked="info.isSelect" />
                <view class="coupon-list__radio--cover" />
              </view>
            </view>
            <view v-else class="coupon-list__item">
              <image v-if="info.iconUrl" :src="info.iconUrl" class="coupon-list__tag" />
              <view class="coupon-list__left">
                <view class="coupon-list__amount">
                  <text>{{ currency }}</text>
                  {{ info.faceValue }}
                </view>
                <view class="coupon-list__limit">{{ info.limitDesc }}</view>
              </view>
              <view class="coupon-list__content">
                <view class="coupon-list__desc">{{ info.name }}</view>
                <view class="coupon-list__date">{{ info.couponValidTime }}</view>
              </view>
              <view class="coupon-list__right">
                <radio :value="index" color="#EC1500" :checked="info.isSelect" />
                <view class="coupon-list__radio--cover" />
              </view>
            </view>
          </view>
        </scroll-view>
      </template>
      <view v-else class="coupon-list__empty"><empty text="暂无优惠券"/></view>
    </view>
    <view v-if="list.length" class="coupon-list__bottom">
      <button @click="handleRadioSubmit">确定</button>
    </view>
  </view>
</template>
<script>
import { getCouponChooseList } from "../api/home.api";
import Empty from "./empty";
import { TITLE_LIST } from "@/constants/order.js";
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: () => []
    },
    commonPopup: Number
  },
  data() {
    return {
      list: [],
      selectedCouponIndex: null
    };
  },
  computed: {
    selectedCoupon() {
      return this.list.filter(l => {
        if (l.isSelect) return l;
      });
    },
    feeTitle() {
      return TITLE_LIST[this.couponType];
    }
  },
  watch: {
    couponActivityInfoList: {
      handler() {
        this.getCouponChooseList();
      },
      deep: true,
      immediate: true
    },
    couponType: {
      handler: function() {
        this.getCouponChooseList();
      },
      deep: true,
      immediate: true
    },
    couponId: {
      handler: function() {
        this.getCouponChooseList();
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.getCouponChooseList();
  },
  methods: {
    handleSelectCoupon(num) {
      this.list.map(item => {
        if (item.id == num) {
          item.isSelect = !item.isSelect;
        } else {
          item.isSelect = false;
        }
      });
    },
    handleRadioSubmit() {
      this.$emit("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;
          u.couponCategory = this.couponType == 4 ? 4 : u.couponCategory;
          if (u.id == this.couponId) u.isSelect = true;
          else u.isSelect = false;
        });
        this.list = data;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.coupon-title {
  text-align: center;
  margin: 0 auto;
  padding-top: 30rpx;
  width: 50%;
  font-size: 36rpx;
}
.coupon-list {
  &__bottom {
    padding: 20rpx 40rpx 30rpx;
    position: relative;
    button {
      background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
      border-radius: 160rpx;
      height: 80rpx;
      font-size: 28rpx;
      line-height: 80rpx;
      color: #fff;
    }
  }

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

  &__item {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffece6;
    border-radius: 12rpx;
    padding: 37.5rpx 20rpx;
    margin-bottom: 20rpx;

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

      .cr-coupon-list__right {
        display: none;
      }
    }
  }
  &__radio--cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  &__tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 88rpx;
    height: 32rpx;
  }
  &__left {
    text-align: center;
    color: #ec3333;
  }

  &__amount {
    font-size: 60rpx;
    font-weight: 500;
    line-height: 72rpx;
    margin: 0;

    text {
      font-size: 32rpx;
      line-height: 44rpx;
    }
  }

  &__limit {
    font-size: 24rpx;
    color: #ec3333;
    line-height: 34rpx;
    margin: 0;
  }

  &__content {
    padding: 0 36rpx;
  }

  &__desc {
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 6rpx;
  }

  &__date {
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
  }

  &__right {
    margin-left: auto;
    position: relative;
    &.wx-radio-input {
      background-color: #ffece6 !important;
    }
    radio {
      transform: scale(0.8);
    }
  }
}
.minus-list {
  &__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12rpx;
    padding: 12rpx 20rpx;
    margin-bottom: 20rpx;
  }
  &__left {
    font-size: 28rpx;
    span {
      color: $font-color-base;
      font-size: 24rpx;
    }
  }
  &__right {
    margin-left: auto;
    position: relative;
    &.wx-radio-input {
      background-color: #ffece6 !important;
    }
    radio {
      transform: scale(0.8);
    }
  }
}
</style>
