<script setup>
import {reactive} from 'vue'
import { useUserStore } from '../store/user'

const user = useUserStore()
const form = reactive({ username: '', password: '' })

const handleLogin = async () => {
  try {
    await user.login(form)
    // 登录成功跳转逻辑
  } catch (err) {
    console.error('登录失败', err)
  }
}
</script>

<template>
  <div class="login-mask">
    <div class="login-dialog">
      <h3>用户登录</h3>
      <form @submit.prevent="handleLogin">
        <div class="input-group">
          <input 
            v-model="form.username" 
            class="styled-input"
            placeholder="用户名"
          >
        </div>
        <div class="input-group">
          <input
            v-model="form.password"
            type="password"
            class="styled-input"
            placeholder="密码"
          >
        </div>
        <button type="submit" class="submit-btn">
          登录
        </button>
      </form>
    </div>
  </div>
</template>

<style scoped>
.login-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.login-dialog {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  width: 320px;
}

.styled-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-bottom: 1rem;
  transition: border-color 0.3s;
}

.styled-input:focus {
  border-color: #409eff;
  outline: none;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.submit-btn:hover {
  opacity: 0.9;
}
</style>
