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

@Component({
  selector: 'app-ogin-screen',
  templateUrl: './ogin-screen.html',
  styleUrls: ['./ogin-screen.scss'],
  standalone: true,
  imports: [CommonModule, FormsModule]
})
export class OginScreenComponent implements OnInit, OnDestroy {
  activeTab: 'login' | 'register' = 'login';
  currentSlideIndex = 0;
  showSuccessMessage = false;
  messageType: 'login' | 'register' | null = null;
  
  // 表单模型
  loginForm = {
    email: '',
    password: '',
    remember: true
  };
  
  registerForm = {
    restaurantName: '',
    contactName: '',
    email: '',
    password: ''
  };
  
  // 轮播图图片
  slides = [
    'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    'https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    'https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    'https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
  ];
  
  private slideInterval: any;

  ngOnInit(): void {
    this.startSlideShow();
  }

  ngOnDestroy(): void {
    if (this.slideInterval) {
      clearInterval(this.slideInterval);
    }
  }

  startSlideShow(): void {
    this.slideInterval = setInterval(() => {
      this.currentSlideIndex = (this.currentSlideIndex + 1) % this.slides.length;
    }, 4000);
  }

  switchTab(tab: 'login' | 'register'): void {
    this.activeTab = tab;
  }

  onSubmitLogin(event: Event): void {
    event.preventDefault();
    this.showSuccess('login');
  }

  onSubmitRegister(event: Event): void {
    event.preventDefault();
    this.showSuccess('register');
  }

  showSuccess(type: 'login' | 'register'): void {
    this.messageType = type;
    this.showSuccessMessage = true;
    
    setTimeout(() => {
      this.showSuccessMessage = false;
      // 在实际应用中，这里会进行导航
      // this.router.navigate(['/dashboard']);
    }, 2000);
  }

  getSuccessMessage(): string {
    if (this.messageType === 'login') {
      return '登录成功！正在进入美食图库...';
    } else {
      return '注册成功！正在进入美食图库...';
    }
  }
}