<template>
  <view class="payCardItem">
    <view
      :class="['type-item', { 'pay-border': !isGroupPay || value.payType === 1 }]"
      @click="changePayType(value)"
    >
      <view class="type-item-content">
        <view class="type-item-content-info">
          <image :src="value.icon" class="icon" mode="aspectFit" />
          <view class="content-info-con">
            <view class="content-info-tit">
              <view class="content-info-tit-wrap">
                <text class="content-info-tit">{{ value.name }}</text>
                <text v-if="value.tagName" class="content-info-tit_tag">{{ value.tagName }}</text>
              </view>
              <text v-if="isGroupPay && value.payAmt" class="content-info-amount">
                {{ value.payAmt }}
              </text>
            </view>
            <text>{{ value.accountStatusDesc }}</text>
          </view>
        </view>
        <!-- <view v-if="showCoupon && value.payType === 1" class="coupon"> -->
        <view v-if="value.payType === 1" class="coupon">
          <view
            class="couponDes"
            :class="{ disable: couponDisabled || !payCouponList.length }"
            @click.stop="openCouponModal"
          >
            <template v-if="couponInfo.pickupId">
              {{ `满${couponInfo.limitAmountNew}减${couponInfo.faceValueNew}元` }}
            </template>
            <template v-else>
              <!-- 未选择优惠券 -->
              <template v-if="!payCouponList.length">暂无优惠券</template>
              <template v-else>未选择优惠券</template>
            </template>
            <text
              v-if="payCouponList.length"
              :class="{ disable: couponDisabled }"
              class="iconfont icon-arrow"
          /></view>
        </view>
        <view
          v-if="value.accountStatus === 5 && value.miniFace === 1 && value.riskManagementDesc"
          class="limitDes"
          >{{ value.riskManagementDesc }}</view
        >
        <view v-else-if="value.riskLimitDesc" class="limitDes">
          {{ value.riskLimitDesc }}
        </view>
      </view>
      <radio
        v-if="!isGroupPay"
        :class="{ 'radio-cls': value.payType === 1 }"
        :value="value.payType"
        color="#EC1500"
        :checked="payType === value.payType"
        :disabled="disabled || value.disabled || (payType === 6 && value.payType !== 6)"
        style="transform:scale(0.7)"
      />
      <!-- disabled || value.disabled || (payType === 6 && value.payType !== 6) -->
      <!-- @click.native="changePayType(value)" -->
    </view>
  </view>
</template>
<script>
import { saTrackEvent } from "@/utils/sa";
const payTypeE = [
  "PD_YXMMAEC_UserClickCashierSelectXiangHuaCardPay",
  "PD_YXMMAEC_UserClickCashierSelectWechatPay"
];
const payTypeMiniAppE = ["c_cashierselectxianghuacardpay", "c_cashierselectwechatpay"];
export default {
  name: "PayCardItem",
  inject: ["payCard", "pay"],
  props: {
    value: Object,
    payType: Number,
    disabled: Boolean,
    couponInfo: Object,
    showCoupon: Boolean,
    riskLimit: Boolean,
    isGroupPay: Boolean,
    couponDisabled: Boolean,
    payCouponList: { type: Array, default: () => [] }
  },
  data() {
    return {};
  },
  methods: {
    changePayType({ payType, mergePayPretreatmentInfo }) {
      if (this.disabled || this.value.disabled || this.isGroupPay) {
        if ((this.value.disabled && this.value.accountStatus) === 5) {
          this.pay.openConfigModal(
            "canUseAmt",
            "抱歉，您的本笔订单暂不支持享花卡支付，请您使用其他支付方式～"
          );
        }
        return;
      }
      this.pay.changePayType(payType, mergePayPretreatmentInfo);
      saTrackEvent(payTypeE[payType - 1], {
        order_id: this.pay.orderNo
      });
      uni.reportAnalytics(payTypeMiniAppE[payType - 1], {
        order_id: this.pay.orderNo,
        uuid: uni.getStorageSync("userAuthInfo").uuid || "",
        channel_id: uni.getStorageSync("vccChannel") || ""
      });
    },
    openCouponModal() {
      if (this.couponDisabled) {
        this.$api.msg("优惠卷不可更改");
        return;
      }
      this.payCouponList.length && this.pay.openCouponModal(this.pay.orderNo);
    }
  }
};
</script>
<style lang="scss">
@import "@/style/var.scss";
.payCardItem {
  padding-bottom: 2rpx;
}
/* .pay-border {} */
.coupon {
  margin-top: 8rpx;
  height: 40rpx;
  padding-left: 110rpx;
  display: flex;
}
.couponDes {
  display: inline-block;
  color: $text-color-red;
  font-size: $font-sm;
  border: 1rpx solid $text-color-light;
  border-radius: 8rpx;
  padding: 0 7rpx;
  &.disable {
    color: $border-gray;
    border-color: $border-gray;
  }
  text {
    color: $text-color-red;
    font-size: $font-sm;
    &.disable {
      color: $font-color-disabled;
    }
  }
}
.limitDes {
  color: #ed6a0c;
  background: #fffbe8;
  font-size: 22rpx;
  padding: 8rpx 16rpx;
  margin: 16rpx 16rpx 16rpx 8rpx;
  border-radius: 6rpx;
}
.type-item {
  // height: 134rpx;
  padding: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .radio-cls {
    position: absolute;
    right: 8px;
    top: 30px;
  }
  &-content {
    width: 100%;
  }
  &-content-info {
    width: 100%;
    display: flex;
    align-items: center;
  }
}
.icon {
  width: 78rpx;
  height: 78rpx;
  margin-right: $padding-md;
}

.content-info-tit {
  font-size: 30rpx;
  color: $font-color-dark;
  margin-bottom: 4rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &-wrap {
    display: flex;
  }
  &_tag {
    display: inline-flex;
    align-items: center;
    height: 36rpx;
    border: $border-sm solid $text-color-light;
    border-radius: $uni-border-radius-base;
    font-size: 22rpx;
    color: $text-color-light;
    margin-left: $margin-sm;
    padding: 0 5rpx;
  }
}

.content-info-con {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: $font-sm;
  color: $font-color-light;
}
.content-info-amount {
  width: 200rpx;
  text-align: left;
  word-break: break-all;
  &::before {
    content: "¥";
  }
  @include text-size(30);
  color: $black;
}
</style>
