<template>
  <view>
    <!-- 优惠券弹出 -->
    <u-popup :show="youhuiShow" :round="10" @close="closePup">
      <view class="tanchu">
        <view class="dp_title">请选择优惠券</view>
        <template v-if="list.length > 0">
          <view style="max-height: 40vh; overflow-y: scroll">
            <view v-for="(item, index) in list" :key="index">
              <view
                :class="`youhuiItem ${
                  youhuiIndex === index ? ' youItem_style' : ''
                } ${item.canUse === 0 ? 'disableSelect' : ''}`"
                @click="choseYouhui(index)"
                ><text
                  class="border_radius_10"
                  style="
                    position: absolute;
                    top: 10rpx;
                    right: 10rpx;
                    font-size: 25rpx;
                    background-color: #ffe3e9;
                    color: #c81346;
                    padding: 6rpx;
                  "
                  >{{ item.couponEntity.couponRange | couponType }}</text
                >
                <view
                  style="width: 25%; color: #ff0043; text-align: center"
                  class="couponPrice"
                >
                  <text>￥</text>
                  <b style="font-size: 45rpx">{{
                    item.couponEntity.couponAmount
                  }}</b>
                  <text
                    class="useLevel"
                    style="
                      display: block;
                      color: #666;
                      font-size: 25rpx;
                      margin-top: 10rpx;
                    "
                    >满{{ item.couponEntity.useLevel }}元可用</text
                  >
                </view>
                <view style="width: 68%; padding-left: 5%">
                  <view>
                    <text
                      style="
                        display: inline-block;
                        margin-right: 6rpx;
                        line-height: 36rpx;
                      "
                      >{{ item.couponEntity.couponName }}</text
                    >
                  </view>
                  <text
                    style="
                      display: block;
                      font-size: 22rpx;
                      color: #999;
                      margin-top: 10rpx;
                    "
                    >有效期至：{{
                      item.effectType == 0 ? "永久有效" : item.endTime
                    }}</text
                  >
                  <template v-if="item.canUse == 0">
                    <view
                      class=""
                      style="font-size: 20rpx; display: inline-block"
                    >
                      <text style="color: #333">不可用原因：</text>
                      <text style="color: #333">{{ item.canUseReason }}</text>
                    </view>
                  </template>
                </view>
                <view
                  style="width: 7%; position: absolute; right: 20rpx; top: 43%"
                >
                  <!-- <view class="" style="background-color: #d9d9d9; border-radius: 10rpx; 0 0 10rpx; text-align: center;" v-if="item.canUse == 0">
								<text 
									style="color: #999; "
									>不可用</text>
							</view> -->

                  <template v-if="item.canUse == 1">
                    <text
                      style="
                        border: 1px solid #d9d9d9;
                        width: 35rpx;
                        height: 35rpx;
                        display: inline-block;
                        border-radius: 30rpx;
                      "
                      v-if="youhuiIndex !== index"
                    ></text>

                    <u-icon
                      name="checkmark-circle-fill"
                      color="#fd6004"
                      size="20"
                      v-if="youhuiIndex === index"
                    >
                    </u-icon>
                  </template>
                </view>
                <br clear="both" />
              </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
                    v-if="item.couponEntity.remark"
                    style="
                      font-size: 22rpx;
                      width: 100%;
                      margin-right: 20rpx !important;
                    "
                    >使用说明：{{ item.couponEntity.remark }}</view
                  >
                </u-collapse-item>
              </u-collapse>
            </view>

            <!-- <view style="font-size: 20rpx;color: #aaa;margin-top: 30rpx;">* 每笔订单只能使用一张优惠价</view> -->
          </view>
          <view class="btnBox flex_box flex_between" v-if="selectcouponList.length>0">
            <view class="" style="width: 48%">
              <button type="default" @click="confirmCoupon('none')">
                不使用优惠券
              </button>
            </view>
            <view class="" style="width: 48%">
              <button type="primary" @click="confirmCoupon()">选好了</button>
            </view>
          </view>
          <view class="btnBox flex_box flex_between" v-else>
            <view class="" style="width: 100%">
              <button type="default" @click="confirmCoupon('none')">
                取消
              </button>
            </view>
           
          </view>
        </template>
        <view class="" v-else>
          <u-divider text="暂无可用优惠券哦"></u-divider>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "orderCoupon",
  props: ["list", "curCouponId", "sumMeony",'selectcouponList'],
  data() {
    return {
      youhuiShow: true,
      youhuiIndex: undefined,
    };
  },
  mounted() {
    console.log("进入了", this.curCouponId, this.sumMeony);
    if (this.curCouponId) {
      this.youhuiIndex = this.list.findIndex(
        (item) => item.couponEntity.id === this.curCouponId
      );
      console.log("查找后的结果", this.youhuiIndex);
    }
  },
  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: {},
  methods: {
    closePup() {
      this.youhuiIndex = undefined;
      this.$emit("close");
    },
    // 确定选中优惠券
    confirmCoupon(str) {
      console.log(str, "6666");
      if (str && str == "none") {
        // 清空优惠券操作
        this.$emit("confirmCoupon");
        setTimeout(() => {
          this.closePup();
        }, 300);
        return;
      }
      if (this.youhuiIndex == 0 || this.youhuiIndex) {
        this.$emit("confirmCoupon", this.list[this.youhuiIndex]);
        setTimeout(() => {
          this.closePup();
        }, 300);
      } else {
        uni.showToast({
          title: "请选择您要使用的优惠券",
          icon: "none",
        });
      }
    },
    // 选择优惠券
    choseYouhui(e) {
      if (this.list[e].canUse == 0) {
        return;
      }
      console.log("选中优惠券e", e);
      this.youhuiIndex = e;
    },
  },
};
</script>

<style lang="scss" scoped>
.btnBox {
  margin-top: 20rpx;
}

.tanchu {
  padding: 40rpx 30rpx 40rpx 30rpx;
  position: relative;
  // max-height: 60vh;
  // overflow-y: scroll;

  .dp_title {
    font-size: 32rpx;
    margin-bottom: 50rpx;
    color: #555;
    text-align: center;
    font-weight: bold;
  }

  .dp_add {
    position: absolute;
    top: 40rpx;
    right: 30rpx;
    font-size: 22rpx;
    background-color: #fd6004;
    color: #fff;
    border-radius: 10rpx;
    padding: 5rpx 10rpx;

    .u-icon {
      display: inline-block;
      margin-right: 5rpx;
    }
  }

  .addressItem {
    border: 2px dashed #d9d9d9;
    border-radius: 10rpx;
    width: 100%;
    display: flex;
    padding: 20rpx 10rpx;
    margin: 25rpx 0 0 0;
    align-items: center;
    background-color: #fff;

    .addrContent {
      margin-left: 40rpx;
      flex: 1;

      .addrContentTop {
        display: flex;
        align-items: flex-end;
        margin: 0 0 15rpx 0;
        position: relative;

        .userName {
          font-size: 35rpx;
          font-weight: bold;
          margin-right: 30rpx;
        }

        .userTel {
          font-size: 25rpx;
          color: #888;
        }

        .userMoren {
          border: 1px solid #fd6004;
          color: #fd6004;
          padding: 3rpx 10rpx;
          font-size: 22rpx;
          border-radius: 10rpx;
          margin: 0 0 0 20rpx;
        }

        .chooseCheck {
          position: absolute;
          top: 3rpx;
          right: 6rpx;
        }
      }

      .addrContentBottom {
        font-size: 32rpx;
      }
    }
  }

  .addressItem.addItem_style {
    border-color: #fd6004;
  }

  .youhuiItem {
    position: relative;
    background: linear-gradient(to top right, #fff, #fef2f4);

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

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

  .disableSelect {
    background: linear-gradient(to top right, #fafafa, #fafafa) !important;

    color: #979797 !important;
    .couponPrice {
      color: #979797 !important;
    }
    .useLevel {
      color: #979797 !important;
    }
    .border_radius_10 {
      color: #98989a !important;
      background-color: #fafafa !important;
    }
  }
  .youhuiItem > view {
    float: left;
  }

  .youhuiItem.youItem_style {
    border-color: #fd6004;
  }
}
::v-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;
    padding-left: 0 !important;
  }
}

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