<template>
    <div class="login-container">
        <div class="login-card">
            <div class="login-left">
                <h1>提报管理系统</h1>
                <p>高效 · 安全 · 数字化</p>
            </div>
            <div class="login-right">
                <h2>欢迎登录</h2>
                <n-space vertical size="large">
                    <n-button type="primary" size="large" block @click="login('user')">提报端 (分析师入口)</n-button>
                    <n-button secondary type="primary" size="large" block @click="login('admin')">管理端 (管理员入口)</n-button>
                </n-space>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const login = (role) => {
    localStorage.setItem('userRole', role)
    router.push(role === 'admin' ? '/admin' : '/user')
}
</script>

<style scoped>
.login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eef2f5;
}

.login-card {
    display: flex;
    width: 700px;
    height: 400px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.login-left {
    flex: 1;
    background: #36ad6a;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-right {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
</style>