s202226701018/wisdom-app/src/app/tab2/tab2.page.ts

import { Component } from '@angular/core';
import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton, IonFabList, IonFooter, IonInput } from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { addIcons } from 'ionicons';
import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
import { ArticleCardComponent } from '../component/article-card/article-card.component';
import { CommonModule } from '@angular/common';
import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
import { NavigationLanComponent } from '../component/navigation-lan/navigation-lan.component';
import { Router } from '@angular/router';
import {
  chevronDownCircle,
  chevronForwardCircle,
  chevronUpCircle,
  colorPalette,
  document,
  globe,
} from 'ionicons/icons';
import { FormsModule } from '@angular/forms';
addIcons({ airplane, bluetooth, call, wifi });
addIcons({ chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe });
@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
    IonLabel,IonItem,IonList,IonAvatar,ArticleCardComponent,CommonModule,IonButton,
    IonSegment, IonSegmentButton,NavigationLanComponent,
    IonSegmentContent,IonSegmentView,IonCardContent, IonCardTitle, IonCardHeader,IonCard,
    IonModal,IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton,IonFabList,IonFooter,
    IonInput,IonSegment,IonSegmentButton,FormsModule
  ]
})

export class Tab2Page {
  selectedSegment:string = '热点';
  segments = [ '热点', '专家科普', '睡眠', '生活', '男性', '女性', '两性', '辟谣', '母婴', '美容'];
  segmentChanged(event: any) {
    this.selectedSegment = event.detail.value;
    console.log(this.selectedSegment);
    this.loadCards(); // 重新加载卡片
  }
 /**
  * 轮播图
  */
 images = [
  'https://picsum.photos/800/400?random=7',
  'https://picsum.photos/800/400?random=8',
  'https://picsum.photos/800/400?random=9',
  'https://picsum.photos/800/400?random10',
  'https://picsum.photos/800/400?random=11',
  'https://picsum.photos/800/400?random=12',
];

currentSlide = 0;
intervalId: any;
setSlidePosition() {
  // 这里不需要额外的逻辑，因为在 HTML 中已经通过绑定实现
}

nextSlide() {
  this.currentSlide = (this.currentSlide + 1) % this.images.length;
}

prevSlide() {
  this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
}

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

startAutoSlide() {
  this.intervalId = setInterval(() => this.nextSlide(), 3000);
}


  products: Array<CloudObject> = []; // 当前显示的科普信息
  allCards: Array<CloudObject> = []; // 所有科普信息

  //搜索功能
  searchTerm: string = '';

  async searchProducts(event: any) {
    this.searchTerm = event.detail.value.toLowerCase();
    if (this.searchTerm) {
      this.products = this.allCards.filter(product =>
        product.get('topic').toLowerCase().includes(this.searchTerm) ||
        product.get('title').toLowerCase().includes(this.searchTerm) ||
        product.get('category').toLowerCase().includes(this.searchTerm) ||
        product.get('content')[0].toLowerCase().includes(this.searchTerm)
      );
    } else {
      this.products = [...this.allCards]; // 如果搜索词为空，则显示所有科普信息
    }
  }

  isModalOpen = false;
  currentProduct: any;      // 当前选择的科普信息

  openDetailModal(product?: any) {
    let user = new CloudUser;
    if (!user.id){
      this.router.navigate(['/tabs/tab4'])
      return
    }
    this.isModalOpen = true;
    this.currentProduct = product;
  }
  closeDetailModal() {
    this.isModalOpen = false;
    this.currentProduct = null;
  }
  shareDetail = false;
  shareDetailModal() {
    this.shareDetail = true;
    // 在这里确保模态框的aria-hidden属性被正确处理
    // setTimeout(() => {
    //   const modalElement = document.querySelector('ion-modal');
    //   if (modalElement) {
    //     modalElement.setAttribute('aria-hidden', 'false');
    //   }
    // }, 0);
  }
  closeShareModal(){
    this.shareDetail = false;

  }
  copyLink() {
    console.log('复制链接');
  }
  // type:"HotDot"|"export"|"sleep"|"life"|"男"|"女" = "HotDot"

  constructor(
    private modalCtrl:ModalController,
    private router:Router,
  ) { 
    
  }

  cards: Array<CloudObject> = []; // 当前显示的分类卡片
  // async typeChange(ev: any) {
  //   this.type = ev?.detail?.value || ev?.value || 'HotDot';
  //   console.log(this.type);
  //   await this.loadCards(); // 重新加载卡片
  // }
  async loadAllCards() {
    const query = new CloudQuery('HotDot');
    this.allCards = await query.find();
  }

  async loadCards() {
    const query = new CloudQuery('HotDot');
    query.equalTo('category', this.selectedSegment);
    this.cards = await query.find();
  }


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

  openAiKnowledge(){
    this.router.navigate(['tabs/ai-knowledge']);
  }
  ngOnInit() {
    this.loadAllCards();
    this.loadCards(); // 初始化时加载所有科普信息
  }
  comment:string = ''
  onCommentInput(e:any){
    this.comment = e.detail.value
    console.log(this.comment);
  }
  postComment(){
    console.log('发布评论');
  }
}