<template>
  <view>
    <view v-for="(item, index) in List" :key="index">
      <view :class="`youhuiItem ${itemClass}`">
        <view class="centerbg">
          <view class="centerView" style="position: relative"
            ><text
              v-if="source == 'mine'"
              class="border_radius_10"
              style="
                position: absolute;
                right: 10rpx;
                top: 10rpx;
                font-size: 25rpx;
                /* background-color: #fad4bd; */
                color: #ed2a2e;
              "
              >{{ item.couponEntity.couponRange | couponType }}</text
            >
            <view style="color: #fd4347; width: 200rpx">
              <view
                style="position: relative; border-right: 1px dashed #fa8277"
              >
                <text
                  style="
                    font-weight: 700;
                    font-size: 40rpx;
                    position: absolute;
                    top: 20rpx;
                    left: 0rpx;
                  "
                  >￥</text
                >
                <text
                  style="
                    font-size: 64rpx;
                    letter-spacing: 0.1px;
                    font-weight: 700;
                    margin-left: 40rpx;
                  "
                  >{{ item.couponEntity.couponAmount }}</text
                >
                <text
                  v-if="source == 'mine'"
                  style="
                    display: block;
                    color: #333;
                    font-size: 25rpx;
                    margin-left: 0rpx;
                    margin-top: 0rpx;
                  "
                  >满{{ item.couponEntity.useLevel }}元可用</text
                >
              </view>
            </view>
            <view style="width: calc(100% - 220rpx)">
              <view>
                <view
                  style="color: #fd4347; font-size: 44rpx; font-weight: bold"
                  >{{
                    item.couponEntity.couponType == 0 ? "现金" : "折扣"
                  }}优惠券

                  <!-- <text v-if="source == 'mine'"  style="box-sizing: border-box;padding:4rpx 20rpx;margin-left: 10rpx;font-size: 24rpx;background-color: #fff;border-radius: 24rpx;float: right;">去使用</text> -->
                </view>

                <text
                  v-if="source != 'goodsDetail'"
                  style="
                    display: block;
                    font-size: 24rpx;
                    color: #333;
                    margin-top: 10rpx;
                  "
                  >有效期至：{{
                    item.effectType == 0 ? "永久有效" : item.endTime
                  }}</text
                >
              </view>
            </view>
          </view>
        </view>

        <view class="bottombg">
          <view
            style="
              width: 100%;
              padding: 16rpx 20rpx;
              box-sizing: border-box;

              margin-right: 6rpx;
              position: absolute;
              bottom: 0rpx;
              text-align: center;
            "
          >
            <view
              class="title"
              style="
                line-height: 34rpx;
                margin-bottom: 10rpx;
                color: #fff;
                font-size: 34rpx;
                font-weight: bold;
              "
            >
              {{ item.couponEntity.couponName }}
            </view>
            <view
              v-if="item.couponEntity.remark"
              style="
                position: absolute;
                right: 10rpx;
                bottom: 10rpx;
                display: flex;
                align-items: center;

                font-size: 22rpx;
                color: #fafafa;
              "
            >
              <!-- 详细信息
                  <u-icon
                    size="20rpx"
                    color="#fafafa"
                    style="color: #fafafa; float: right;margin-left: 4rpx;"
                    name="arrow-down-fill"
                  ></u-icon> -->
            </view>
          </view>
        </view>
      </view>

      <u-collapse
        v-if="source != 'goodsDetail' && item.couponEntity.remark"
        style="
          margin-top: 0rpx;
          z-index: 10 !important;
          background-color: #fafafa;
          border-bottom-left-radius: 10rpx;
          border-bottom-right-radius: 10rpx;
        "
        :border="false"
      >
        <u-collapse-item title="详细信息" name="Docs guide">
          <view
            style="
              font-size: 22rpx;
              width: 100%;
              margin-right: 20rpx !important;
            "
            >使用说明：{{ item.couponEntity.remark }}</view
          >
        </u-collapse-item>
      </u-collapse>
    </view>
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
import { mapState } from "vuex";
export default {
  props: ["List", "source", "itemClass"],
  data() {
    return {};
  },

  filters: {
    couponType(type) {
      // 0无限制 1课程卷 2课程品类卷
      var str = "";
      switch (type) {
        case 0:
          str = "全场通用";
          break;
        case 1:
          str = "指定课程可用";
          break;
        case 2:
          str = "指定课程品类可用";
          break;
      }
      return str;
    },
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.youhuiItem {
  min-height: 320rpx;
  position: relative;
  background: linear-gradient(to top right, #fd4c50, #fe393d);

  border: 1px solid #d9d9d9;
  border-radius: 10rpx;
  width: 100%;

  padding: 26rpx;
  margin: 25rpx 0 0 0;
  align-items: center;
  background-color: #fff;
  font-size: 30rpx;
}

.centerbg {
  width: 100%;
  background-image: linear-gradient(60deg, #ffefd3 0%, #f8be85 100%);

  height: calc(100%);
  border-radius: 10rpx;
  padding-bottom: 86rpx;

  box-sizing: border-box;
}

.centerView {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 30rpx 20rpx 0 40rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bottombg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: url("@/static/icon/coupon/bottom.png") !important;
}

.youhuiItem > view {
}

.youhuiItem.youItem_style {
  border-color: #fd6004;
}

/deep/ .u-cell__body {
  padding-top: 0 !important ;
  padding-bottom: 0 !important ;
  z-index: 10 !important ;
  .u-cell__title-text {
    color: #333 !important;
    font-size: 24rpx !important;
  }
}

/deep/ .u-collapse-item__content__text {
  padding: 10rpx 20rpx !important;
  box-sizing: border-box;
}

/deep/.itemCouponClass {
  min-height: 180rpx !important;
  .bottombg {
    .title {
      font-size: 26rpx !important;
    }
  }
  .centerbg {
    padding-bottom: 60rpx !important;
  }
}
</style>
