<!-- src/views/Register.vue -->

<template>
    <div class="register-container">
      <img class="logo" src="@/assets/logo.png" alt="Logo" />
  
      <van-form class="register-form" @submit="onSubmit" ref="registerForm">
        <van-field v-model="username" label="用户名" placeholder="请输入用户名" required />
        <van-field v-model="email" type="email" label="邮箱" placeholder="请输入邮箱" required />
        <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />
        <van-field v-model="confirmPassword" type="password" label="确认密码" placeholder="请确认密码" required />
  
        <van-button type="primary" native-type="submit" class="register-button" block>
          注册
        </van-button>
      </van-form>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import 'vant/lib/index.css';
  import { Form, Button, Field } from 'vant';
  
  export default {
    setup() {
      const username = ref('');
      const email = ref('');
      const password = ref('');
      const confirmPassword = ref('');
  
      const onSubmit = async () => {
        try {
          // 模拟注册请求（实际中替换为真实的注册逻辑）
          const response = await fakeRegister();
  
          // 如果注册成功，可以导航到登录页面或其他页面
          console.log('注册成功:', response);
  
          // 例子：导航到登录页面
          this.$router.push('/login');
        } catch (error) {
          // 处理注册错误
          console.error('注册失败:', error);
        }
      };
  
      const fakeRegister = () => {
        // 模拟注册请求（实际中替换为真实的注册逻辑）
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({ userId: 456, username: username.value, email: email.value });
          }, 1000); // 模拟延迟
        });
      };
  
      return {
        username,
        email,
        password,
        confirmPassword,
        onSubmit,
      };
    },
  };
  </script>
  
  <style scoped>
  /* 添加组件特定的样式 */
  .register-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);
  }
  
  .register-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;
  }
  
  .register-form:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }
  
  .register-button {
    margin-top: 20px;
    transition: background-color 0.3s ease-in-out;
  }
  
  .register-button:hover {
    background-color: #4CAF50;
  }
  </style>
  