<template>
  <view class="pay-type-list">
    <view class="type-title b-b">{{ title }}</view>
    <view @click="changePayType(thirdPayInfo)">
      <view class="groupCard">
        <view class="payCardItem">
          <view class="type-item">
            <view class="type-item-content">
              <view class="type-item-content-info">
                <image :src="thirdPayInfo.icon" class="icon" mode="aspectFit" />
                <view class="content-info-con">
                  <view class="content-info-tit">
                    <view class="content-info-tit-wrap">
                      <text class="content-info-tit">{{ thirdPayInfo.name }}</text>
                      <text v-if="thirdPayInfo.tagName" class="content-info-tit_tag">{{
                        thirdPayInfo.tagName
                      }}</text>
                    </view>
                    <text v-if="isGroupPay && thirdPayInfo.payAmt" class="content-info-amount">
                      {{ thirdPayInfo.payAmt }}
                    </text>
                  </view>
                  <text>{{ thirdPayInfo.accountStatusDesc }}</text>
                </view>
              </view>
              <!-- <view v-if="showCoupon && thirdPayInfo.payType === 1" class="coupon"> -->
              <view v-if="thirdPayInfo.payType === 1" class="coupon">
                <view
                  class="couponDes"
                  :class="{ disable: couponDisabled || !payCouponList.length }"
                  @click.stop="openCouponModal"
                >
                  <template v-if="couponInfo.pickupId">
                    {{ `满${couponInfo.limitAmountNew}减${couponInfo.faceValueNew}元` }}
                  </template>
                  <template v-else>
                    <!-- 未选择优惠券 -->
                    <template v-if="!payCouponList.length">暂无优惠券</template>
                    <template v-else>未选择优惠券</template>
                  </template>
                  <text
                    v-if="payCouponList.length"
                    :class="{ disable: couponDisabled }"
                    class="iconfont icon-arrow"
                /></view>
              </view>
              <view
                v-if="
                  thirdPayInfo.accountStatus === 5 &&
                    thirdPayInfo.miniFace === 1 &&
                    thirdPayInfo.riskManagementDesc
                "
                class="limitDes"
                >{{ thirdPayInfo.riskManagementDesc }}</view
              >
              <view v-else-if="thirdPayInfo.riskLimitDesc" class="limitDes">
                {{ thirdPayInfo.riskLimitDesc }}
              </view>
            </view>
            <radio
              v-if="!isGroupPay"
              :class="{ 'radio-cls': thirdPayInfo.payType === 1 }"
              :value="thirdPayInfo.payType"
              color="#EC1500"
              :checked="payType === thirdPayInfo.payType"
              :disabled="
                disabled ||
                  thirdPayInfo.disabled ||
                  (thirdPayInfo === 6 && thirdPayInfo.payType !== 6)
              "
              style="transform:scale(0.7)"
            />
            <!-- disabled || value.disabled || (payType === 6 && value.payType !== 6) -->
            <!-- @click.native="changePayType(value)" -->
          </view>
        </view>
      </view>
      <view class="dashed">
        <p class="dashed-line" />
        <image
          src="https://img.lkbang.net/xcx/addicon.png"
          width="24px"
          height="24px"
          class="dashed-icon"
        />
        <radio
          color="#EC1500"
          :checked="thirdPayInfo.isCheck"
          :disabled="disabled || thirdPayInfo.disabled"
          style="transform:scale(0.7)"
          @click.native="changePayType(thirdPayInfo)"
        />
      </view>
      <view class="groupCard">
        <!-- <payCardItem :is-group-pay="true" :value="thirdPayInfo" /> -->
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "PayGroupCard",
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      required: true
    }
  },
  computed: {
    thirdPayInfo() {
      const thirdPayInfo = this.value.creditPayList;
      return thirdPayInfo;
    }
  },
  created() {
    console.log(this.value);
  }
};
</script>
<style lang="scss">
.pay-type-list {
  background-color: #fff;
  border-radius: $border-radius-md;
  margin-top: $margin-base;
  .type-title {
    height: 96rpx;
    line-height: 96rpx;
    font-size: $uni-font-size-lg;
    font-weight: bold;
    padding-left: $padding-md;
    position: relative;
  }
}

.groupCard {
  width: 100%;
}
.group-more {
  font-size: $uni-font-size-md;
  width: 335px;
  height: 36px;
  margin: auto;
  display: flex;
  color: #ec1500;
  position: relative;
  align-items: center;
  justify-content: center;
}
.cr-popup--close-top-right {
  z-index: 2;
}
.dashed {
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  &-line {
    width: 310px;
    border-bottom: 1px dashed #dcdcdc;
  }
  &-checkbox {
    width: 18px;
  }
  &-icon {
    width: 42rpx;
    height: 42rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.more-title {
  font-size: $uni-font-size-lg;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  color: $black;
  position: relative;
}

@import "@/style/var.scss";
.payCardItem {
  padding-bottom: 2rpx;
}
/* .pay-border {} */
.coupon {
  margin-top: 8rpx;
  height: 40rpx;
  padding-left: 110rpx;
  display: flex;
}
.couponDes {
  display: inline-block;
  color: $text-color-red;
  font-size: $font-sm;
  border: 1rpx solid $text-color-light;
  border-radius: 8rpx;
  padding: 0 7rpx;
  &.disable {
    color: $border-gray;
    border-color: $border-gray;
  }
  text {
    color: $text-color-red;
    font-size: $font-sm;
    &.disable {
      color: $font-color-disabled;
    }
  }
}
.limitDes {
  color: #ed6a0c;
  background: #fffbe8;
  font-size: 22rpx;
  padding: 8rpx 16rpx;
  margin: 16rpx 16rpx 16rpx 8rpx;
  border-radius: 6rpx;
}
.type-item {
  // height: 134rpx;
  padding: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .radio-cls {
    position: absolute;
    right: 8px;
    top: 30px;
  }
  &-content {
    width: 100%;
  }
  &-content-info {
    width: 100%;
    display: flex;
    align-items: center;
  }
}
.icon {
  width: 78rpx;
  height: 78rpx;
  margin-right: $padding-md;
}

.content-info-tit {
  font-size: 30rpx;
  color: $font-color-dark;
  margin-bottom: 4rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &-wrap {
    display: flex;
  }
  &_tag {
    display: inline-flex;
    align-items: center;
    height: 36rpx;
    border: $border-sm solid $text-color-light;
    border-radius: $uni-border-radius-base;
    font-size: 22rpx;
    color: $text-color-light;
    margin-left: $margin-sm;
    padding: 0 5rpx;
  }
}

.content-info-con {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: $font-sm;
  color: $font-color-light;
}
.content-info-amount {
  width: 200rpx;
  text-align: left;
  word-break: break-all;
  &::before {
    content: "¥";
  }
  @include text-size(30);
  color: $black;
}
</style>
