{% extends "base.html" %}

{% block title %}注册 - AI答案采集平台{% endblock %}

{% block styles %}
.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.register-box {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    width: 400px;
}

.register-title {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-size: 24px;
    font-weight: 600;
}

.login-link {
    text-align: center;
    margin-top: 20px;
    color: #666;
}

.login-link a {
    color: #667eea;
    text-decoration: none;
}

.login-link a:hover {
    text-decoration: underline;
}
{% endblock %}

{% block content %}
<div class="register-container">
    <div class="register-box">
        <h1 class="register-title">注册账号</h1>
        
        <el-form :model="registerForm" :rules="rules" ref="registerFormRef">
            <el-form-item prop="username">
                <el-input 
                    v-model="registerForm.username" 
                    placeholder="用户名"
                    size="large"
                    prefix-icon="User">
                </el-input>
            </el-form-item>
            
            <el-form-item prop="email">
                <el-input 
                    v-model="registerForm.email" 
                    placeholder="邮箱"
                    size="large"
                    prefix-icon="Message">
                </el-input>
            </el-form-item>
            
            <el-form-item prop="password">
                <el-input 
                    v-model="registerForm.password" 
                    type="password"
                    placeholder="密码"
                    size="large"
                    prefix-icon="Lock">
                </el-input>
            </el-form-item>
            
            <el-form-item prop="confirmPassword">
                <el-input 
                    v-model="registerForm.confirmPassword" 
                    type="password"
                    placeholder="确认密码"
                    size="large"
                    prefix-icon="Lock"
                    @keyup.enter="handleRegister">
                </el-input>
            </el-form-item>
            
            <el-form-item>
                <el-button 
                    type="primary" 
                    size="large"
                    style="width: 100%"
                    :loading="loading"
                    @click="handleRegister">
                    注册
                </el-button>
            </el-form-item>
        </el-form>
        
        <div class="login-link">
            已有账号？<a href="/login">立即登录</a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
const app = createApp({
    data() {
        const validatePass2 = (rule, value, callback) => {
            if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致'));
            } else {
                callback();
            }
        };
        
        return {
            registerForm: {
                username: '',
                email: '',
                password: '',
                confirmPassword: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }
                ],
                confirmPassword: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    { validator: validatePass2, trigger: 'blur' }
                ]
            },
            loading: false
        };
    },
    methods: {
        async handleRegister() {
            const valid = await this.$refs.registerFormRef.validate().catch(() => false);
            if (!valid) return;
            
            this.loading = true;
            
            try {
                const response = await axios.post('/register', {
                    username: this.registerForm.username,
                    email: this.registerForm.email,
                    password: this.registerForm.password
                });
                
                if (response.data.success) {
                    ElMessage.success('注册成功，开始首次使用引导');
                    setTimeout(() => {
                        window.location.href = response.data.redirect || '/dashboard?welcome=1';
                    }, 1000);
                }
            } catch (error) {
                ElMessage.error(error.response?.data?.message || '注册失败');
            } finally {
                this.loading = false;
            }
        }
    }
});

app.use(ElementPlus);
app.mount('#app');
{% endblock %}