<template>
  <!-- 登录表单容器 -->
  <div class="form-container">
    <h2>登录</h2>

    <!-- 登录方式选择器 -->
    <div class="login-type">
      <span
        v-for="type in loginTypes"
        :key="type.value"
        :class="{ active: currentType === type.value }"
        @click="currentType = type.value">
        {{ type.label }}
      </span>
    </div>

    <!-- 登录表单 -->
    <form @submit.prevent="login" class="login-form">
      <div class="input-group">
        <!-- 用户标识输入框（用户名/学号/邮箱/手机） -->
        <input
          :type="inputType"
          v-model="loginForm.userFlag"
          :placeholder="placeholder"
          required />

        <!-- 验证码输入区域（仅邮箱和手机登录时显示） -->
        <template v-if="showVerifyCode">
          <div class="verify-code">
            <input
              type="text"
              v-model="loginForm.verifyCode"
              placeholder="验证码"
              required />
            <!-- 获取验证码按钮 -->
            <button type="button" @click="sendCode" :disabled="cooldown > 0">
              {{ cooldown > 0 ? `${cooldown}s` : '获取验证码' }}
            </button>
          </div>
        </template>

        <!-- 密码输入框（非验证码登录时显示） -->
        <template v-else>
          <input
            type="password"
            v-model="loginForm.password"
            placeholder="密码"
            required />
        </template>
      </div>

      <!-- 登录按钮 -->
      <button type="submit">登录</button>
    </form>

    <!-- 自动登录选项 -->
    <div class="remember-login">
      <input
        type="checkbox"
        id="remember"
        v-model="loginForm.remember" />
        <label for="remember">自动登录</label>

        <!-- 切换到注册表单的链接 -->
        <p class="switch-form">
        没有账号？
        <button @click="$emit('toggleForm')" class="link-button">注册</button>
        </p>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import axios from 'axios';

export default {
  name: 'UserLogin',
  setup() {
    // 状态管理变量
    const currentType = ref('username');  // 控制当前选择的登录方式
    const cooldown = ref(0);             // 验证码发送倒计时

    // 登录方式选项配置
    const loginTypes = [
      { label: '用户名登录', value: 'username' },  // 用户名登录选项
      { label: '学号登录', value: 'student' },     // 学号登录选项
      { label: '邮箱登录', value: 'email' },       // 邮箱登录选项
      { label: '手机登录', value: 'phone' }        // 手机号登录选项
    ];

    // 登录表单数据对象
    const loginForm = ref({
      userFlag: '',      // 用户标识（用户名/学号/邮箱/手机号）
      password: '',      // 密码
      verifyCode: '',    // 验证码（邮箱/手机登录时使用）
      remember: false    // 记住登录状态
    });

    // 计算属性：根据登录方式动态设置输入框类型
    const inputType = computed(() => {
      switch(currentType.value) {
        case 'email': return 'email';    // 邮箱输入类型
        case 'phone': return 'tel';      // 电话号码输入类型
        default: return 'text';          // 默认文本输入类型
      }
    });

    // 计算属性：根据登录方式动态设置输入框占位符
    const placeholder = computed(() => {
      switch(currentType.value) {
        case 'username': return '用户名';
        case 'student': return '学号';
        case 'email': return '邮箱';
        case 'phone': return '手机号';
        default: return '';
      }
    });

    // 计算属性：判断是否显示验证码输入框
    const showVerifyCode = computed(() => {
      return ['email', 'phone'].includes(currentType.value);
    });

    // 发送验证码的方法（用于邮箱和手机登录）
    async function sendCode() {
      if (cooldown.value > 0) return;  // 如果在冷却时间内，不允许重复发送

      try {
        // 发送验证码请求
        const response = await axios.post('/user/sendCode', {
          type: currentType.value,
          target: loginForm.value.userFlag
        });

        if (response.data.success) {
          // 开始60秒倒计时
          cooldown.value = 60;
          const timer = setInterval(() => {
            cooldown.value--;
            if (cooldown.value <= 0) {
              clearInterval(timer);
            }
          }, 1000);
        }
      } catch (error) {
        console.error('发送验证码失败:', error);
      }
    }

    // 登录提交方法
    async function login() {
      try {
        // 发送登录请求
        const response = await axios.post('/user/login', {
          ...loginForm.value,
          loginType: currentType.value
        });

        if (response.data.success) {
          // TODO: 登录成功后的处理逻辑
        }
      } catch (error) {
        console.error('登录失败:', error);
      }
    }

    // 返回模板需要使用的数据和方法
    return {
      currentType,       // 当前登录方式
      loginTypes,        // 登录方式选项
      loginForm,        // 登录表单数据
      inputType,        // 输入框类型
      placeholder,      // 输入框占位符
      showVerifyCode,   // 是否显示验证码
      cooldown,         // 倒计时
      sendCode,         // 发送验证码方法
      login            // 登录方法
    };
  }
}
</script>

<style scoped>
/* 登录表单容器样式 - 为整个登录表单提供白色背景和阴影效果 */
.form-container {
  background: rgba(255, 255, 255, 0.90);
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
  margin: auto;
}

/* 登录方式切换栏样式 - 包含用户名/学号/邮箱/手机登录选项 */
.login-type {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

/* 登录方式选项样式 - 每个登录方式的基本样式 */
.login-type span {
  font-size: 14px;
  padding: 6px 12px;
  cursor: pointer;
  position: relative;
  color: #666;
}

/* 当前选中的登录方式样式 - 突出显示当前选中的登录方式 */
.login-type span.active {
  color: #6FBD87;
  background: #f5f5f5;
}

/* 当前选中登录方式的下划线样式 - 为选中项添加绿色下划线 */
.login-type span.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #6FBD87;
}

/* 输入框组样式 - 包含所有输入框的容器 */
.input-group {
  margin-bottom: 20px;
}

/* 通用输入框样式 - 适用于用户名/学号/邮箱/手机号/密码输入框 */
input {
  width: 93%;
  padding: 11px;
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

/* 输入框获得焦点时的样式 - 突出显示当前正在输入的框 */
input:focus {
  border-color: #6FBD87;
  outline: none;
}

/* 验证码输入区域样式 - 包含验证码输入框和获取验证码按钮 */
.verify-code {
  display: flex;
  gap: 10px;
}

/* 验证码输入框样式 */
.verify-code input {
  flex: 1;
}

/* 获取验证码按钮样式 */
.verify-code button {
  width: 88px;
  height: 40px;
  margin: 8px 0;
  font-size: 12px;
}

/* 登录按钮样式 */
button {
  width: 93%;
  padding: 10px;
  background: #6FBD87;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

/* 登录按钮悬停效果 */
button:hover {
  background: #5aa76f;
}

/* 禁用状态的按钮样式（用于验证码倒计时） */
button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 自动登录选项样式 - 复选框和文字的容器 */
.remember-login {
  display: flex;
  align-items: center;
  margin: 12px 0;
}

/* 自动登录复选框样式 */
.remember-login input[type="checkbox"] {
  width: auto;
  margin-left: 22px;
  margin-right: 8px;
  margin-top: 10px;
  cursor: pointer;
}

/* 自动登录文字样式 */
.remember-login label {
  color: #666;
  cursor: pointer;
  font-size: 15px;
}

/* 切换到注册的提示文字样式 */
.switch-form {
  font-size: 15px;
  margin-left: 138px;
  margin-top: 16px;
  text-align: center;
  color: #666;
}

/* 切换到注册的链接按钮样式 */
.link-button {
  background: none;
  border: none;
  color: #6FBD87;
  text-decoration: underline;
  padding: 0 2px;
  width: auto;
  font-size: 15px;
}

/* 切换到注册的链接按钮悬停效果 */
.link-button:hover {
  color: #5aa76f;
  background: none;
}
</style>