import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonCard,
  IonCardContent,
  IonGrid,
  IonRow,
  IonCol,
  IonAvatar,
  IonButton,
  ModalController,
  IonItem,
  IonList,
  IonSegment,
  IonSegmentButton,
  IonLabel,
  IonSegmentView,
  IonSegmentContent,
} from '@ionic/angular/standalone';
import { CloudQuery, CloudUser } from 'src/lib/cyxncloud';
import { ModalEditPagePage } from '../page/modal/modal-edit-page/modal-edit-page.page';
export interface User {
  avatar: string;
  username: string;
  age: number | null;
  sex: string;
  email: string;
  phoneNumber: string;
  height: number;
  weight: number;
  fans: number;
  likes: number;
}

@Component({
  selector: 'app-tab4',
  templateUrl: 'tab4.page.html',
  styleUrls: ['tab4.page.scss'],
  standalone: true,
  imports: [
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonCard,
    IonGrid,
    IonRow,
    IonCol,
    IonAvatar,
    IonCardContent,
    IonButton,
    IonItem,
    IonList,
    IonSegment,
    IonSegmentButton,
    IonLabel,
    IonSegmentView,
    IonSegmentContent,
  ],
})
export class Tab4Page implements OnInit {
  is_login: boolean = false;
  currentUser: CloudUser | null = null;
  userChangeInfo: any = '';
  user: User = {
    avatar: 'https://ionicframework.com/docs/img/demos/avatar.svg',
    username: '请登录',
    age: 0,
    sex: '-',
    email: '-',
    phoneNumber: '-',
    height: 0,
    weight: 0,
    fans: 0,
    likes: 0,
  };

  constructor(private router: Router, private modalCtrl: ModalController) {
    // this.getAllNews();
    let userCache = localStorage.getItem('userData');
    if (userCache) {
      let userData = JSON.parse(userCache);
      this.user.avatar = userData.avatar;
      this.user.username = userData.username;
      this.user.age = userData.age;
      this.user.sex = userData.sex;
      this.user.email = userData.email;
      this.user.phoneNumber = userData.phoneNumber;
      this.user.height = userData.height;
      this.user.weight = userData.weight;
      this.user.fans = userData.fans;
      this.user.likes = userData.likes;
      let is_loginCache = localStorage.getItem('is_login');
      this.is_login = is_loginCache === 'true' ? true : false;
    }
  }
  hasRefreshedKey = 'hasRefreshed'; // 用于在 localStorage 中存储状态

  ngOnInit() {}

  refreshPage() {
    window.location.reload(); // 强制刷新整个页面
  }

  navigateTo(path: string) {
    this.router.navigate([`/${path}`]);
  }

  async openModal() {
    const modal = await this.modalCtrl.create({
      component: ModalEditPagePage,
    });
    modal.present();
    const { data, role } = await modal.onWillDismiss();
    if (role === 'confirm') {
      console.log(data);
      this.userChangeInfo = data;
      this.updateUser();
    }
  }
  async logout() {
    this.is_login = false;
    let user = new CloudUser();
    let flag = await user.logout();
    localStorage.removeItem('userData');
    localStorage.removeItem('is_login');
  }
  async updateUser() {
    Object.keys(this.userChangeInfo).forEach((key) => {
      if (key == 'age') {
        this.userChangeInfo[key] = Number(this.userChangeInfo[key]);
      }
      if (key == 'height') {
        this.userChangeInfo[key] = Number(this.userChangeInfo[key]);
      }
      if (key == 'weight') {
        this.userChangeInfo[key] = Number(this.userChangeInfo[key]);
      }
    });
    let user = new CloudUser();
    let res = await user.update(this.userChangeInfo);
    console.log('成功更新用户信息');
  }
  newslists: any[] = [];
  // async getAllNews() {
  //   let className = 'News';
  //   let newsQuery = new CloudQuery(className);
  //   let newslist = await newsQuery.getAll();
  //   this.newslists = newslist.results;

  //   this.newslists = newslist.results.map((news: any) => {
  //     // 删除所有空格，并替换换行符\n\n为</p><p>，并在开始和结束处添加<p>和</p>
  //     news.article =
  //       '<p>' +
  //       news.article.replace(/\n\n/g, '</p><p>').replace(/\s+/g, '') +
  //       '</p>';
  //     return news;
  //   });
  // }
}