import { InterpolationConfig } from '@angular/compiler';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonButton,
  IonButtons,
  IonIcon,
  IonSearchbar,
  IonCard,
  IonCardHeader,
  IonCardContent,
  IonCardTitle,
  IonList,
  IonItem,
  IonLabel,
  IonGrid,
  IonRow,
  IonCol,
  IonThumbnail,
  IonAvatar,
  IonMenuButton,
  IonCardSubtitle,
  IonTabs,
  IonTabBar,
  IonTabButton,
  IonSegment,
  IonSegmentButton,
} from '@ionic/angular/standalone';
@Component({
  selector: 'edit-rating-star',
  templateUrl: './edit-rating-star.component.html',
  styleUrls: ['./edit-rating-star.component.scss'],
  standalone: true,
  imports: [
    IonCardContent,
    IonCard,
    IonIcon,
    IonContent,
    IonButton,
    IonLabel,
    IonItem,
  ],
})
export class EditRatingStarComponent {
  @Input() score: number = 0; // 默认分值为0
  @Input() scoreMax: number = 5; // 最大分值
  starList: boolean[] = []; // 星星状态数组

  @Output() onScoreChange: EventEmitter<number> = new EventEmitter<number>();

  constructor() {
    this.updateStarList();
  }

  ngOnChanges() {
    this.updateStarList();
  }

  // 更新星星数组
  private updateStarList() {
    this.starList = Array(this.scoreMax).fill(false);
    for (let i = 0; i < this.score; i++) {
      this.starList[i] = true;
    }
  }

  // 打分方法
  rate(index: number) {
    if (this.score === index + 1) {
      // 如果点击的是当前分值，清零
      this.score = 0;
    } else {
      // 否则更新分值
      this.score = index + 1;
    }
    this.updateStarList();
    this.onScoreChange.emit(this.score); // 触发分值变化事件
  }
}
