<template>
  <view class="coupon-list">
    <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"
            class="coupon-list__item"
            @click="handleSelectCoupon(info.pickupId)"
          >
            <image :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="info.pickupId"
                color="#EC1500"
                :checked="selectedCouponIndex === info.pickupId"
              />
            </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 "@/components/empty";
export default {
  name: "CouponList",
  components: {
    Empty
  },
  props: {
    value: null,
    currency: {
      type: String,
      default: "¥"
    },
    list: Array,
    update: Number
  },
  data() {
    return {
      selectedCouponIndex: null
    };
  },
  computed: {
    selectedCoupon() {
      return this.list.filter(item => item.pickupId === this.selectedCouponIndex);
    }
  },
  watch: {
    update: {
      immediate: true,
      handler(val) {
        if (val) this.selectedCouponIndex = this.value;
      }
    },
    value: {
      immediate: true,
      handler(val) {
        if (val) this.selectedCouponIndex = val;
      }
    }
  },
  methods: {
    handleSelectCoupon(index) {
      this.selectedCouponIndex = this.selectedCouponIndex === index ? -1 : index;
      this.$emit("selectCouponItem", this.selectedCouponIndex !== -1, this.selectedCoupon);
    },
    handleRadioSubmit() {
      this.$emit("select", this.selectedCoupon);
    }
  }
};
</script>
<style lang="scss" scoped>
.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: 70vh;
  }
  &__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;
      }
    }
  }
  &__tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 88rpx;
    height: 32rpx;
  }
  &__left {
    text-align: center;
    color: #ec3333;
    width: 176rpx;
  }

  &__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;
    &.wx-radio-input {
      background-color: #ffece6 !important;
    }
    radio {
      transform: scale(0.8);
    }
  }
}
</style>
