import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { addIcons } from 'ionicons';
import { albumsOutline, documentOutline, leafOutline, scanOutline, storefrontOutline } from 'ionicons/icons';
import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonInput, IonRow, IonTextarea, IonTitle, IonToolbar } from '@ionic/angular/standalone';
import { Router } from '@angular/router';
import { CommonModule } from '@angular/common';  // 导入 CommonModule


@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: true, // 使用 standalone 组件
  imports: [ 
    CommonModule,IonContent, IonHeader, IonTitle, IonToolbar, 
    IonButton,IonTextarea,IonInput,IonCard,IonCardContent,IonGrid,IonRow,IonCol,IonIcon,
    IonCardHeader,
  ],  // 通过 IonicModule 导入所有 Ionic 组件
  schemas: [CUSTOM_ELEMENTS_SCHEMA], 
})
export class Tab1Page {

  constructor(private router: Router) {
    addIcons({scanOutline, documentOutline, storefrontOutline,albumsOutline,leafOutline});
  }
  
  // 存储图片的数组
  images = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    'https://example.com/image4.jpg'
  ];

  // 当前显示的幻灯片索引
  currentSlide: number = 0;

  // 前一个幻灯片
  prevSlide() {
    if (this.currentSlide > 0) {
      this.currentSlide--;
    } else {
      this.currentSlide = this.images.length - 1; // 如果是第一个幻灯片，跳转到最后一个
    }
  }

  // 后一个幻灯片
  nextSlide() {
    if (this.currentSlide < this.images.length - 1) {
      this.currentSlide++;
    } else {
      this.currentSlide = 0; // 如果是最后一个幻灯片，跳转到第一个
    }
  }

  // 跳转到指定的幻灯片
  goToSlide(index: number) {
    this.currentSlide = index;
  }

  goHealthTips(){
    this.router.navigate([`/tabs/tips`])
  }
}
