<template>
    <app-view class="g-form">
        <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="凭证">
                    <template #input>
                        <Uploader v-model="fileList" name="fileList" :max-size="5 * 1024 * 1024" @oversize="onOversize"
                            max-count="1" :after-read="afterRead" :rules="formRules.fileList" />
                    </template>
                </Field>
            </CellGroup>
        </Form>
        <div class="g-form__time">
            <label>充值提现时间：{{ start }}-{{ end }}</label>
        </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 { ref } from 'vue'
import { Form, Field, CellGroup, Button, Uploader, FieldRule, FormInstance, Toast } from 'vant'
import { useDoDeposit } from '@/business/bank'
import { fullloading, dialog } from '@/utils/vant';
import { useNavigation } from '@/hooks/navigation'
import axios from 'axios';
import { getServiceUrl } from '@/services/http';
import { useUserStore } from '@/stores'

const formRef = ref<FormInstance>()
const { formData, onSubmit, extendInfo } = useDoDeposit()
const { router } = useNavigation()
const { getSystemParamValue } = useUserStore()
const start = getSystemParamValue('012')
const end = getSystemParamValue('013')

/// 证件正面地址
const fileList = ref([]);

const afterRead = (file: any) => {
    file.status = 'uploading';
    file.message = '上传中...';

    var data = new FormData()
    data.append('file', file.file)
    const config = { headers: { "Content-type": "multipart/form-data" } }

    /// 图片上传
    axios.post(getServiceUrl('uploadUrl'), data, config).then(res => {
        /// 上传成功
        if (res.status == 200) {
            file.status = 'success';
            file.message = '上传成功';
            /// 赋值
            extendInfo.certificate_photo_url = res.data[0].filePath
        } else {
            file.status = 'failed';
            file.message = '上传失败';
        }
    })
};

const onOversize = () => {
    Toast('图片大小不能超过 5Mb')
};

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

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

</script>

<style lang="less">
.g-form {
    &__time {
        color: #999;
        padding-left: 15px;
    }
}
</style>