20222670105/novel-app/src/app/home/home.page.ts

// home.page.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule, PopoverController } from '@ionic/angular';
import { Router } from '@angular/router';


interface Story {
  id: string;
  cover: string;
  title: string;
  createTime: Date;
}

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule]
})
export class HomePage implements AfterViewInit {
  stories: Story[] = [];
  slideWidth: number = 0; // 设置默认值为0
  autoPlayInterval: NodeJS.Timeout | undefined;
  currentIndex: number = 0;
  slides: any[] = []; // 初始化为空数组
  translateX: number = 0;
  startX: number = 0;
  currentTranslateX: number = 0;

  @ViewChild('bannerContainer', { read: ElementRef }) bannerContainer!: ElementRef;

  ngAfterViewInit() {
    this.startAutoPlay();
    this.checkSlideWidth();
  }

  ngAfterViewChecked() {
    this.checkSlideWidth();
  }

  private checkSlideWidth() {
    const container = this.bannerContainer.nativeElement;
    if (container && container.clientWidth > 0) {
      this.slideWidth = container.clientWidth;
      console.log('slideWidth:', this.slideWidth);
      this.slides = [
        { image: 'assets/images/banner1.jpg', alt: 'Slide 1' },
        { image: 'assets/images/banner2.jpg', alt: 'Slide 2' },
        { image: 'assets/images/banner3.jpg', alt: 'Slide 3' },
        { image: 'assets/images/banner4.jpg', alt: 'Slide 4' },
        { image: 'assets/images/banner5.jpg', alt: 'Slide 5' },
      ];
      this.updateTranslateX();
    } else {
      console.warn('bannerContainer not found or has zero width');
    }
  }



  ngOnDestroy() {
    this.stopAutoPlay();
  }

  private startAutoPlay() {
    this.stopAutoPlay();
    this.autoPlayInterval = setInterval(() => {
      this.nextSlide();
    }, 3000); // 每3秒切换一次
  }

  private stopAutoPlay() {
    if (this.autoPlayInterval) {
      clearInterval(this.autoPlayInterval);
    }
  }

  nextSlide() {
    this.currentIndex = (this.currentIndex + 1) % this.slides.length;
    this.updateTranslateX();
  }

  prevSlide() {
    this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
    this.updateTranslateX();
  }

  goToSlide(index: number) {
    this.currentIndex = index;
    this.updateTranslateX();
  }

  private updateTranslateX() {
    if (this.slideWidth !== undefined && this.slideWidth > 0) {
      this.translateX = -this.currentIndex * this.slideWidth;
      this.currentTranslateX = this.translateX;
      console.log('translateX:', this.translateX); // 添加调试信息
    } else {
      console.warn('slideWidth is not defined or zero');
    }
  }
  onTouchStart(event: TouchEvent) {
    this.startX = event.touches[0].clientX;
    this.stopAutoPlay();
    console.log('Touch Start:', this.startX); // 添加调试信息
  }

  onTouchMove(event: TouchEvent) {
    const currentX = event.touches[0].clientX;
    const diffX = currentX - this.startX;
    this.currentTranslateX = this.translateX + diffX;
    console.log('Touch Move:', diffX, this.currentTranslateX); // 添加调试信息
  }

  onTouchEnd(event: TouchEvent) {
    const currentX = event.changedTouches[0].clientX;
    const diffX = currentX - this.startX;
    if (diffX > 50) {
      this.prevSlide();
    } else if (diffX < -50) {
      this.nextSlide();
    } else {
      this.updateTranslateX();
    }
    this.startAutoPlay();
    console.log('Touch End:', diffX, this.currentIndex); // 添加调试信息
  }

  constructor(
    private router: Router,
    private popoverController: PopoverController
  ) { }

  navigateTo(path: string) {
    this.router.navigate([path]);
  }

  async presentCreateOptions(ev: any) {
    const popover = await this.popoverController.create({
      component: CreateOptionsComponent,
      event: ev,
      translucent: true,
      size: 'auto'
    });

    await popover.present();

    const { data } = await popover.onDidDismiss();
    if (data) {
      this.createStory(data.type);
    }
  }

  createStory(type: 'long' | 'short') {
    // 使用查询参数传递类型
    this.router.navigate(['/'], {
      queryParams: { generatorType: type, path: type === 'long' ? 'story-generator' : 'short-generator' }
    });
    const targetPath = type === 'long' ? '/story-generator' : '/short-generator';
    this.router.navigate([targetPath]);
  }

  formatDate(date: Date): string {
    return date.toLocaleDateString('zh-CN');
  }
}

@Component({
  template: `
    <ion-list>
      <ion-item button (click)="select('long')">
        <ion-icon name="book-outline" slot="start"></ion-icon>
        <ion-label>创建长篇</ion-label>
      </ion-item>
      <ion-item button (click)="select('short')">
        <ion-icon name="document-text-outline" slot="start"></ion-icon>
        <ion-label>创建短篇</ion-label>
      </ion-item>
    </ion-list>
  `,
  standalone: true,
  imports: [IonicModule]
})
export class CreateOptionsComponent {
  constructor(private popoverController: PopoverController) { }

  select(type: 'long' | 'short') {
    this.popoverController.dismiss({
      type: type
    });
  }
}