import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { IonicModule, AlertController } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tab1',
  standalone: true,
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  imports: [
    IonicModule,
    CommonModule,
    FormsModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class Tab1Page implements OnInit {
  // 为幻灯片设置默认的当前索引
  currentSlide: number = 0;

  // 图片列表
  images = [
    'assets/1.png',
    'assets/2.png',
    'assets/3.png'
  ];

  // 其他数据
  selectedTab: string = 'recommend';

  recommendations = [
    { title: '智能跑步机', subtitle: '最新款', description: '适合家庭使用的智能跑步机，享受便捷运动体验。', image: 'assets/4.png' },
    { title: '瑜伽垫', subtitle: '舒适型', description: '采用高质量材料，给你最舒适的瑜伽体验。', image: 'assets/5.png' },
  ];

  activities = [
    { title: '冬季滑雪大赛', date: '2024-12-30', description: '加入我们，挑战滑雪极限！' },
    { title: '夏季自行车比赛', date: '2025-06-15', description: '感受骑行的乐趣，挑战极限！' },
  ];

  courses = [
    { title: '高级瑜伽课程', instructor: '王老师', description: '为您提供更加深度的瑜伽体验，提升身体和心理健康。' },
    { title: '马拉松训练营', instructor: '李教练', description: '为马拉松爱好者提供专业的训练课程，帮助提升跑步成绩。' },
  ];

  constructor(private router: Router, private alertController: AlertController) {}

  // ngOnInit 生命周期钩子
  ngOnInit(): void {
    // 如果需要启动自动轮播功能，可以在这里调用
    // 例如：this.startAutoSlide();
  }

  // 显示上一张幻灯片
  prevSlide(): void {
    if (this.currentSlide > 0) {
      this.currentSlide--;
    } else {
      this.currentSlide = this.images.length - 1; // 循环到最后一张
    }
  }

  // 显示下一张幻灯片
  nextSlide(): void {
    if (this.currentSlide < this.images.length - 1) {
      this.currentSlide++;
    } else {
      this.currentSlide = 0; // 循环到第一张
    }
  }

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

  // 弹出输入地址和手机号的弹窗
  async promptAddress(): Promise<void> {
    const alert = await this.alertController.create({
      header: '输入地址和手机号',
      inputs: [
        {
          name: 'address',
          type: 'text',
          placeholder: '请输入地址'
        },
        {
          name: 'phone',
          type: 'tel',
          placeholder: '请输入手机号'
        }
      ],
      buttons: [
        {
          text: '取消',
          role: 'cancel'
        },
        {
          text: '确认',
          handler: (data) => {
            console.log('地址:', data.address);
            console.log('手机号:', data.phone);
            this.showAlert('购买成功', '您的订单已提交！');
          }
        }
      ]
    });
    await alert.present();
  }

  // 弹出输入姓名和手机号的弹窗
  async promptRegistration(activity: any): Promise<void> {
    const alert = await this.alertController.create({
      header: '输入姓名和手机号',
      inputs: [
        {
          name: 'name',
          type: 'text',
          placeholder: '请输入姓名'
        },
        {
          name: 'phone',
          type: 'tel',
          placeholder: '请输入手机号'
        }
      ],
      buttons: [
        {
          text: '取消',
          role: 'cancel'
        },
        {
          text: '确认',
          handler: (data) => {
            console.log('姓名:', data.name);
            console.log('手机号:', data.phone);
            this.showAlert('报名成功', '您已成功报名活动！');
          }
        }
      ]
    });
    await alert.present();
  }

  // 弹出输入上课时间和手机号的弹窗
  async promptCourseEnrollment(course: any): Promise<void> {
    const alert = await this.alertController.create({
      header: '输入上课时间和手机号',
      inputs: [
        {
          name: 'classTime',
          type: 'text',
          placeholder: '请输入上课时间'
        },
        {
          name: 'phone',
          type: 'tel',
          placeholder: '请输入手机号'
        }
      ],
      buttons: [
        {
          text: '取消',
          role: 'cancel'
        },
        {
          text: '确认',
          handler: (data) => {
            console.log('上课时间:', data.classTime);
            console.log('手机号:', data.phone);
            this.showAlert('报名成功', '您已成功报名课程！');
          }
        }
      ]
    });
    await alert.present();
  }

  // 显示成功提示
  async showAlert(header: string, message: string): Promise<void> {
    const alert = await this.alertController.create({
      header: header,
      message: message,
      buttons: ['确定']
    });
    await alert.present();
  }
}
