import { Component, OnInit, Input, Output, EventEmitter, ViewChild, Directive, ElementRef, Injector } from '@angular/core';
import { TreeNode, TreeTableComponent } from '@farris/ui-treetable';
import { FarrisTemplateDirective, CommonUtils, } from '@farris/ui-common';
@Component({
    selector: 'farris-tree',
    template: `
        <farris-treetable #t2
            [width]="width"
            [height]="height"
            [data]="data"
            [idField]="idField"
            [singleSelect]="singleSelect"
            [showCheckbox]="showCheckbox"
            [showIcon]="showIcon"
            [showFilterBar]="false"
            [showBorder]="showBorder"
            [disabled]="disabled"
            [loadDataType]="loadDataType"
            [checkOnSelect]="checkOnSelect"
            [selectOnCheck]="selectOnCheck"
            [onlySelectSelf]="onlySelectSelf"
            [fit]="fit"
            [cascadeCheck]="cascadeCheck"
            [cascadeDown]="cascadeDown"
            [cascadeUp]="cascadeUp"
            [emptyMessage]="emptyMessage"
            [keepSelect]="keepSelect"
            [virtualized]="virtualized"
            [onlySelectLeaf]="onlySelectLeaf"
            [leafIcon]="leafIcon"
            [expandIcon]="expandIcon"
            [collapseIcon]="collapseIcon"
            [remoteSort]="remoteSort"
            [sortName]="displayText"
            [sortOrder]="sortOrder"
            [multiSort]="false"
            (nodeSelected)="nodeSelected.emit($event)"
            (nodeUnSelect)="nodeUnSelect.emit($event)"
            (nodeChecked)="nodeChecked.emit($event)"
            (nodeUnChecked)="nodeUnChecked.emit($event)"
            (search)="search.emit($event)"
            (dblClick)="dblClick.emit($event)"
            (loadedData)="loadedData.emit($event)"
        >
            <ng-template farrisTemplate="body" let-rowNode let-treeNode="node" let-rowData="rowData">
                <tr
                    #row="row"
                    [selectRow]="rowNode"
                    [dblclick]="true"
                    (mouseenter)="onMouseEnter($event)"
                    (mouseleave)="onMouseLeave($event)"
                    class="farris-table-selectedrow"
                >
                    <td style="border: 0" [style.color]="row.selectRowDisabled ? '#a6a6a6' : '#333'">
                        <farris-treeTableToggler [rowNode]="rowNode"></farris-treeTableToggler>
                        <span [show-title]="showTips"
                            [innerHTML]="(utils || t2.utils).getValue(displayText, rowData, true) | safe: 'html'"></span>

                        <span
                            class="rbtn"
                            style=" float: right; width: 40px; display:none; cursor: pointer"
                            (click)="onClickAppendBtn($event)"
                            >{{ appendText }}</span
                        >
                    </td>
                </tr>
            </ng-template>
        </farris-treetable>
    `
})
export class TreeComponent implements OnInit {

    @ViewChild(TreeTableComponent) treeTable: TreeTableComponent;

    @Input() showTips = true;

    /** 宽度 */
    @Input() width = 500;
    /** 高度 */
    @Input() height = 400;

    @Input() showFilterBar = false;
    /** 是否启用多选 */
    @Input() singleSelect = true;
    /** 启用多选后，是否显示checkbox */
    @Input() showCheckbox = true;
    /** 主键字段 */
    @Input() idField: string;
    /** 文本字段 */
    @Input() displayText: string;
    /** 显示图标 */
    @Input() showIcon = false;
    /** 显示边框线 */
    @Input() showBorder = false;
    /** 禁用。 禁用时不允许选中行 */
    @Input() disabled = false;
    /** 数据加载方式
     * - all: 全部加载
     * - async: 分层加载
     */
    @Input() loadDataType: 'all' | 'async' = 'all';

    /** 当多选时，选中当前行并钩选 */
    @Input() checkOnSelect = false;
    /** 当多选时，钩选并选中当前行 */
    @Input() selectOnCheck = false;
    /**
     * 启用多选时，此属性为true 时，仅当前行选中
     */
    @Input() onlySelectSelf = false;

    /** 设置为true时自适应父容的尺寸 */
    @Input() fit = false;

    /** 启用级联选中功能 */
    @Input() cascadeCheck = true;
    /** 向下级联选中 */
    @Input() cascadeDown = true;
    /** 向上级联选中 */
    @Input() cascadeUp = true;
    /** 空数据时，显示的提示文本 */
    @Input() emptyMessage = '暂无数据';

    /**
     * 单击行选中后，在次点击不会被取消选中状态;
     */
    @Input() keepSelect = true;
    /** 虚拟加载 */
    @Input() virtualized = false;
    /**
     * 仅允许选择叶子节点
     * - default: 应用服务器端传回的设置，如果服务器端没有设置，则与 no 保持一至；
     * - yes: 如果客户端设置为 `yes`, 服务器端的设置失效；
     * - no: 允许选择所有节点；服务器端设置失效
     */
    @Input() onlySelectLeaf: boolean | 'default' | 'yes' | 'no' = 'default';

    /** 叶子节点图标 */
    @Input() leafIcon = 'file';
    /** 节点展开图标 */
    @Input() expandIcon = 'folder-open';
    /** 节点折叠图标 */
    @Input() collapseIcon = 'folder';

    /** 启用远端排序 */
    @Input() remoteSort = true;
    /** 排序方式 asc | desc */
    @Input() sortOrder: string;

    @Input() data: TreeNode[] = [];
    /** 附加按钮TXT */
    @Input() appendText = '';

    /** 附加按钮点击事件 */
    @Output() appendBtnClick: EventEmitter<any> = new EventEmitter();

    /** 选中事件 */
    @Output() nodeSelected: EventEmitter<any> = new EventEmitter();
    /** 取消选中事件 */
    @Output() nodeUnSelect: EventEmitter<any> = new EventEmitter();

    /** 钩选 */
    @Output() nodeChecked: EventEmitter<any> = new EventEmitter();
    /** 取消钩选 */
    @Output() nodeUnChecked: EventEmitter<any> = new EventEmitter();
    /** 查询 */
    @Output() search: EventEmitter<any> = new EventEmitter();

    @Output() dblClick: EventEmitter<any> = new EventEmitter();
    @Output() loadedData: EventEmitter<any> = new EventEmitter();
    constructor( public utils: CommonUtils) {}

    ngOnInit() {}

    onMouseEnter($event: MouseEvent) {
        if (this.appendText) {
            ($event.target as any).querySelector('.rbtn').style.display = 'inline-block';
        }
    }

    onMouseLeave($event: MouseEvent) {
        if (this.appendText) {
            ($event.target as any).querySelector('.rbtn').style.display = 'none';
        }
    }

    onClickAppendBtn($event: MouseEvent) {
        this.appendBtnClick.emit();
        $event.stopPropagation();
    }
}