web3-202226701052/src/app/tab1/tab1.page.ts

import { Component, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import { ModalController, NavController } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements AfterViewInit {

  doctors = [
    {
      avatar: '../../assets/images/doctor.png',
      name: '张医生',
      specialty: '心血管科'
    },
    {
      avatar: '../../assets/images/doctor.png',
      name: '李医生',
      specialty: '神经科'
    },
    {
      avatar: '../../assets/images/doctor.png',
      name: '王医生',
      specialty: '儿科'
    },
    {
      avatar: '../../assets/images/doctor.png',
      name: '赵医生',
      specialty: '外科'
    },
    {
      avatar: '../../assets/images/doctor.png',
      name: '陈医生',
      specialty: '内科'
    }
  ];

  // 功能按钮数据
  functionItems1 = [
    { label: '我的病历', icon: 'document-text', route: '/medical-records' },
    { label: '在线问诊', icon: 'chatbubbles', route: '/online-consultation' },
    { label: '健康档案', icon: 'person', route: '/health-profile' },
    { label: '预约挂号', icon: 'calendar', route: '/appointment' },
    { label: '健康资讯', icon: 'newspaper', route: '/health-news' }
  ];

  functionItems2 = [
    { label: '药品购买', icon: 'medkit', route: '/medicine-purchase' },
    { label: '体检套餐', icon: 'clipboard', route: '/checkup-packages' },
    { label: '专家讲座', icon: 'podium', route: '/expert-lectures' },
    { label: '远程医疗', icon: 'videocam', route: '/telemedicine' },
    { label: '健康社区', icon: 'people', route: '/health-community' }
  ];

  currentIndex = 0;
  startX: number = 0; // 初始化 startX
  endX: number = 0;   // 初始化 endX
  isDragging: boolean = false; // 标记是否正在拖动
  currentTranslate: number = 0; // 当前的平移值
  cardWidth = 216; // 每个卡片的宽度加上间距 (200 + 16)
  isCyclic: boolean = true; // 是否启用循环滑动

  ngAfterViewInit() {
    this.updateCarousel(); // 确保初始状态正确
    this.calculateCardWidth(); // 动态计算卡片宽度
  }

  // 计算卡片宽度
  calculateCardWidth() {
    const container = document.getElementById('carousel');
    if (container && container.children.length > 0) {
      const firstCard = container.children[0] as HTMLElement;
      this.cardWidth = firstCard.offsetWidth + 16; // 加上间距
    }
  }

  // 更新轮播位置
  updateCarousel() {
    this.currentTranslate = -this.currentIndex * this.cardWidth;
    this.updateCarouselPosition();
  }

  // 更新轮播位置
  updateCarouselPosition() {
    const container = document.getElementById('carousel');
    if (container) {
      container.style.transform = `translateX(${this.currentTranslate}px)`;
    }
  }

  // 触摸开始
  onTouchStart(event: TouchEvent) {
    this.startX = event.touches[0].clientX;
    this.isDragging = true;
  }

  // 触摸移动
  onTouchMove(event: TouchEvent) {
    if (this.isDragging) {
      const touchX = event.touches[0].clientX;
      const deltaX = touchX - this.startX;
      this.currentTranslate = -this.currentIndex * this.cardWidth + deltaX; // 动态更新平移值

      // 限制 currentTranslate 的值
      const maxTranslate = -(this.doctors.length - 1) * this.cardWidth;
      this.currentTranslate = Math.max(Math.min(this.currentTranslate, 0), maxTranslate);

      this.updateCarouselPosition();
    }
  }

  // 触摸结束
  onTouchEnd(event: TouchEvent) {
    this.endX = event.changedTouches[0].clientX;
    this.isDragging = false;

    const swipeThreshold = 50; // 滑动阈值
    const deltaX = this.startX - this.endX;

    if (deltaX > swipeThreshold) {
      // 向左滑动
      this.nextSlide();
    } else if (deltaX < -swipeThreshold) {
      // 向右滑动
      this.prevSlide();
    } else {
      // 如果滑动距离不够，则恢复到原来的位置
      this.snapToNearestCard();
    }
  }

  // 上一张
  prevSlide() {
    if (this.isCyclic) {
      if (this.currentIndex === 0) {
        this.currentIndex = this.doctors.length - 1;
      } else {
        this.currentIndex--;
      }
    } else {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    }
    this.updateCarousel();
  }

  // 下一张
  nextSlide() {
    if (this.isCyclic) {
      if (this.currentIndex === this.doctors.length - 1) {
        this.currentIndex = 0;
      } else {
        this.currentIndex++;
      }
    } else {
      if (this.currentIndex < this.doctors.length - 1) {
        this.currentIndex++;
      }
    }
    this.updateCarousel();
  }

  // 快照到最近的卡片
  snapToNearestCard() {
    const cardIndex = Math.round(-this.currentTranslate / this.cardWidth);
    this.currentIndex = Math.max(0, Math.min(cardIndex, this.doctors.length - 1));
    this.updateCarousel();
  }
  // 在线咨询按钮点击事件
  onConsultNow() {
    console.log(`立即咨询`);
    this.router.navigate(['/consultation']);
  }

  // 在线咨询按钮点击事件
  onlineConsultNow(doctor: any) {
    console.log(`在线咨询: ${doctor.name}`);
    // 跳转到 ConsultationPage 并传递医生信息
    this.router.navigate(['/consultation'], { state: { doctor: doctor } });
  }

  // 导航到指定路由
  navigateTo(route: string) {
    this.router.navigate([route]);
  }

  // 发布求医信息
  publishHealthInfo() {
    // 这里可以添加发布求医信息的逻辑
    console.log('发布求医信息');
  }

  isLoginModalOpen = false; // 声明 isLoginModalOpen 属性
  user = {
    username: '',
    password: ''
  };

  constructor(
    private router: Router,
    private modalController: ModalController,
    private navCtrl: NavController,
    private http: HttpClient // 注入 HttpClient
  ) {}

  openLoginModal() {
    this.isLoginModalOpen = true;
    console.log('打开登录/注册模态框');
  }

  closeLoginModal() {
    this.isLoginModalOpen = false;
    console.log('关闭登录/注册模态框');
  }

  onLoginModalDismissed(event: any) {
    this.isLoginModalOpen = false;
    console.log('登录/注册模态框已关闭');
  }

  onLoginFormSubmit(formValue: any) {
    // 处理登录逻辑
    console.log('登录表单提交:', formValue);

    // 发送登录请求
    this.loginUser(formValue.username, formValue.password)
      .subscribe(
        (response) => {
          console.log('登录成功:', response);
          // 这里可以处理登录成功的逻辑，例如跳转到主页
          this.closeLoginModal();
        },
        (error) => {
          console.error('登录失败:', error);
          // 这里可以处理登录失败的逻辑，例如显示错误消息
          this.closeLoginModal();
        }
      );
  }

  registerUser() {
    // 处理注册逻辑
    console.log('注册用户:', this.user);

    // 发送注册请求
    this.registerNewUser(this.user.username, this.user.password)
      .subscribe(
        (response) => {
          console.log('注册成功:', response);
          // 这里可以处理注册成功的逻辑，例如跳转到登录页面
          this.closeLoginModal();
        },
        (error) => {
          console.error('注册失败:', error);
          // 这里可以处理注册失败的逻辑，例如显示错误消息
          this.closeLoginModal();
        }
      );
  }

  private loginUser(username: string, password: string): Observable<any> {
    const loginUrl = 'YOUR_API_ENDPOINT/login'; // 替换为你的登录 API 端点
    return this.http.post(loginUrl, { username, password })
      .pipe(
        map(response => response),
        catchError(error => {
          throw error;
        })
      );
  }

  private registerNewUser(username: string, password: string): Observable<any> {
    const registerUrl = 'YOUR_API_ENDPOINT/register'; // 替换为你的注册 API 端点
    return this.http.post(registerUrl, { username, password })
      .pipe(
        map(response => response),
        catchError(error => {
          throw error;
        })
      );
  }

  // 新增方法：处理“点击了解更多”按钮点击事件
  onLearnMore() {
    // 跳转到详情页面
    this.navCtrl.navigateForward('/details');
  }
}