import { Component, Output, EventEmitter } from '@angular/core';
import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonInput, IonButton, IonChip, IonLabel, IonIcon } from '@ionic/angular/standalone';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { addIcons } from 'ionicons';
import { close, barbellOutline, personOutline, square, alarmOutline } from 'ionicons/icons';
@Component({
  selector: 'app-tag-input',
  templateUrl: './tag-input.component.html',
  styleUrls: ['./tag-input.component.scss'],
  standalone: true,
  imports: [IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonInput, IonButton, IonChip, IonLabel, IonIcon, CommonModule, FormsModule]
})

export class TagInputComponent {
  tags: string[] = [];  // 标签列表
  tagInput: string = '';  // 输入框的值

  // 定义一个事件输出，类型为string[]
  @Output() tagsChanged: EventEmitter<string[]> = new EventEmitter<string[]>();

  // 添加标签方法
  addTag() {
    if (this.tagInput && !this.tags.includes(this.tagInput)) {
      this.tags.push(this.tagInput);  // 将标签添加到数组
      this.tagsChanged.emit(this.tags);  // 发射更新后的标签列表
      this.tagInput = '';  // 清空输入框
    }
  }

  // 删除标签方法
  removeTag(tag: string) {
    this.tags = this.tags.filter(t => t !== tag);  // 从标签数组中移除
    this.tagsChanged.emit(this.tags);  // 发射更新后的标签列表
  }
  constructor() {
    addIcons({ close, personOutline, barbellOutline, alarmOutline, square });
  }
}
