<template>
  <div>
    <template v-if="value.isGroupPay">
      <div class="pay-type-list">
        <p class="type-title">推荐组合支付</p>
        <payGroupItem
          v-if="value.isGroupPay"
          v-model="payList"
          :pay-type="payType"
          :disabled="disabled"
          :coupon-info="couponInfo"
          :new-comer-promotion-info="newComerPromotionInfo"
          :show-coupon="showCoupon"
          :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
        />
      </div>
      <div
        v-if="otherPays && otherPays.payList && Object.keys(otherPays.payList).length"
        class="pay-type-list"
      >
        <p class="type-title">{{ otherPays.title }}</p>
        <template>
          <div v-for="(item, key) of otherPays.payList" :key="key" class="pay-type-list--item">
            <payCardItem
              v-if="item.show"
              :key="key"
              :pay-type="payType"
              :value="item"
              :disabled="disabled"
              :coupon-info="couponInfo"
              :new-comer-promotion-info="newComerPromotionInfo"
              :show-coupon="showCoupon"
              :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
            />
          </div>
        </template>
      </div>
    </template>
    <template
      v-else-if="
        (payList && Object.keys(payList).length) ||
          (otherPays && otherPays.payList && Object.keys(otherPays.payList).length)
      "
    >
      <div class="pay-type-list">
        <p class="type-title">{{ value.title }}</p>
        <div v-for="(item, key) of payList" :key="key" class="pay-type-list--item">
          <payCardItem
            v-if="item.show"
            :key="key"
            :pay-type="payType"
            :value="item"
            :disabled="disabled"
            :coupon-info="couponInfo"
            :new-comer-promotion-info="newComerPromotionInfo"
            :show-coupon="showCoupon"
            :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
          />
        </div>
        <template v-if="otherPays && otherPays.payList && Object.keys(otherPays.payList).length">
          <div v-for="(item, key) of otherPays.payList" :key="key" class="pay-type-list--item">
            <payCardItem
              v-if="item.show"
              :key="key"
              :pay-type="payType"
              :value="item"
              :disabled="disabled"
              :coupon-info="couponInfo"
              :new-comer-promotion-info="newComerPromotionInfo"
              :show-coupon="showCoupon"
              :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
            />
          </div>
        </template>
      </div>
    </template>
  </div>
</template>
<script>
import payCardItem from './PayCardItem';
import payGroupItem from './PayGroupCard.vue';
export default {
  name: 'PayCard',
  components: {
    payCardItem,
    payGroupItem
  },
  provide() {
    return {
      payCard: this
    };
  },
  props: {
    value: Object,
    payType: Number,
    payText: String,
    disabled: Boolean,
    couponInfo: Object,
    newComerPromotionInfo: Object,
    riskLimit: Boolean,
    showCoupon: Boolean,
    payCouponCouldBeUsed: Boolean,
    single: { type: Boolean, default: false },
    creditPay: { type: Boolean, default: false },
    otherPays: Object
  },
  data() {
    return {
      payList: this?.value?.payList || {}
    };
  },
  watch: {
    'value.payList'(v) {
      this.payList = v;
    }
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="less">
.pay-type-list {
  background-color: #fff;
  border-radius: @border-radius-sm;
  margin-top: @padding-sm;
  .type-title {
    height: 48px;
    .text-size(16);
    font-weight: bold;
    padding-left: @padding-xs;
    position: relative;
    line-height: 48px;
    border-bottom: 1px solid @border-color-line;
  }
  &--item {
    border-bottom: 1px solid @border-color-line;
  }
  .pay-type-list--item:last-child {
    border: 0;
  }
}
</style>
