app-recipe/myapp/src/app/tab3/page-collections/page-collections.page.ts

import { Component, OnInit } from '@angular/core';
import { 
  IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem,
  IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList,
  IonThumbnail, IonTitle, IonToolbar, IonButton
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { heart, heartOutline, trash, timeOutline, refresh } from 'ionicons/icons';
import { CloudObject, CloudQuery } from 'src/lib/ncloud';
import { NavController } from '@ionic/angular';
import { Router } from '@angular/router';

/**
 * 收藏项接口定义
 * @interface CollectionItem
 * @description 定义收藏项的数据结构
 */
interface CollectionItem {
  /** 收藏项ID */
  id: number;
  /** 收藏项名称 */
  name: string;
  /** 收藏项图片URL */
  image: string;
  /** 收藏时间（可选） */
  time?: Date;
}

/**
 * 收藏列表页面组件
 * @Component 装饰器定义组件元数据
 * @description 显示和管理用户收藏的食谱列表
 */
@Component({
  selector: 'app-page-collections',
  templateUrl: './page-collections.page.html',
  styleUrls: ['./page-collections.page.scss'],
  standalone: false
})
export class PageCollectionsPage implements OnInit {
  /**
   * 收藏列表数据
   * @type {CollectionItem[]}
   */
  collections: CollectionItem[] = [];

  /**
   * 构造函数
   * @param {NavController} navCtrl Ionic导航控制器
   * @param {Router} router Angular路由服务
   * 
   * @description 
   * 初始化时添加所需图标
   */
  constructor(private navCtrl: NavController, private router: Router) { 
    addIcons({ heart, heartOutline, trash });
  }

  /**
   * 组件初始化生命周期钩子
   * @returns {void}
   */
  ngOnInit(): void {
    this.loadRecipeFavoriteList();
  }

  /**
   * 食谱收藏列表
   * @type {CloudObject[]}
   */
  recipeFavoriteList: CloudObject[] = [];

  /**
   * 食谱数据列表
   * @type {any[]}
   */
  recipeDataList: any[] = [];

  /**
   * 加载用户收藏的食谱列表
   * @async
   * @returns {Promise<void>}
   * 
   * @description
   * 从云端查询用户收藏的食谱，并关联查询完整的食谱数据
   */
  async loadRecipeFavoriteList(): Promise<void> {
    const query = new CloudQuery("RecipeFavorite");
    query.include("recipe"); // 关联查询Recipe表
    const favorites = await query.find();

    console.log('favorites', favorites);
    
    this.recipeFavoriteList = favorites.map(fav => fav.get("recipe"));
    console.log("Recipe数据列表:", this.recipeFavoriteList);
  }

  /**
   * 移除收藏项
   * @param {number} id 要移除的收藏项ID
   * @returns {void}
   * 
   * @description
   * 从收藏列表中过滤掉指定ID的项
   */
  removeCollection(id: number): void {
    this.collections = this.collections.filter(item => item.id !== id);
  }

  /**
   * 导航到收藏详情页面
   * @param {any} recipeId 食谱ID
   * @returns {void}
   */
  goToDetail(recipeId: any): void {
    this.navCtrl.navigateForward(`/tabs/tab3/page-collections/page-collections-detail/${recipeId}`);
    console.log('Navigating to page-collections-detail');
  }

  // 以下是预设数据（已注释）
  /**
   * @ignore
   * 加载模拟收藏数据
   * @returns {void}
   */
  /*
  loadCollections(): void {
    this.collections = [
      {
        id: 1,
        name: '意大利肉酱面',
        image: 'https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb',
        time: new Date('2023-05-15')
      },
      // ...其他模拟数据
    ];
  }
  */
}