<template>
  <view class="Mall4j component-payment-method-selector">
    <radio-group
      class="ways"
      @change="changePayType"
    >
      <label
        v-if="appType > 2"
        class="item"
      >
        <view class="pay-name">
          <view class="img">
            <image src="@/package-activities/static/images/alipay.png" />
          </view>
          <view class="name">{{ $t('payment.PayWithAli') }}</view>
        </view>
        <radio
          value="aliPay"
          color="#fc1b35"

          :checked="payTypeStr==='aliPay'"
        />
      </label>
      <label
        v-if="paySettlementType!==1 || (paySettlementType===1 && appType<=2)"
        class="item"
      >
        <view class="pay-name">
          <view class="img">
            <image src="@/package-activities/static/images/wxpay.png" />
          </view>
          <view class="name">{{ $t('payment.payWithWeChat') }}</view>
        </view>
        <radio
          value="wechatPay"
          color="#fc1b35"
          :checked="payTypeStr==='wechatPay'"
        />
      </label>
      <label v-if="showBalancePay">
        <view class="item">
          <view class="pay-name">
            <view class="img">
              <image
                src="@/package-activities/static/images/balancePay.png"
              />
            </view>
            <view class="name">{{ $t('payment.balancePay') + `（当前余额：${wxs.parsePrice(totalBalance)[0]}.${wxs.parsePrice(totalBalance)[1] }）` }}</view>
          </view>
          <view class="check">
            <radio
              value="balancePay"
              color="#fc1b35"

              :checked="payTypeStr==='balancePay'"
            />
          </view>
        </view>
      </label>
    </radio-group>
  </view>
</template>
<script setup>
import util from '@/utils/util.js'
import { AppType } from '@/utils/constant.js'
const wxs = number()

defineProps({
  // 是否显示余额支付
  showBalancePay: {
    default: true,
    type: Boolean
  },
  // 当前用户余额
  totalBalance: {
    default: 0,
    type: Number || String
  }
})
const emit = defineEmits(['setPayType'])

const paySettlementType = ref(uni.getStorageSync('cloudPaySettlementType')) // 1:通联支付
// 默认支付类型  aliPay 支付宝   wechatPay 微信支付   balancePay 余额支付
const payTypeStr = ref('aliPay')
const appType = uni.getStorageSync('cloudAppType')

onMounted(() => {
  if (appType === AppType.MINI || appType === AppType.MP) {
    payTypeStr.value = 'wechatPay'
  }
  initPayType()
})
/**
 * 设置支付类型
 */
const initPayType = (PayType) => {
  PayType = PayType || payTypeStr.value
  emit('setPayType', util.setDefaultPayType(PayType))
}
/**
 * 修改支付类型
 */
const changePayType = (val) => {
  payTypeStr.value = val.detail.value
  initPayType(val.detail.value)
}

</script>

<style lang="scss" scoped>
.component-payment-method-selector{
  .ways {
    padding: 0 30rpx;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2rpx solid #f9f9f9;
      padding: 30rpx 0;
      .pay-name {
        display: flex;
        align-items: center;
        .img {
          width: 44rpx;
          height: 44rpx;
          font-size: 0;
        }
        .name {
          margin-left: 20rpx;
        }
      }
    }
  }
}
:deep(uni-radio .uni-radio-input:empty) {
    border-color:  #d1d1d1!important;
}
</style>
