bg/src/app/tab2/plan-creation-modal.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ModalController } from '@ionic/angular/standalone';
import { 
  IonHeader, IonToolbar, IonTitle, IonButtons, 
  IonButton, IonIcon, IonContent, IonItem, 
  IonInput, IonTextarea, IonSelect, IonSelectOption,
  IonLabel, IonCheckbox, IonDatetime
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { close, save, barbell, body, walk, flame, bicycle, calendar } from 'ionicons/icons';

// 定义新计划对象的接口
interface NewPlan {
  name: string;
  description: string;
  duration: number;
  difficulty: string;
  goals: string[];
  icon: string;
  startDate: string; // 确保包含这个属性
}

@Component({
  selector: 'app-plan-creation-modal',
  templateUrl: './plan-creation-modal.component.html',
  styleUrls: ['./plan-creation-modal.component.scss'],
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon,
    IonContent, IonItem, IonInput, IonTextarea, IonSelect, IonSelectOption,
    IonLabel, IonCheckbox, IonDatetime
  ]
})
export class PlanCreationModalComponent {
  // 使用接口定义 newPlan
  newPlan: NewPlan = {
    name: '',
    description: '',
    duration: 4,
    difficulty: 'beginner',
    goals: [] as string[],
    icon: 'fitness',
    startDate: new Date().toISOString().split('T')[0] // 只保留日期部分
  };

  // 获取当前日期字符串 (YYYY-MM-DD)
  get todayDate(): string {
    return new Date().toISOString().split('T')[0];
  }

  // 日期变更处理方法
  dateChanged(event: any) {
    const value = event?.detail?.value;
    if (value) {
      this.newPlan.startDate = value.split('T')[0]; // 确保只保存日期部分
    }
  }

  fitnessGoals = [
    { name: '跑步', value: 'running', icon: 'walk' },
    { name: '减脂', value: 'fat_loss', icon: 'flame' },
    { name: '增肌', value: 'muscle_gain', icon: 'barbell' },
    { name: '耐力', value: 'endurance', icon: 'bicycle' },
    { name: '柔韧性', value: 'flexibility', icon: 'body' }
  ];

  constructor(private modalCtrl: ModalController) {
    addIcons({ close, save, barbell, body, walk, flame, bicycle, calendar });
  }

  cancel() {
    this.modalCtrl.dismiss(null, 'cancel');
  }

  create() {
    this.modalCtrl.dismiss(this.newPlan, 'confirm');
  }

  toggleGoal(goal: string) {
    const index = this.newPlan.goals.indexOf(goal);
    if (index > -1) {
      this.newPlan.goals.splice(index, 1);
    } else {
      this.newPlan.goals.push(goal);
    }
    
    // 自动选择图标
    if (this.newPlan.goals.includes('running')) {
      this.newPlan.icon = 'walk';
    } else if (this.newPlan.goals.includes('fat_loss')) {
      this.newPlan.icon = 'flame';
    } else if (this.newPlan.goals.includes('muscle_gain')) {
      this.newPlan.icon = 'barbell';
    } else {
      this.newPlan.icon = 'fitness';
    }
  }
}