<template>
  <el-container class="auth-container">
    <el-main class="auth-form">
      <el-card class="box-card">
        <template #header>
          <span v-if="showLoginForm">登录</span>
          <span v-else>注册</span>
        </template>
        <el-form v-if="showLoginForm" @submit.prevent="login" :model="loginForm" ref="loginForm" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="loginForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="text" @click="showLoginForm = false">注册账号</el-button>
          </el-form-item>
        </el-form>
        <el-form v-else @submit.prevent="register" :model="registerForm" ref="registerForm" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="registerForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register">注册</el-button>
            <el-button type="text" @click="showLoginForm = true">返回登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: ''
      },
      showLoginForm: true // 默认显示登录表单
    };
  },
  methods: {
    async login() {
      try {
        const response = await fetch('http://localhost:3000/api/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.loginForm)
        });
        const result = await response.json();
        if (result.success) {
          window.location.href = '/main.html';
        } else {
          this.$message.error('登录失败');
        }
      } catch (error) {
        this.$message.error('网络错误');
      }
    },
    async register() {
      try {
        const response = await fetch('http://localhost:3000/api/register', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.registerForm)
        });
        const result = await response.json();
        if (result.success) {
          this.$message.success('注册成功，请登录');
          this.showLoginForm = true; // 注册成功后显示登录表单
        } else {
          this.$message.error('注册失败');
        }
      } catch (error) {
        this.$message.error('网络错误');
      }
    }
  }
};
</script>

<style scoped>
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh-100px);
  background-color: #ffe6f2; /* 淡粉色背景 */
}

.auth-form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.box-card {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #ff99cc; /* 粉色边框 */
}

.el-button--primary {
  background-color: #ff6699;
  border-color: #ff6699;
}

.el-button--primary:hover {
  background-color: #ff3366;
  border-color: #ff3366;
}

.el-button--text {
  color: #ff6699;
}

.el-button--text:hover {
  background-color: rgba(255, 102, 153, 0.1);
}

.el-form-item__label {
  color: #ff6699;
}

.el-input__inner {
  border-color: #ff99cc;
}

.el-input__inner:focus {
  border-color: #ff6699;
}
</style>
