<script lang="ts" setup>
import {appUserBankAddPost} from "@/service";
import {z} from 'zod'

const {t} = useI18n()

const model = reactive({
  card: '',
  name: '',
  phone: '',
  bankName: '',
})
const schema = z.object({
  bankName: z.string().min(1, t('pages-user.income.withdraw.bankNameTips')),
  card: z.string().min(1, t('pages-user.income.withdraw.cardTips')),
  name: z.string().min(1, t('pages-user.income.withdraw.nameTips')),
  phone: z.string().min(1, t('pages-user.income.withdraw.phoneTips'))
})

function handleSubmit() {
  const result = schema.safeParse(model)
  if (!result.success) {
    // 取第一个错误信息
    const msg = result.error.errors[0]?.message
    uni.showToast({
      title: msg,
      icon: "none",
    });
    return
  }

  appUserBankAddPost({
    body: {
      ...model
    }
  }).then((res) => {
    uni.showToast({
      title: t('toast.submitSuccess'),
      icon: 'none',
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)
  })
}
</script>
<template>
  <view class="bg-white">
    <navbar :title="t('pages-user.income.withdraw.addCard')"/>
    <wd-input
        v-model="model.bankName"
        :label="t('pages-user.income.withdraw.bankName')"
        :placeholder="t('common.placeholder.pleaseEnter')"
        clearable
        label-width="140px"
        maxlength="20"
        placeholder-class="text-#A4A4A4 text-28rpx text-right"
        prop="beneficiaryBank"
    />
    <wd-input
        v-model="model.card"
        :label="t('pages-user.income.withdraw.card')"
        :placeholder="t('common.placeholder.pleaseEnter')"
        clearable
        label-width="140px"
        maxlength="20"
        placeholder-class="text-#A4A4A4 text-28rpx text-right"
        prop="bankCardNumber"
        type="number"
    />
    <wd-input
        v-model="model.name"
        :label="t('pages-user.income.withdraw.name')"
        :placeholder="t('common.placeholder.pleaseEnter')"
        clearable
        label-width="100px"
        maxlength="20"
        placeholder-class="text-#A4A4A4 text-28rpx text-right"
        prop="surname"
    />
    <wd-input
        v-model="model.phone"
        :label="t('pages-user.income.withdraw.phone')"
        :placeholder="t('common.placeholder.pleaseEnter')"
        clearable
        label-width="100px"
        maxlength="20"
        placeholder-class="text-#A4A4A4 text-28rpx text-right"
        prop="firstName"
    />
  </view>

  <view class="mt-192rpx px-30rpx">
    <wd-button class="!bg-gradient-primary !rounded-16rpx w-full !h-98rpx text-#fff text-28rpx" @click="handleSubmit">
      {{ t('common.confirm') }}
    </wd-button>
  </view>
</template>
<style lang="scss" scoped>
page {
  background-color: #F5F5F5;
}

:deep(.uni-input-input) {
  text-align: right;
}
</style>