<script sepup>
    import { ref } from 'vue';
    const fullname = ref(''), login = ref(''), phone = ref(''), email = ref(''), password = ref('');
    let errorForm = ref('');
        if(!fullname.value && !login.value && !phone.value && !email.value && !password.value){
            const submitForm = async () => {
                try {
                        const {data} = await $fetch('/api/signUp', {
                            method: 'post',
                            body: {
                                fullname: fullname.value,
                                login: login.value,
                                phone: phone.value,
                                email: email.value,
                                password: password.value
                            }
                        })
                } catch (error) {
                        console.log('signUp', error);
                }
            }
    }else{
        errorForm.value = 'Заполните все поля'         
    }
</script>

<template>
    <section class="d-flex justify-content-center align-items-center flex-column">
        <h1>Регистрация</h1>
        <form @submit.prevent="submitForm()" class="d-flex flex-column gap-3">
            <p>{{ errorForm }}</p>
            <input class="p-1"  type="text" placeholder="ФИО" v-model="fullname">
            <input class="p-1" type="text" placeholder="Логин" v-model="login">
            <input class="p-1" type="text" placeholder="Телифон" v-model="phone">
            <input class="p-1" type="email" placeholder="Почта" v-model="email">
            <input class="p-1" type="password" placeholder="Пароль" v-model="password">
            <button type="submit" class="btn btn-primary">Зарегистрироватся</button>
        </form>
    </section>
</template>

<style scoped>
    form{
        width: 450px;
    }
</style>