<template>
  <view v-if="couponList.length" class="banner-container">
    <view class="banner-title">本单已享以下权益</view>
    <swiper next-margin="25px">
      <block v-for="(item, index) in couponList" :key="index">
        <swiper-item class="banner-item">
          <view class="banner-box">
            <image src="https://img.lkbang.net/xcx/coupon_bg.13815473.png" class="banner-img" />
            <view class="banner-left">
              <view class="banner-left_left">
                ￥<text>{{ item.faceValue }}</text>
                <view>{{ item.couponType }}</view>
              </view>
              <view class="banner-left_center">
                <text>{{ item.name }} </text>
                <view>{{ item.couponValidTime }}</view>
              </view>
              <view class="banner-right" @click="goHome(item)">
                <button>立即查看</button>
              </view>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>
<script>
// import { guideStream } from "@/api/pay.api.js";
import { saTrackEvent } from "@/utils/sa.js";
export default {
  props: {
    couponList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // couponList: []
    };
  },
  watch: {
    couponList: {
      immediate: true,
      handler() {
        this.coupon();
      }
    }
  },
  methods: {
    goHome(data) {
      uni.switchTab({
        url: "/pages/index/index"
      });
      saTrackEvent("MINI_PaymentSuccessPageCouponClick", {
        coupon_type: data.couponType,
        coupon_value: data.faceValue,
        coupon_name: data.name
      });
    },
    async coupon() {
      // const [data, error] = await guideStream(this.list);
      // if (error || !data.couponList) return;
      this.couponList.map(item => {
        item.couponType = this.couponCate(item.couponCategory);
      });
      // this.couponList = data.couponList;
    },
    couponCate(type) {
      // ：1-满减券，2-运费券，3-现金券，21-享花券
      let name = "";
      switch (type) {
        case 1:
          name = "满减券";
          break;
        case 2:
          name = "运费券";
          break;
        case 3:
          name = "现金券";
          break;
        case 21:
          name = "享花券";
          break;
      }
      return name;
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/style/var.scss";
.banner-container {
  height: 276rpx;
  background-color: #fff;
  margin: $uni-spacing-col-md;
  overflow: hidden;
  padding-top: 20rpx;
  padding: 24rpx 16rpx;
  .banner-title {
    font-size: 28rpx;
    color: #ff4735;
    padding-left: 20rpx;
    padding-bottom: 10rpx;
  }
  .banner-item {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .banner-box {
    width: 606rpx;
    height: 180rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .banner-img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .banner-left {
      z-index: 1;
      display: flex;
      align-items: center;
      padding-right: 30rpx;
      &_left {
        margin-left: 70rpx;
        margin-right: 30rpx;
        color: $red-light;
        font-size: 38rpx;
        text-align: center;
        text {
          font-size: 40rpx;
        }
        view {
          font-size: 24rpx;
        }
      }
      &_center {
        text-align: centet;
        margin-right: 12rpx;
        text {
          display: inline-block;
          font-size: 28rpx;
          color: $black;
        }
        view {
          font-size: 18rpx;
          color: $gray-5;
        }
      }
    }
    .banner-right {
      border-left: 1px dashed #fed7c5;
      padding-left: 5rpx;
      z-index: 1;
      height: 70%;
      display: flex;
      align-items: center;
      button {
        background: $gradient-red;
        font-size: 24rpx;
        color: $white;
        height: 50rpx;
        line-height: 50rpx;
        /* #ifndef MP-ALIPAY */
        padding: 0 20rpx;
        /* #endif */
        margin-left: 14rpx;
        width: 136rpx;
      }
    }
  }
}
</style>
