<template>
  <div class="payCardItem">
    <div
      :class="['type-item', { 'b-t': !isGroupPay || value.payType === 1 }]"
      @click="changePayType(value)"
    >
      <div class="type-item-content">
        <div class="type-item-content-info">
          <cr-image :src="value.icon" class="icon" mode="aspectFit" width="39" height="39" />
          <div class="content-info-con">
            <div class="content-info-tit">
              <div class="content-info-tit-wrap">
                <p class="content-info-tit">{{ value.name }}</p>
                <p v-if="value.tagName" class="content-info-tit_tag">{{ value.tagName }}</p>
              </div>
              <p v-if="isGroupPay && value.payAmt" class="content-info-amount">
                {{ value.payAmt }}
              </p>
            </div>
            <p>{{ value.accountStatusDesc }}</p>
          </div>
        </div>
        <div v-if="showCoupon && value.payType === 1" class="coupon">
          <p class="couponDes" :class="{ disable: couponDisabled }" @click.stop="openCouponModal">
            <span v-if="pay.selectNewPerson || couponInfo.pickupId">
              <span v-if="pay.selectNewPerson">
                <span>{{ newComerPromotionInfo.promotionTxt }}</span>
                <span v-if="couponInfo.pickupId">;</span>
              </span>
              <span v-if="couponInfo.pickupId">
                {{ `满${couponInfo.limitAmountNew}减${couponInfo.faceValueNew}元` }}
              </span>
            </span>
            <span v-else>
              未选择优惠券
            </span>
            <cr-icon type="arrow" class="selectArrow" size="15px" />
          </p>
        </div>
        <p v-if="value.riskLimitDesc" class="limitDes">
          {{ value.riskLimitDesc }}
        </p>
      </div>
      <cr-checkbox
        v-if="!isGroupPay"
        v-model="value.isCheck"
        shape="round"
        class="type-item-checkbox"
        checked-color="#EC1500"
        :disabled="disabled || value.disabled"
        @click.native="changePayType(value)"
      />
    </div>
    <ul
      v-if="
        (value.isCheck || isGroupPay) &&
          value.installmentInfo &&
          value.installmentInfo.detailList &&
          value.installmentInfo.detailList.length
      "
      class="type-item-installment"
      @click.stop="() => {}"
    >
      <li
        v-for="(item, i) in value.installmentInfo.detailList"
        :key="i"
        class="type-item-installment--item"
        :class="{ 'item--cur': item.checked }"
      >
        <div class="type-item-installment--item--wrapper" @click.stop="checkInstallment(i)">
          <template v-if="+item.principal">
            <div class="TIII__title">¥{{ item.principal }} x {{ item.term }}期</div>
            <div v-if="+item.complexFee" class="TIII__content">
              含综合服务费约¥{{ item.complexFee }}/期
            </div>
          </template>
          <template v-else>
            <div class="TIII__title">不分期</div>
            <div class="TIII__content">0服务费</div>
          </template>
        </div>
      </li>
      <li
        v-if="value.installmentInfo"
        class="type-item-installment--viewrate"
        @click.stop="onShowRate"
      >
        <i class="TIIV--icon">i</i>
        <span>查看费率</span>
      </li>
    </ul>
    <RateModal v-model="isShowRate" :info="value.installmentInfo" />
  </div>
</template>
<script>
import RateModal from './RateModal.vue';
export default {
  name: 'PayCardItem',
  inject: ['payCard', 'pay'],
  components: {
    RateModal
  },
  props: {
    value: Object,
    payType: Number,
    disabled: Boolean,
    couponInfo: Object,
    newComerPromotionInfo: Object,
    riskLimit: Boolean,
    showCoupon: Boolean,
    isGroupPay: Boolean,
    couponDisabled: Boolean
  },
  data() {
    return {
      isShowRate: false
    };
  },
  methods: {
    checkInstallment(i) {
      this.pay.changeInstallment(i, this.value.payMethod);
    },
    changePayType({ payMethod, payType, mergePayPretreatmentInfo }) {
      if (this.disabled || this.value.disabled || this.isGroupPay) {
        return;
      }
      this.$emit('click');
      this.pay.changePayType(payType || payMethod, mergePayPretreatmentInfo);
    },
    openCouponModal() {
      if (this.couponDisabled) {
        this.$toast('优惠券不可更改');
        return;
      }
      this.pay.openCouponModal(this.pay.orderNo);
    },
    onShowRate() {
      this.isShowRate = true;
    }
  }
};
</script>
<style lang="less" scoped>
.payCardItem {
  width: 100%;
  padding-bottom: 2px;
}
.coupon {
  margin-top: 4px;
  height: 20px;
  padding-left: 51px;
  display: flex;
}
.couponDes {
  display: inline-block;
  color: @text-color-red;
  .text-size(12);
  border: @border-width-base solid @text-color-light;
  border-radius: 3px;
  padding: 0 0 0 3px;
  &.disable {
    color: @font-color-disabled;
    border-color: @font-color-disabled;
  }
  text {
    color: @text-color-red;
    .text-size(12);
    &.disable {
      color: @font-color-disabled;
    }
  }
}
.limitDes {
  color: #ed6a0c;
  background: #fffbe8;
  .text-size(11);
  padding: 4px 8px;
  margin: 8px 0;
  border-radius: 3px;
}
.type-item {
  width: 100%;
  padding: 12px 8px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  &-content {
    width: 100%;
  }
  &-content-info {
    width: 309px;
    display: flex;
    align-items: center;
  }
  &-checkbox {
    width: 18px;
  }
  &-installment {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .text-size(14);
    padding: 0 8px;
    &--item {
      position: relative;
      width: 163px;
      margin-bottom: 8px;
      height: 48px;
      border-radius: 8px;
      .mx_order_one(#f7f8f9, solid, 8px);
      background-color: #f7f8f9;
      &--wrapper {
        height: 48px;
        padding: 6px 8px;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
      }
      .TIII__title {
        font-weight: bold;
        height: 20px;
        line-height: 20px;
      }
      .TIII__content {
        margin-top: 2px;
        height: 14px;
        .text-size(10);
        color: @text-grey;
      }
    }
    .item--cur {
      background-color: #fff7f7;
      .mx_order_one(@red, solid, 8px);
      color: @red;
      .TIII__content {
        color: @red;
      }
    }
    &--viewrate {
      color: @gray-5;
      .text-size(12);
      display: flex;
      align-items: center;
      .TIIV--icon {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        position: relative;
        font-style: normal;
        color: @gray-3;
        border: 1px solid @gray-3;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        line-height: 1px;
        justify-content: center;
        .text-size(10);
        margin-right: 5px;
      }
    }
  }
}
.icon {
  width: 39px;
  height: 39px;
  margin-right: @padding-sm;
}
.content-info-tit {
  font-size: 15px;
  color: @font-color-dark;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &-wrap {
    display: flex;
  }
  &_tag {
    display: inline-flex;
    align-items: center;
    height: 16px;
    border: @border-width-base solid @text-color-light;
    border-radius: 3px;
    font-size: 11px;
    color: @text-color-light;
    margin-left: @padding-unit;
    padding: 0 2px;
  }
}
.content-info-con {
  flex: 1;
  display: flex;
  flex-direction: column;
  .text-size(12);
  color: @font-color-light;
}
.content-info-amount {
  text-align: right;
  word-break: break-all;
  &::before {
    content: '¥';
  }
  .text-size(15);
  color: @black;
}
.selectArrow {
  vertical-align: text-top;
  margin-left: -2px;
}
</style>
