<template>
    <app-view class="g-form account-certification">
        <template #header>
            <app-navbar title="实名认证" />
        </template>
        <Form ref="formRef" class="g-form__container" @submit="onSubmit">
            <CellGroup inset>
                <Field v-model="formData.username" name="username" label="姓名" placeholder="请输入用户姓名"
                    :rules="formRules.username" />
                <Field name="cardtype" label="证件类型" :rules="formRules.cardtype" is-link>
                    <template #input>
                        <app-select v-model="formData.cardtype" placeholder="请选择证件类型" :options="enums" />
                    </template>
                </Field>
                <Field v-model="formData.cardnum" name="cardnum" label="证件号码" placeholder="请输入证件号码"
                    :rules="formRules.cardnum" />
                <Field name="cardfrontphotourl" label="证件正面照片" :rules="formRules.cardfrontphotourl">
                    <template #input>
                        <Uploader v-model="frontList" max-count="1" :after-read="b_afterRead" />
                    </template>
                </Field>
                <Field name="cardbackphotourl" label="证件反面照片" :rules="formRules.cardbackphotourl">
                    <template #input>
                        <Uploader v-model="backList" max-count="1" :after-read="f_afterRead" />
                    </template>
                </Field>
            </CellGroup>
        </Form>
        <template #footer>
            <div class="g-form__footer">
                <Button type="primary" @click="formRef?.submit" round block>提交实名认证</Button>
            </div>
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, computed, ref } from 'vue'
import { CellGroup, Button, Field, Form, FormInstance, Uploader, Toast, FieldRule } from 'vant'
import { addAuthReq } from '@/business/user'
import { fullloading, dialog } from '@/utils/vant';
import { getCertificateTypeList } from "@/constants/account";
import AppSelect from '@mobile/components/base/select/index.vue'
import { useNavigation } from '@/hooks/navigation'
import axios from 'axios';
import { getServiceUrl } from '@/services/http';

const formRef = shallowRef<FormInstance>()
const { formData, formSubmit } = addAuthReq()
const { router } = useNavigation()

/// 证件正面地址
const backList = ref([]);
/// 证件背面地址
const frontList = ref([]);
/// 获取对应的证件枚举类型
const enums = computed(() => { return getCertificateTypeList().map(obj => { return { label: obj.label, value: obj.value } }) })

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

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

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

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

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

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

// 表单验证规则
const formRules: { [key in keyof Model.AddAuthReq]?: FieldRule[] } = {
    username: [{
        required: true,
        message: '请输入用户姓名',
    }],
    cardnum: [{
        required: true,
        message: '请输入证件号码',

    }],
    cardbackphotourl: [{
        required: true,
        message: '请上传证件背面照片',
    }],
    cardfrontphotourl: [{
        required: true,
        message: '请上传证件正面照片',
    }],
}

const onSubmit = () => {
    fullloading((hideLoading) => {
        formSubmit().then(() => {
            hideLoading()
            dialog('实名认证提交请求成功').then(() => {
                router.back()
            })
        }).catch((err) => {
            Toast.fail(err)
        })
    })
}

</script>