<template>
  <view @click="changePayType(thirdPayInfo)">
    <view class="groupCard">
      <payCardItem
        :is-group-pay="true"
        :value="creditPayInfo"
        :coupon-info="couponInfo"
        :show-coupon="showCoupon"
        :risk-limit="riskLimit"
        :pay-coupon-list="payCouponList"
        :coupon-disabled="couponDisabled"
      />
    </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>
</template>
<script>
import payCardItem from "./payCardItem";
export default {
  name: "PayGroupCard",
  components: {
    payCardItem
  },
  inject: ["payCard", "pay"],
  props: {
    value: Object,
    payType: Number,
    disabled: Boolean,
    couponInfo: Object,
    showCoupon: Boolean,
    riskLimit: Boolean,
    couponDisabled: Boolean,
    payCouponList: { type: Array, default: () => [] }
  },
  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="scss">
.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;
}
</style>
