<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 && !value.riskLimitDesc" class="coupon">
          <p class="couponDes" :class="{ disable: couponDisabled }" @click.stop="openCouponModal">
            <span v-if="couponInfo.pickupId">
              {{ `满${couponInfo.limitAmount}减${couponInfo.faceValue}元` }}
            </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>
  </div>
</template>
<script>
export default {
  name: 'PayCardItem',
  inject: ['payCard', 'pay'],
  props: {
    value: Object,
    payType: Number,
    disabled: Boolean,
    couponInfo: Object,
    riskLimit: Boolean,
    showCoupon: Boolean,
    isGroupPay: Boolean,
    couponDisabled: Boolean
  },
  methods: {
    changePayType({ payType, mergePayPretreatmentInfo }) {
      if (this.disabled || this.value.disabled || this.isGroupPay) {
        return;
      }
      this.$emit('click');
      this.pay.changePayType(payType, mergePayPretreatmentInfo);
    },
    openCouponModal() {
      if (this.couponDisabled) {
        this.$toast('优惠券不可更改');
        return;
      }
      this.pay.openCouponModal(this.pay.orderNo);
    }
  }
};
</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-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-12;
    &.disable {
      color: @font-color-disabled;
    }
  }
}
.limitDes {
  color: #ed6a0c;
  background: #fffbe8;
  .text-11;
  padding: 4px 8px;
  margin: 8px 8px 8px 4px;
  border-radius: 3px;
}
.type-item {
  width: 100%;
  padding: 12px 8px 12px 12px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  &-content {
    width: 100%;
  }
  &-content-info {
    width: 100%;
    display: flex;
    align-items: center;
  }
  &-checkbox {
    width: 18px;
  }
}
.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-12;
  color: @font-color-light;
}
.content-info-amount {
  width: 100px;
  text-align: left;
  word-break: break-all;
  &::before {
    content: '¥';
  }
  .text-15;
  color: @black;
}
.selectArrow {
  vertical-align: text-top;
  margin-left: -2px;
}
</style>
