import { Component, OnInit, Input, Output, EventEmitter, ElementRef, Optional, HostBinding } from '@angular/core';
@Component({
  selector: 'farris-tag',
  template: `
    <span [class]="'btn btn-'+ type +' btn-'+ size"
    [class.active]="active"
    [class.disabled]="disabled"
    [class.farris-tag-disabled]="disabled"
    (click)="getValue()" *ngIf="exist">
      <ng-content></ng-content>
      <i class="k-icon k-i-close" *ngIf="closable" (click)="closeHandler($event)"></i>
    </span>
  `,
  styleUrls: ['./tag.component.scss']
})
export class FarrisTagComponent implements OnInit {

  /* 标签大小 */
  @Input()
  get size() {
    if (this.nySize === 'small') {
      return 'sm';
    } else if (this.nySize === 'large') {
      return 'lg';
    } else {
      return 'md';
    }
  }

  set size(size: string) {
    this.nySize = size;
  }

  /* 类型样式 */
  @Input()
  type = 'secondary';

  /* tag文本 */
  @Input()
  text: any;

  /* tag标识 */
  @Input()
  value: any;

  /* 禁用 */
  @Input()
  disabled: boolean;

  /* 是否可关闭 */
  @Input()
  closable: boolean;

  /* close emit事件 */
  @Output()
  close = new EventEmitter<any>();


  @HostBinding('class.farris-tag') tagClass() {
    return true;
  }
  exist = true;
  /* tag 是否选中 */
  get active() {
    return this.nyActive;
  };

  set active(active: boolean) {
    this.nyActive = active;
  }
  nyActive: boolean;
  nySize: string;
  /* tag广播事件 */
  @Output()
  selectValue = new EventEmitter<any>();

  constructor(private el: ElementRef) { }

  ngOnInit() {

  }

  getValue() {
    if (this.disabled) {
      return;
    }
    this.nyActive = !this.nyActive;
    this.selectValue.emit({
      value: this.value,
      active: this.active
    });
  }

  hasParent() {
    return this.el.nativeElement.parentElement.classList.contains('farris-tag');
  }

  closeHandler(e: any) {
    e.preventDefault();
    this.exist = false;
    this.close.emit(this.value);
  }

}