import {
    Component, OnInit, Input, ContentChild, TemplateRef, ViewChild,
    ElementRef, ViewChildren, QueryList, HostListener, EventEmitter, Output
} from '@angular/core';

export interface Card {
    isSelected: boolean;
    data: any;
}
@Component({
    selector: 'app-work-flow',
    templateUrl: './work-flow.component.html',
    styleUrls: ['./work-flow.component.css']
})
export class WorkFlowComponent implements OnInit {
    cardList: Card[];
    @Input()
    set itemSource(itemSource: any[]) {
        if (!itemSource) { this.cardList = []; }
        this.cardList = itemSource.map(item => ({ isSelected: false, data: item }));
    }
    @Input() titleKey: string;
    @Input() showCardCheckbox = false; // 是否显示CheckBox
    @Input() activedCardIndex; // 当前正在点击的节点
    @Output() clickCard = new EventEmitter<any>();
    @Output() changeChecked = new EventEmitter<any>();
    @Output() selectAllCard = new EventEmitter<any>();
    @ContentChild('cellTemplate') ct: TemplateRef<any>;
    @ContentChild('cellTemplate') cardHeader: TemplateRef<any>;
    @ContentChild('cellTemplate') cardBody: TemplateRef<any>;
    @ContentChild('cellTemplate') cardIcons: TemplateRef<any>;
    @ContentChild('cellTemplate') boxHeader: TemplateRef<any>;
    @ViewChild('cardListRef') cardListRef: ElementRef;
    cardRefs: QueryList<ElementRef>;
    @ViewChildren('cardRef') set cardRef(cardRefs: QueryList<ElementRef>) {
        this.cardRefs = cardRefs;
        this.resizeCard(cardRefs);
    }
    isSelectedAll = false; // 全选
    selectedItems: any[] = [];
    @HostListener('window:resize')
    onresize() {
        this.resizeCard(this.cardRefs);
    }
    constructor() { }

    ngOnInit(): void { }

    onClickCard(card, index, e) {
        this.clickCard.emit({ card, index, e });
    }

    onChangeChecked(card, index, e) {
        card.isSelected = e;
        if (!e) {
            this.isSelectedAll = false;
            this.selectedItems.splice(this.selectedItems.indexOf(card.data), 1);
        } else {
            this.isSelectedAll = this.cardList.findIndex(_ => _.isSelected === false) === -1;
            if (this.isSelectedAll) {
                this.selectAllCard.emit({ card, index, e });
            }
            this.selectedItems.push(card.data);
        }
        this.changeChecked.emit({ card, index, e });
    }

    resizeCard(cardRefs) {
        let cardWidth;
        const listWidth = parseInt(getComputedStyle(this.cardListRef.nativeElement).width, 10);
        const cardNum = Math.floor(listWidth / 300);
        cardWidth = (listWidth / cardNum).toFixed(2) + 'px';
        cardRefs.forEach(cardRef => {
            cardRef.nativeElement.style.width = cardWidth;
        });
    }
}