<template>
    <app-view class="g-form bank-wallet-deposit">
        <Form ref="formRef" class="g-form__container" @submit="formSubmit">
            <CellGroup inset>
                <Field type="number" v-model="formData.Amount" label="充值金额" placeholder="请填写充值金额"
                    :rules="formRules.Amount" />
                <Field label="凭证" :rules="formRules.filePath">
                    <template #input>
                        <app-uploader @success="onUploadSuccess" />
                    </template>
                </Field>
            </CellGroup>
        </Form>
        <div class="g-form__time">
            <label>充值提现时间：{{ start }}-{{ end }}</label>
        </div>
        <div class="g-form__bank">
            <table cellspacing="10" cellpadding="0">
                <tr>
                    <td>
                        <span>企业名称:</span>
                        <span>上海徽行供应链有限公司</span>
                    </td>
                    <td>
                        <button type="button" data-clipboard-text="上海徽行供应链有限公司" v-copy="onCopy">复制</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <span>开户银行:</span>
                        <span>中信银行上海虹口支行</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>银行账户:</span>
                        <span>8110201012101533442</span>
                    </td>
                    <td>
                        <button ref="copy2" type="button" data-clipboard-text="8110201012101533442"
                            v-copy="onCopy">复制</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <span>(汇款备注:预付货款或合同转让款)</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <span>电话: 021-63138889， 13681901188</span>
                    </td>
                </tr>
            </table>
        </div>
        <template #footer>
            <div class="g-form__footer">
                <Button round block type="primary" @click="formRef?.submit()">确定</Button>
            </div>
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { Form, Field, CellGroup, Button, FieldRule, FormInstance, showFailToast, showSuccessToast } from 'vant'
import { useDoDeposit } from '@/business/bank'
import { fullloading, dialog } from '@/utils/vant'
import { useNavigation } from '@/hooks/navigation'
import { userStore } from '@/stores'
import AppUploader from '@mobile/components/base/uploader/index.vue'

const formRef = shallowRef<FormInstance>()
const { formData, onSubmit, extendInfo } = useDoDeposit()
const { router } = useNavigation()
const { getSystemParamValue } = userStore.actions
const start = getSystemParamValue('012')
const end = getSystemParamValue('013')

// 表单验证规则
const formRules: { [key in keyof Proto.t2bBankDepositReq | 'filePath']?: FieldRule[] } = {
    Amount: [{
        required: true,
        message: '请填写充值金额',
    }],
    filePath: [{
        message: '请上传转账凭证',
        validator: () => {
            return !!extendInfo.certificate_photo_url
        }
    }]
}

const onCopy = (status: boolean) => {
    if (status) {
        showSuccessToast('复制成功')
    } else {
        showFailToast('复制失败')
    }
}

const onUploadSuccess = (filePath: string) => {
    extendInfo.certificate_photo_url = filePath
}

const formSubmit = () => {
    fullloading((hideLoading) => {
        onSubmit().then(() => {
            hideLoading()
            dialog('充值申请提交成功，请等待审核。').then(() => {
                router.back()
            })
        }).catch((err) => {
            showFailToast(err)
        })
    })
}
</script>

<style lang="less">
@import './index.less';
</style>