<template>
  <div class="login-container">
    <div class="login-box">
      <h2>注册</h2>
      <form @submit.prevent="register">
        <div class="input-group">
          <i class="fas fa-user"></i>
          <input type="text" v-model="username" placeholder="用户名" required />
        </div>
        <div class="input-group">
          <i class="fas fa-lock"></i>
          <input type="password" v-model="password" placeholder="密码" required />
        </div>
        <div class="input-group">
          <i class="fas fa-lock"></i>
          <input type="password" v-model="confirmPassword" placeholder="确认密码" required />
        </div>
        <button type="submit" class="login-button">注册</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: ''
    };
  },
  methods: {
    async register() {
      if (this.password !== this.confirmPassword) {
        alert('密码不匹配');
        return;
      }
      try {
        const response = await axios.post('http://localhost:8081/register', {
          username: this.username,
          password: this.password
        });
        console.log('注册成功', response.data);
      } catch (error) {
        console.error('注册失败', error);
      }
    }
  }
};
</script>

<style scoped>
/* 使用与 Login.vue 相同的样式 */
</style>
