<template>
  <div>
    <div @click="changePayType(thirdPayInfo)">
      <div class="groupCard">
        <PayCardItem
          :is-group-pay="true"
          :value="creditPayInfo"
          :coupon-info="couponInfo"
          :show-coupon="showCoupon"
          :risk-limit="riskLimit"
          :coupon-disabled="couponDisabled"
        />
      </div>
      <div class="dashed">
        <p class="dashed-line" />
        <cr-image
          src="@/assets/images/pay/addicon.png"
          width="24px"
          height="24px"
          class="dashed-icon"
        />
        <cr-checkbox
          v-model="thirdPayInfo.isCheck"
          shape="round"
          checked-color="#EC1500"
          :disabled="disabled || thirdPayInfo.disabled"
          class="dashed-checkbox"
          @click.native="changePayType(thirdPayInfo)"
        />
      </div>
      <div class="groupCard">
        <PayCardItem :is-group-pay="true" :value="thirdPayInfo" />
      </div>
    </div>
    <p class="group-more b-t" @click="openMore">更多支付组合<cr-icon type="arrow" size="15px" /></p>
    <cr-popup v-model="morePopup" round position="bottom" :style="{ height: '30%' }" closeable>
      <p class="more-title">更换支付组合</p>
      <PayCardItem
        v-for="item in thirdPayList"
        :key="item.payType"
        :value="item"
        :coupon-info="couponInfo"
        :show-coupon="showCoupon"
        :risk-limit="riskLimit"
        @click="morePopup = false"
      />
    </cr-popup>
  </div>
</template>
<script>
import PayCardItem from './PayCardItem.vue';
export default {
  name: 'PayGroupCard',
  inject: ['payCard', 'pay'],
  components: {
    PayCardItem
  },
  props: {
    value: Object,
    payType: Number,
    disabled: Boolean,
    couponInfo: Object,
    showCoupon: Boolean,
    riskLimit: Boolean,
    couponDisabled: Boolean
  },
  data() {
    return {
      morePopup: false,
      thirdPayList: [],
      creditPayInfo: this.value.creditPayInfo || {}
    };
  },
  computed: {
    thirdPayInfo: function() {
      let temp = {};
      for (const key in this.value) {
        if (this.value[key].isRecommend || this.value[key].isCheck) {
          const mergePayPretreatmentInfo = this.value[key]?.mergePayPretreatmentInfo || {};
          temp = {
            ...this.value[key],
            payAmt: mergePayPretreatmentInfo?.otherPayAmt
          };
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.creditPayInfo.payAmt = mergePayPretreatmentInfo.creditPayAmt;
        }
      }
      return temp;
    }
  },
  mounted() {
    for (const key in this.value) {
      if (this.value[key].isGroupPay) {
        this.thirdPayList.push(this.value[key]);
      }
    }
  },
  methods: {
    changePayType({ payType, mergePayPretreatmentInfo }) {
      if (this.disabled || this.creditPayInfo.disabled) {
        return;
      }
      this.pay.changePayType(payType, mergePayPretreatmentInfo);
    },
    openMore() {
      this.morePopup = true;
    }
  }
};
</script>
<style lang="less">
.groupCard {
  width: 100%;
}
.group-more {
  .text-13;
  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 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.more-title {
  .text-16;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  color: @black;
  position: relative;
}
</style>
