import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-header-nav',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './header-nav.html',
  styleUrl: './header-nav.scss'
})
export class HeaderNav {
  showLoginModal = false; // 控制登录模态框显示
  loginData = { // 登录表单数据
    username: '',
    password: '',
    rememberMe: false
  };
  isLoading = false; // 登录加载状态
  loginError = ''; // 登录错误信息

  // 打开登录模态框
  openLogin() {
    this.showLoginModal = true;
    this.loginError = '';
  }

  // 关闭登录模态框
  closeLogin() {
    this.showLoginModal = false;
    this.loginData = { username: '', password: '', rememberMe: false };
  }

  // 处理登录提交
  async onSubmit() {
    if (!this.loginData.username || !this.loginData.password) {
      this.loginError = '请输入用户名和密码';
      return;
    }

    this.isLoading = true;
    this.loginError = '';

    try {
      // 模拟登录API调用
      await this.mockLogin();
      console.log('登录成功', this.loginData);
      this.closeLogin();
      
      // 实际项目中这里会：
      // 1. 保存用户凭证
      // 2. 更新用户状态
      // 3. 重定向或刷新用户界面
    } catch (error) {
      this.loginError = '用户名或密码错误';
      console.error('登录失败:', error);
    } finally {
      this.isLoading = false;
    }
  }

  // 模拟登录API
  private mockLogin(): Promise<void> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        // 模拟登录验证 - 实际项目中替换为真实API调用
        if (this.loginData.username === 'admin' && this.loginData.password === '123456') {
          resolve();
        } else {
          reject('Invalid credentials');
        }
      }, 1500); // 模拟网络延迟
    });
  }
}