import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from '@angular/core';
import { TagComponent } from './tag.component';
@Component({
    selector: 'farris-tag-item',
    template: `
    <button class="k-button k-flat border-0" [class.k-primary]="active" [class.k-state-disabled]="disabled" (click)="getValue()">
      {{text}}
    </button>
  `,
    styles: []
})
export class TagItemComponent implements OnInit {

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

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

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

    /* tag 是否选中 */
    get active() {
        if (this.hasParent()) {
            return this.tag.equalModel(this.value);
        }
        return this.nyActive;
    };

    set active(active: boolean) {
        this.nyActive = active;
    }
    nyActive: boolean;

    /* tag广播事件 */
    @Output()
    selectValue = new EventEmitter<any>();

    constructor(private tag: TagComponent,
        private el: ElementRef) { }

    ngOnInit() {

    }

    getValue() {
        if (this.hasParent()) {
            this.tag.setModel(this.value);
        } else {
            this.nyActive = true;
        }
        this.selectValue.emit({
            value: this.value,
            text: this.text
        });
    }

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

}