<template>
    <div class="login-container">
        <div class="login-card">
            <h1>欢迎登录直播中控平台</h1>
            <p class="subtitle">请登录以继续</p>
            <form @submit.prevent="handleLogin">
                <div class="form-group">
                    <input id="username" v-model="username" type="text" placeholder="Username" required />
                </div>
                <div class="form-group">
                    <input id="password" v-model="password" type="password" placeholder="Password" required />
                </div>
                <button type="submit" :disabled="!username || !password"
                    :class="{ 'btn-active': username && password }">
                    Sign In
                </button>
            </form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@renderer/stores/useUserStore';
import router from '@renderer/router';
const userStore = useUserStore();


const username = ref('');
const password = ref('');

const handleLogin = () => {
    let userInfo = {
        username: username.value,
        password: password.value,
        userId: 'rs876543'
    };
    if (username.value === 'admin' && password.value === '123456') {
        userStore.setUserInfo(userInfo);
        userStore.setToken('token_abcdefg1234567');
        router.push('/');
    } else {
        alert('用户名或密码错误！');
    }
};
</script>

<style scoped>
.login-container {
    -webkit-app-region: drag;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.login-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 400px;
    backdrop-filter: blur(10px);
    -webkit-app-region: none;
}

h1 {
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
    text-align: center;
}

.subtitle {
    color: #666;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
}

input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

input::placeholder {
    color: #a0aec0;
}

button {
    width: 100%;
    padding: 0.75rem;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}

button:hover:not(:disabled) {
    background: #764ba2;
    transform: translateY(-1px);
}

button:disabled {
    cursor: not-allowed;
    background: #cbd5e0;
}

button.btn-active {
    opacity: 1;
}

@media (max-width: 640px) {
    .login-card {
        padding: 1.5rem;
    }

    h1 {
        font-size: 1.5rem;
    }
}
</style>
```