202226701011/FitMind-app/src/app/page-edit/page-edit.component.ts

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-page-edit',
  templateUrl: './page-edit.component.html',
  styleUrls: ['./page-edit.component.scss'],
  imports: [IonicModule, FormsModule],
  standalone: true,
})
export class PageEditComponent implements OnInit {
  
  // 初始化表单字段
  name: string = '';
  email: string = '';
  phone: string = '';
  address: string = '';
  age: number | null = null;
  gender: string = '';
  height: number | null = null;
  weight: number | null = null;
  activityLevel: string = '';
  dietPreference: string = '';
  dietGroup: string = '';
  avatar: string | null = null;

  // 正则表达式
  emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  phonePattern = /^[0-9]{10,15}$/;
  heightPattern = /^[1-9][0-9]{1,2}$/;
  weightPattern = /^[1-9][0-9]{1,2}$/;

  constructor(private modalCtrl: ModalController) {}

  ngOnInit(): void {
    this.loadSavedData();  // 加载上次保存的数据
  }

  // 加载上次保存的数据
  loadSavedData() {
    const savedData = JSON.parse(localStorage.getItem('userData') || '{}');

    if (savedData) {
      // 使用本地存储的数据填充表单
      this.name = savedData.name || '';
      this.email = savedData.email || '';
      this.phone = savedData.phone || '';
      this.address = savedData.address || '';
      this.age = savedData.age || null;
      this.gender = savedData.gender || '';
      this.height = savedData.height || null;
      this.weight = savedData.weight || null;
      this.activityLevel = savedData.activityLevel || '';
      this.dietPreference = savedData.dietPreference || '';
      this.dietGroup = savedData.dietGroup || '';
      this.avatar = savedData.avatar || null;
    }
  }

  // 保存数据至本地存储
  saveData() {
    const userData = {
      name: this.name,
      email: this.email,
      phone: this.phone,
      address: this.address,
      age: this.age,
      gender: this.gender,
      height: this.height,
      weight: this.weight,
      activityLevel: this.activityLevel,
      dietPreference: this.dietPreference,
      dietGroup: this.dietGroup,
      avatar: this.avatar
    };
    localStorage.setItem('userData', JSON.stringify(userData)); // 将数据保存至本地
  }

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

  confirm() {
    // 验证表单内容是否完整
    if (!this.name || !this.email || !this.phone || !this.age || !this.gender || !this.height || !this.weight || !this.dietPreference || !this.dietGroup) {
      alert("请确保所有必填项已填写！");
      return;
    }

    // 保存用户输入的数据
    this.saveData();

    // 返回数据给父组件
    const userData = {
      name: this.name,
      email: this.email,
      phone: this.phone,
      address: this.address,
      age: this.age,
      gender: this.gender,
      height: this.height,
      weight: this.weight,
      activityLevel: this.activityLevel,
      dietPreference: this.dietPreference,
      dietGroup: this.dietGroup,
      avatar: this.avatar
    };

    return this.modalCtrl.dismiss(userData, 'confirm');
  }

  uploadAvatar() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';

    input.onchange = (event: any) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e: any) => {
          this.avatar = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    };

    input.click();
  }
}