import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // 导入CommonModule以使用ngIf和ngFor
import { FormsModule } from '@angular/forms'; // 从@angular/forms导入FormsModule
import { IonicModule } from '@ionic/angular'; // 导入Ionic模块

@Component({
  selector: 'app-tab2',
  standalone: true,
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss'],
  imports: [
    CommonModule,  // 添加CommonModule
    FormsModule,   // 添加FormsModule
    IonicModule,   // 添加IonicModule
  ],
})
export class Tab2Page {
  searchQuery: string = ''; // 用户的搜索查询
  searchResults: { name: string; description: string }[] = []; // 搜索结果数组

  constructor() {}

  // 搜索食材的方法
  searchIngredients() {
    // 模拟食材数据
    const allIngredients = [
      { name: '西红柿', description: '富含维生素C和抗氧化剂。' },
      { name: '鸡胸肉', description: '高蛋白低脂肪，适合健身人士。' },
      { name: '菠菜', description: '富含铁和维生素K。' },
      { name: '燕麦', description: '高纤维，有助于消化。' },
      { name: '胡萝卜', description: '富含β-胡萝卜素，促进视力健康。' },
      { name: '苹果', description: '富含纤维和维生素C。' },
      // 可以添加更多食材
    ];

    // 根据搜索查询过滤食材
    this.searchResults = allIngredients.filter(ingredient =>
      ingredient.name.includes(this.searchQuery)
    );
  }

  // 查看食材详情的方法
  viewIngredientDetails(ingredient: any) {
    // 处理查看食材详情的逻辑
    console.log('查看食材详情:', ingredient);
    // 这里可以弹出食材详情的模态框或显示更多信息
  }
}