<template>
  <div class="login-container">
    <h2>用户登录</h2>
    <form @submit.prevent="handleLogin" class="login-form">
      <div class="form-group">
        <label for="email">邮箱:</label>
        <input type="email" id="email" v-model="email" required placeholder="请输入邮箱地址" />
      </div>
      <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" required placeholder="请输入密码" />
      </div>
      <button type="submit" :disabled="isLoading">
        {{ isLoading ? '登录中...' : '登录' }}
      </button>
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
      <!-- 显示来自 store 的登录错误 -->
      <p v-if="authStore.getLoginError && !errorMessage" class="error-message">{{ authStore.getLoginError }}</p>
    </form>
    <p class="register-link">
      还没有账号？ <router-link to="/register">立即注册</router-link>
    </p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../store/auth'; // 导入Auth Store

const email = ref('');
const password = ref('');
const errorMessage = ref(''); // 用于显示组件级别的即时错误
const isLoading = ref(false);

const router = useRouter();
const authStore = useAuthStore(); // 获取Auth Store实例

const handleLogin = async () => {
  console.log("handleLogin function CALLED!");
  console.log("Initial isLoading state in handleLogin:", isLoading.value);
  isLoading.value = true;
  errorMessage.value = ''; // 清除组件级别的错误
  authStore.loginError = null; // 清除 store 中的旧错误

  try {
    await authStore.login({ email: email.value, password: password.value });
    console.log('登录成功 (通过Store)');
    // alert('登录成功！'); // 可以用更友好的方式提示，或者直接跳转
    router.push('/'); // 登录成功后跳转到首页
  } catch (error) {
    // authStore.login action 内部已经处理了 loginError 的设置
    // 如果 authStore.login action 抛出错误，它会被这里捕获
    // error.message 应该就是 authStore.loginError 的值
    errorMessage.value = error.message || '登录失败，发生了未知错误。';
    console.error('Login component error:', error);
  } finally {
    isLoading.value = false;
  }
};
</script>
<style scoped>
.login-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.login-form .form-group {
  margin-bottom: 15px;
  text-align: left;
}
.login-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.login-form input[type="email"],
.login-form input[type="password"] {
  width: calc(100% - 22px);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
}
.login-form button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s;
}
.login-form button:disabled {
  background-color: #aaa;
  cursor: not-allowed;
}
.login-form button:hover:not(:disabled) {
  background-color: #36a374;
}
.error-message {
  color: red;
  margin-top: 15px;
}
.register-link {
  margin-top: 20px;
  font-size: 0.9em;
}
.register-link a {
  color: #42b983;
  text-decoration: none;
}
.register-link a:hover {
  text-decoration: underline;
}
</style>