s202226701024/src/app/tab1/tab1.page.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonLabel, IonList, IonInput, IonTextarea, IonAvatar } from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';

interface Slide {
  image: string;
  alt: string;
}

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: true,
  imports: [
    CommonModule,
    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
    IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardContent,
    IonList, IonItem, IonLabel, IonAvatar, IonInput, IonTextarea
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], 
})
export class Tab1Page {

  coaches = [
    { name: '教练张', style: '技术细腻', avatar: 'assets/tab1.img/zhang.png' },
    { name: '教练李', style: '战术全面', avatar: 'assets/tab1.img/li.png' },
    { name: '教练王', style: '体能训练', avatar: 'assets/tab1.img/wang.png' },
  ];
  slides: Slide[] = [
    { image: 'assets/tab1.img/1.png', alt: '轮播图1' },
    { image: 'assets/tab1.img/2.jpg', alt: '轮播图2' },
    { image: 'assets/tab1.img/3.jpg', alt: '轮播图3' },
    { image: 'assets/tab1.img/4.jpg', alt: '轮播图4' },
    { image: 'assets/tab1.img/5.jpg', alt: '轮播图5' }
  ];

  constructor(
    private router: Router,
  ) {
  }
  currentIndex = 0;
  translateX = 0;
  private autoPlayInterval: any;
  private touchStartX = 0;
  private touchDeltaX = 0;
  private slideWidth = 0;

  ngOnInit() {
    this.startAutoPlay();
    // 获取轮播图容器宽度
    setTimeout(() => {
      const container = document.querySelector('.banner-container');
      if (container) {
        this.slideWidth = container.clientWidth;
      }
    });
  }
  selectedTag = 'all';
  isModalOpen = false;
  newPost = {
    content: ''
  };

  trainingPosts = [
    {
      id: 1,
      authorName: '篮球爱好者',
      authorAvatar: 'assets/avatars/default-avatar.png',
      postTime: new Date(),
      content: '今天练习了两小时的投篮，感觉手感越来越好了！',
      likes: 12,
      comments: 3,
      isLiked: false
    },
    {
      id: 2,
      authorName: '训练达人',
      authorAvatar: 'assets/avatars/default-avatar.png',
      postTime: new Date(),
      content: '分享一个实用的运球技巧：交叉步过人时重心要放低...',
      likes: 18,
      comments: 5,
      isLiked: false
    }
  ];

  createNewPost() {
    this.isModalOpen = true;
  }

  closeModal() {
    this.isModalOpen = false;
    this.newPost.content = '';
  }

  submitPost() {
    if (this.newPost.content.trim()) {
      const post = {
        id: this.trainingPosts.length + 1,
        authorName: '当前用户',
        authorAvatar: 'assets/avatars/default-avatar.png',
        postTime: new Date(),
        content: this.newPost.content,
        likes: 0,
        comments: 0,
        isLiked: false
      };
      this.trainingPosts.unshift(post);
      this.closeModal();
    }
  }

  likePost(post: any) {
    post.isLiked = !post.isLiked;
    post.likes += post.isLiked ? 1 : -1;
  }

  showComments(post: any) {
    // 实现查看评论功能
    console.log('查看评论:', post.id);
  }

  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() {
    this.translateX = -this.currentIndex * this.slideWidth;
  }

  // 触摸事件处理
  onTouchStart(event: TouchEvent) {
    this.stopAutoPlay();
    this.touchStartX = event.touches[0].clientX;
    this.touchDeltaX = 0;
  }

  onTouchMove(event: TouchEvent) {
    this.touchDeltaX = event.touches[0].clientX - this.touchStartX;
    const newTranslateX = -this.currentIndex * this.slideWidth + this.touchDeltaX;
    this.translateX = newTranslateX;
  }

  onTouchEnd() {
    const threshold = this.slideWidth / 3;
    if (Math.abs(this.touchDeltaX) > threshold) {
      if (this.touchDeltaX > 0) {
        this.prevSlide();
      } else {
        this.nextSlide();
      }
    } else {
      this.updateTranslateX();
    }
    this.startAutoPlay();
  }

  goToBasicTraining() {
    this.router.navigate(['tabs/basic-training']);
  }
}