<template>
    <form @submit.prevent="handleSubmit">
        <div class="col-xl-12">
            <UserFormInput
                title="아이디"
                name="id"
                :is-alert="idAlert"
                :useInputGroup="true"
                @update:data="handleIdChange"
                :value="id"
            />

            <UserFormInput
                title="비밀번호"
                name="password"
                type="password"
                :is-alert="passwordAlert"
                @update:data="handlePasswordChange"
                :value="password"
            />

            <div class="d-grid gap-2 mt-7 mb-5">
                <button type="submit" class="btn btn-primary">로그인</button>
            </div>

            <div class="mb-3 d-flex justify-content-around">
                <div>
                    <input type="checkbox" class="form-check-input" id="rememberCheck" />
                    <label class="form-check-label fw-bold" for="rememberCheck">&nbsp;자동로그인</label>
                </div>
                <RouterLink class="text-dark fw-bold" to="/register">등록신청</RouterLink>
                <RouterLink class="text-dark fw-bold" to="/pw">비밀번호 찾기</RouterLink>
            </div>
        </div>
    </form>
</template>

<script setup>
    import $api from '@api';
    import router from '@/router';
    import { ref } from 'vue';
    import UserFormInput from '@c/input/UserFormInput.vue';

    const id = ref('');
    const password = ref('');
    const idAlert = ref(false);
    const passwordAlert = ref(false);

    const handleIdChange = value => {
        id.value = value;
        idAlert.value = false;
    };

    const handlePasswordChange = value => {
        password.value = value;
        passwordAlert.value = false;
    };

    const handleSubmit = async () => {

        try {
            const response = await $api.post('user/login', {
                loginId: id.value,
                password: password.value,
                remember: false,
            });

            if (response.status === 200) {
                console.log('로그인 성공', response.data);
                router.push('/');
            }
        } catch (error) {
            console.error('로그인 실패', error);
        }
    };


</script>
