<template>
    <el-header class="nav-bar">
        <span class="logo">いぬハウス</span>
        <span class="logintitle">会員登録</span>
    </el-header>
    <el-container style="padding: 50px; max-width: 500px; margin: auto; background: rgba(255, 255, 255, 0.8); border-radius: 10px;margin-top: 100px;">


        <el-form :model="{ email, namee, password, confirmPassword }" :rules="rules" label-position="top" ref="formRef">
            <el-form-item label="名前" style="margin-bottom: 30px;">
                <el-input v-model="namee" placeholder="名前を入力してください" style="width: 350px;"/>
            </el-form-item>

            <el-form-item label="メールアドレス" prop="email" style="margin-bottom: 30px;">
                <el-input v-model="email" placeholder="メールアドレスを入力してください" style="width: 350px;"/>
            </el-form-item>

            <el-form-item label="パスワード" prop="password" style="margin-bottom: 30px;">
                <el-input v-model="password" placeholder="パスワードを入力してください" style="width: 350px;" show-password/>
            </el-form-item>

            <el-form-item label="パスワード確認" prop="confirmPassword">
                <el-input v-model="confirmPassword" placeholder="もう一度パスワードを入力してください" style="width: 350px;" show-password />
            </el-form-item>

            <el-button type="primary" @click="submit">登録</el-button>
        </el-form>
    </el-container>
</template>

<script>
import { ElMessageBox } from 'element-plus';

export default {
    data() {
        return {
            namee: '',
            email: '',
            password: '',
            confirmPassword: '',
            rules: {
                email: [
                    { required: true, message: 'メールアドレスを入力してください', trigger: 'blur' },
                    { type: 'email', message: '正しいメールアドレス形式で入力してください', trigger: ['blur', 'change'] },
                ],
                password: [
                    { required: true, message: 'パスワードを入力してください', trigger: 'blur' },
                    { min: 6, message: 'パスワードは6文字以上で入力してください', trigger: ['blur', 'change'] },
                ],
                confirmPassword: [
                    { required: true, message: 'パスワード確認を入力してください', trigger: 'blur' },
                    { validator: (rule, value, callback) => this.validateConfirmPassword(rule, value, callback), trigger: ['blur', 'change'] },
                ],
            },
        };
    },

    methods: {
        submit() {
            this.$refs.formRef.validate((valid) => {
                if (!valid) {
                    console.log('入力エラーがあります');
                    return;
                }

                if (this.password !== this.confirmPassword) {
                    ElMessageBox.alert('パスワードが一致しません。', 'エラー', {
                        confirmButtonText: 'OK',
                    });
                    return;
                }

                ElMessageBox.alert('登録が成功しました！', '成功', {
                    confirmButtonText: 'OK',
                }).then(() => {
                    this.$router.push('/');
                });

                console.log(this.namee, this.email, this.password, this.confirmPassword);
            });
        },

        validateConfirmPassword(rule, value, callback) {
            if (value === '') {
                callback(new Error('パスワード確認を入力してください'));
            } else if (value !== this.password) {
                callback(new Error('パスワードが一致しません'));
            } else {
                callback();
            }
        },

    },
};
</script>



<style>

body {
    background: linear-gradient(to right, #74ebd5, #ACB6E5);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}


.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #2c3e50;
    padding: 10px 20px;
    color: white;
}


.logo {
    font-size: 20px;
    font-weight: bold;
}

.logintitle {
    font-size: 20px;
    font-weight: bold;

}
</style>