<template>
    <app-view class="g-form">
        <template #header>
            <app-navbar>{{ bankInfo ? '修改签约用户' : '添加签约用户' }}</app-navbar>
        </template>
        <Form ref="formRef" class="g-form__container" @submit="formSubmit">
            <CellGroup inset>
                <Field name="OpenBankAccId" label="开户银行" :rules="formRules.OpenBankAccId" is-link>
                    <template #input>
                        <app-select v-model="formData.OpenBankAccId" placeholder="请选择开户银行" :options="banklist"
                            :optionProps="{ label: 'bankname', value: 'bankid' }" />
                    </template>
                </Field>
                <Field name="BankNo" label="银行卡号" v-model="formData.BankAccountNo" placeholder="请输入银行卡账号"
                    :rules="formRules.BankAccountNo" />
                <Field name="AccountName" label="姓名" readonly v-model="formData.BankAccountName" placeholder="请输入银行卡账户名"
                    :rules="formRules.BankAccountName" />
                <Field name="BranchBankName" label="支行名称" v-model="formData.OpenBankName" placeholder="请输入银行卡支行名称"
                    :rules="formRules.OpenBankName" />
            </CellGroup>
        </Form>
        <template #footer>
            <div class="g-form__footer">
                <Button type="primary" round block @click="formRef?.submit()">{{ bankInfo ? '修改' : '提交' }}</Button>
            </div>
        </template>
    </app-view>
</template>

<script lang="ts" setup>

import { shallowRef } from 'vue'
import { CellGroup, Button, Field, Form, FormInstance, FieldRule, Toast } from 'vant'
import { fullloading, dialog } from '@/utils/vant'
import { useDoBankSign } from '@/business/bank'
import { useNavigation } from '@/hooks/navigation'
import AppSelect from '@mobile/components/base/select/index.vue'
import { validateRules } from '@/constants/regex'

const { router } = useNavigation()
const { formData, onSubmit, banklist, bankInfo } = useDoBankSign()
const formRef = shallowRef<FormInstance>()

// 表单验证规则
const formRules: { [key in keyof Proto.t2bBankSignReq]?: FieldRule[] } = {
    OpenBankAccId: [{
        message: '请选择银行信息',
        validator: () => {
            return !!formData.OpenBankAccId
        }
    }],
    BankAccountNo: [{
        required: true,
        message: '请输入银行卡账号',
        validator: (val) => {
            if (validateRules.bankcardno.validate(val)) {
                return true
            }
            return validateRules.bankcardno.message
        }
    }],
    BankAccountName: [{
        required: true,
        message: '请输入银行卡账户名',
    }],
    OpenBankName: [{
        required: true,
        message: '请输入银行卡支行名称',
    }],
}

const formSubmit = () => {
    fullloading((hideLoading) => {
        onSubmit().then(() => {
            hideLoading()
            dialog(bankInfo ? '签约信息修改成功' : '签约提交成功，请耐心等待审核。').then(() => {
                router.back()
            })
        }).catch((err) => {
            Toast.fail(err)
        })
    })
}

</script>