<template>
  <div class="login-page">
    <div class="login-card">
      <h2>欢迎登录</h2>
      <div class="form-item">
        <label>用户名</label>
        <input v-model="username" type="text" placeholder="请输入用户名" />
      </div>
      <div class="form-item">
        <label>密码</label>
        <input v-model="password" type="password" placeholder="请输入密码" />
      </div>
      <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      <button class="login-button" :disabled="loading" @click="onSubmit">
        {{ loading ? '登录中...' : '登录' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '@/utils/auth'

const router = useRouter()
const username = ref('')
const password = ref('')
const loading = ref(false)
const errorMessage = ref('')

const onSubmit = async () => {
  errorMessage.value = ''
  if (!username.value || !password.value) {
    errorMessage.value = '用户名和密码不能为空'
    return
  }

  loading.value = true
  try {
    await login({ account: username.value, password: password.value })
    router.replace({ path: '/' })
  } catch (error) {
    errorMessage.value = error.message || '登录失败，请检查用户名密码'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
}

.login-card {
  width: 360px;
  padding: 32px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(16, 45, 85, 0.18);
  text-align: center;
}

.login-card h2 {
  margin-bottom: 24px;
  color: #0f2f60;
}

.form-item {
  margin-bottom: 18px;
  text-align: left;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  color: #4a5568;
}

.form-item input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
}

.error-message {
  margin-bottom: 16px;
  color: #d32f2f;
  text-align: left;
}

.login-button {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  background: #1e88e5;
  cursor: pointer;
  font-size: 16px;
}

.login-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
</style>
