<!-- src/components/Login.vue -->

<template>
  
  <div class="login-container">
    <img class="logo" src="@/assets/logo.png" alt="Logo" />

    <van-form class="login-form" @submit="onSubmit" ref="loginForm">
      <van-field v-model="username" label="用户名" placeholder="请输入用户名" required />
      <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />

      <div class="extra-links">
        <router-link to="/forgot-password" class="link">忘记密码？</router-link>
        <router-link to="/register" class="link">注册账号</router-link>
      </div>

      <van-button type="primary" native-type="submit" class="login-button" block>
        登录
      </van-button>
    </van-form>
  </div>

</template>

<script>
import { ref } from 'vue';
import 'vant/lib/index.css';
import { Form, Button, Field } from 'vant';
import {useRouter} from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const username = ref('');
    const password = ref('');

    const onSubmit = async () => {
      try {
        // 模拟登录请求（实际中替换为真实的登录逻辑）
        // const response = await fakeLogin();

        // 如果登录成功，可以导航到下一个页面
        console.log('登录成功:');

        // 例子：导航到主页
        router.push('/');
      } catch (error) {
        // 处理登录错误
        console.error('登录失败:', error);
      }
    };

    const fakeLogin = () => {
      // 模拟登录请求（实际中替换为真实的登录逻辑）
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({ userId: 123, username: username.value });
        }, 1000); // 模拟延迟
      });
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
};
</script>

<style scoped>
/* 添加组件特定的样式 */
/* 添加组件特定的样式 */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: url("@/assets/background.jpg") center center/cover no-repeat; /* 使用图片作为背景 */
}

.logo {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  border-radius: 50%;
  transition: transform 0.3s ease-in-out;
}

.logo:hover {
  transform: rotate(360deg);
}

.login-form {
  width: 80%;
  max-width: 600px;
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

.login-form:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.extra-links {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  color: #888;
}

.link {
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.link:hover {
  color: #0056b3;
}

.login-button {
  margin-top: 20px;
  transition: background-color 0.3s ease-in-out;
}

.login-button:hover {
  background-color: #4CAF50;
}
</style>
