{% extends "base.html" %}

{% block title %}登录 - AI答案采集平台{% endblock %}

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

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

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

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

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

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

{% block content %}
<div class="login-container">
    <div class="login-box">
        <h1 class="login-title">AI答案采集平台</h1>
        
        <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
            <el-form-item prop="username">
                <el-input 
                    v-model="loginForm.username" 
                    placeholder="用户名"
                    size="large"
                    prefix-icon="User">
                </el-input>
            </el-form-item>
            
            <el-form-item prop="password">
                <el-input 
                    v-model="loginForm.password" 
                    type="password"
                    placeholder="密码"
                    size="large"
                    prefix-icon="Lock"
                    @keyup.enter="handleLogin">
                </el-input>
            </el-form-item>
            
            <el-form-item>
                <el-button 
                    type="primary" 
                    size="large"
                    style="width: 100%"
                    :loading="loading"
                    @click="handleLogin">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
        
        <div class="register-link">
            还没有账号？<a href="/register">立即注册</a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
const app = createApp({
    data() {
        return {
            loginForm: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            },
            loading: false
        };
    },
    methods: {
        async handleLogin() {
            const valid = await this.$refs.loginFormRef.validate().catch(() => false);
            if (!valid) return;
            
            this.loading = true;
            
            try {
                const response = await axios.post('/login', this.loginForm);
                
                if (response.data.success) {
                    ElMessage.success('登录成功');
                    setTimeout(() => {
                        window.location.href = '/dashboard';
                    }, 500);
                }
            } catch (error) {
                ElMessage.error(error.response?.data?.message || '登录失败');
            } finally {
                this.loading = false;
            }
        }
    }
});

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