<template>
  <div class="pay-type-list">
    <p class="type-title">{{ value.title }}</p>
    <payGroupItem
      v-if="value.isGroupPay"
      v-model="payList"
      :pay-type="payType"
      :disabled="disabled"
      :coupon-info="couponInfo"
      :show-coupon="showCoupon"
      :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
    />
    <template v-else>
      <template v-for="(item, key) of payList">
        <payCardItem
          v-if="item.show"
          :key="key"
          :pay-type="payType"
          :value="item"
          :disabled="disabled"
          :coupon-info="couponInfo"
          :show-coupon="showCoupon"
          :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
        />
      </template>
    </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,
    riskLimit: Boolean,
    showCoupon: Boolean,
    payCouponCouldBeUsed: Boolean,
    single: { type: Boolean, default: false },
    creditPay: { type: Boolean, default: false }
  },
  data() {
    return {
      payList: this?.value?.payList || {}
    };
  },
  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-16;
    font-weight: bold;
    padding-left: @padding-md;
    position: relative;
    line-height: 48px;
  }
}
</style>
