<script setup lang="ts">
import {appUserCardSelectDefaultPost} from "@/service";
import useEventEmit from "@/hooks/useEventEmit";
import {EventEnum} from "@/constant/enums";
import { rechargeBalanceApi } from "@/pages-user/service";
const { t } = useI18n();

const amount = ref()

const payMethodOptions = ref({
  payMethod: 1,
  cardId: '',
  cardNumber: '',
})

function handleSubmit() {
  if(!amount.value) {
    uni.showToast({
      title: t('pages-user.recharge.description'),
      icon: 'none',
    })
    return
  }
  if(amount.value <= 0) {
    uni.showToast({
      title: t('pages-user.recharge.amount-invalid'),
      icon: 'none',
    })
    return
  }
  if(!payMethodOptions.value.cardId) {
    uni.showToast({
      title: t('pages-user.recharge.pay-method'),
      icon: 'none',
    })
    return
  }
  rechargeBalanceApi({
    payAmount: Number(amount.value),
    cardId: payMethodOptions.value.cardId,
    cardType: 1
  }).then(res => {
    console.log('充值余额', res)
    uni.showToast({
      title: t('pages-user.recharge.success'),
      icon: 'none',
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)
  })
}

function navigateTo(url: string) {
  uni.navigateTo({ url })
}

onLoad(()=> {
  // 查询用户默认信用卡
  appUserCardSelectDefault()
})

function appUserCardSelectDefault() {
  appUserCardSelectDefaultPost({}).then((res: any)=> {
    console.log('查询用户默认信用卡', res)
    payMethodOptions.value.cardId = res.data?.cardId || ''
    payMethodOptions.value.cardNumber = res.data?.cardNumber || ''
  })
}
useEventEmit(EventEnum.CHOOSE_PAYMENT_METHOD, (data) => {
  if(data) {
    payMethodOptions.value.cardId = data.cardId
    payMethodOptions.value.cardNumber = data.cardNumber
    payMethodOptions.value.payMethod = 1
  }
})
</script>

<template>
  <view class="">
    <navbar :title="t('pages-user.recharge.title')"/>

    <view class="px-20rpx py-22rpx">
      <view class="bg-white rounded-12rpx p-28rpx">
        <view class="text-30rpx lh-30rpx text-#333 font-500 mb-30rpx">
          {{ t('pages-user.recharge.amount') }}
        </view>
        <view class="flex items-center bg-#F7F7F7 h-108rpx rounded-12rpx px-26rpx">
          <wd-input
              v-model="amount"
              :focus-when-clear="false"
              :placeholder="t('pages-user.recharge.description')"
              clearable
              confirm-type="search"
              custom-class="!text-30rpx !bg-transparent flex-1"
              no-border
              placeholderStyle="font-size: 30rpx;color: #999;"
              type="number"
              use-prefix-slot
          >
          </wd-input>
        </view>
      </view>

      <view
          @click="navigateTo('/pages-user/pages/choose-paymethod/index?hideWallet=true')"
          class="bg-white rounded-12rpx p-28rpx mt-30rpx flex-center-sb text-32rpx lh-32rpx font-500 text-#333"
      >
        <view class="flex items-center">
          <image
              src="@img/chef/138.png"
              class="w-44rpx h-44rpx mr-28rpx shrink-0"
              mode="aspectFit"
          />
          <text class="">
            {{ t('pages-user.choosePaymethod.creditCard') }}
          </text>
        </view>
        <view class="flex items-center">
          <view class="mr-12px">
            <!--判断用户是否有信用卡-->
            <text v-if="!payMethodOptions.cardId">{{ t("pages-user.member.creditCard") }}</text>
            <text v-else>{{ payMethodOptions.cardNumber }}</text>
          </view>
          <image
              src="@img/chef/142.png"
              class="w-32rpx h-32rpx shrink-0"
              mode="aspectFit"
          />
        </view>
      </view>
    </view>

    <fixed-bottom-large-btn
        :text="t('common.recharge')"
        class="z-100"
        :fixed="true"
        @click="handleSubmit"
    />
  </view>
</template>

<style>
page {
  background-color: #F5F5F5;
}
</style>
<style scoped lang="scss">
:deep(.wd-input__clear) {
  background-color: transparent !important;
}

:deep(.wd-input__icon) {
  background-color: transparent !important;
}
</style>