<template>
  <div class="login-box">
    <h2>系统登录</h2>
    <input v-model="form.username" placeholder="用户名" />
    <input v-model="form.password" type="password" placeholder="密码" />
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import axios from '../api/request' // 导入我们封装的 request

const router = useRouter()
const userStore = useUserStore()
const form = reactive({ username: '', password: '' })

const handleLogin = async () => {
  try {
    // 这里暂时模拟后端返回，等您Flask写好了把下面注释解开
    /*
    const res = await axios.post('/login', form)
    userStore.login(res.data) // res.data 包含 token, username, role
    */

    // --- 模拟数据开始 ---
    if(form.username) {
      userStore.login({
        token: 'fake-jwt-token-123',
        username: form.username,
        role: form.username === 'admin' ? 'admin' : 'engineer'
      })
      router.push('/dashboard')
    }
    // --- 模拟数据结束 ---

  } catch (error) {
    alert('登录失败')
  }
}
</script>

<style scoped>
.login-box { width: 300px; margin: 100px auto; display: flex; flex-direction: column; gap: 10px; }
</style>
