<template>
  <div class="login-container">
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="submit">登录</button>
      <div class="action-buttons">
        <button type="button" @click="handleForgotPassword">找回密码</button>
        <button type="button" @click="handleRegister">注册</button>
      </div>
    </form>
  </div>
</template>

<script lang="ts" setup>
import { h, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useLoginStore } from '@/stores/Login';
import axios from 'axios';
import { useToast } from 'vue-toastification' 
const router = useRouter();
const username = ref('');
const password = ref('');
const store = useLoginStore();
const toast = useToast();

const handleLogin = async () => {
  // 这里可以添加登录逻辑，例如调用 API 进行验证
  console.log('用户名:', username.value);
  console.log('密码:', password.value);
  
  try {
    // 后端检查账号密码是否正确
    const response = await axios.post('http://localhost:8080/user/login', {
      username: username.value,
      password: password.value
    }, {
      headers: {
        'Content-Type': 'application/json',
      }
    });

    // 根据返回值确认是否登录成功
    console.log(response.data.code);
    if (response.data.code === 1) {
      // 登录成功
      console.log('登录成功');
      toast.success("登录成功");
      store.userInfo.token = response.data.data;
      store.userInfo.username = username.value;
      console.log(store.userInfo.token);
      router.push('/home');
      console
      return;
    } else {
      // 登录失败
      alert('用户名或密码错误');
    }
  } catch (error) {
    console.error('登录请求失败:', error);
    // 处理登录失败的逻辑
  }

  // 假设登录成功，重定向到主页
  // 注释掉这行，因为实际登录成功后会通过 then 语句处理
  // router.push('/home');
};

const handleForgotPassword = () => {
  // 处理找回密码逻辑
  console.log('找回密码');
  // 例如重定向到找回密码页面
  router.push('/retrievePassword');
};

const handleRegister = () => {
  // 处理注册逻辑
  console.log('注册');
  // 例如重定向到注册页面
  router.push('/registered');
};
</script>
<style scoped>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0; /* 可以根据需要调整背景颜色 */
}

.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 10px; /* 添加间距 */
}

button:hover {
  background-color: #45a049;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.action-buttons button {
  width: 48%; /* 使两个按钮各占一半宽度 */
  background-color: #007bff;
}

.action-buttons button:hover {
  background-color: #0056b3;
}
</style>