<template>
    <div class="app-form">
        <div class="app-form__header">
            <slot name="header"></slot>
        </div>
        <Form ref="formRef" class="register-form" @submit="formSubmit">
            <slot></slot>
        </Form>
        <div class="app-form__footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { Form, FormInstance } from 'vant'

const emit = defineEmits(['submit'])
const formRef = shallowRef<FormInstance>()

const formSubmit = () => {
    emit('submit')
}
</script>