import { NgForOf } from '@angular/common';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { IonIcon } from '@ionic/angular/standalone';

@Component({
  selector: 'app-edit-ratio-star',
  templateUrl: './edit-ratio-star.component.html',
  styleUrls: ['./edit-ratio-star.component.scss'],
  standalone: true,
  imports:[
    IonIcon,NgForOf
  ]
})
export class EditRatioStarComponent  implements OnInit {

  @Input()
  fillIcon:string = "star"
  @Input()
  emptyIcon:string = "star-outline"
  @Input()
  color:string = "#FFD700"

  @Input()
  value:number = 2;
  @Output()
  onValueChange:EventEmitter<number> = new EventEmitter<number>

  maxValue:number = 10;
  starCheckList:Array<boolean> = []
  constructor() {
   }

  ngOnInit() {
    this.makeStarList()
  }

  onStarClick(index:number){
    let score = index + 1

    if(score==this.value){ // 点原星星,设置0分
      this.value = 0
    }else{ // 根据星星位置,设置分数
      this.value = score;
    }

    this.makeStarList();
    this.onValueChange.emit(this.value)
  }
  makeStarList(){
    let starList = []
    for (let index = 0; index < this.value; index++) {
      starList.push(true)
    }
    let leftCount = this.maxValue - this.value
    for (let index = 0; index < leftCount; index++) {
      starList.push(false)
    }
    this.starCheckList = starList
  }

}
