import { Component, Input, OnInit, Output, ViewChild, EventEmitter, TemplateRef } from '@angular/core';
import { DatagridComponent } from '@farris/ui-datagrid';
import { TreeTableComponent } from '@farris/ui-treetable';
import { DisplayType, PRIMARY_KEY } from './types';

@Component({
  selector: 'farris-selector',
  templateUrl: './selector.component.html',
  styleUrls: ['./selector.component.css']
})
export class SelectorComponent implements OnInit {
  //#region  viewchild
  /**
   * tree instance
   */
  @ViewChild('treetable') treetable: TreeTableComponent;
  /**
   * grid instance
   */
  @ViewChild('datagrid') datagrid: DatagridComponent;
  /**
   * 操作列
   */
  @ViewChild('operateCell') operateCell: TemplateRef<any>;
  //#endregion
  //#region  input
  @Input() primaryKey = PRIMARY_KEY;
  @Input() width: number;
  @Input() height: number;
  @Input() title = '';
  /**
   * 禁用
   */
  @Input() disabled = false;
  /**
   * 展示类型
   */
  @Input() displayType: DisplayType = DisplayType.datagrid;
  /**
   * 数据源
   */
  @Input() items: any[];
  /**
   * 列信息
   */
  @Input() columns: any[] = [];
  /**
   * 启用多选
   */
  @Input() multi = false;
  /**
   * 是否显示过滤条
   */
  @Input() showFilterBar = true;
  /**
   * 自适应父容器宽度
   */
  @Input() fit = true;
  /**
   * 固定头部(修复树无滚动条问题)
   */
  @Input() fixedHeader = true;
  /**
   * 显示header
   */
  @Input() showHeader = true;
  /**
   * 显示边线
   */
  @Input() showBorder = true;
  /**
   * 自动列宽
   */
  @Input() fitColumns = false;
  /**
   * 是否显示复选框
   */
  @Input() showCheckbox = false;
  /**
   * 表头中显示全选checkbox
   */
  @Input() showCheckAll = false;
  /**
   * 启用斑马线效果
   */
  @Input() striped = true;
  /**
   * 启用虚拟渲染
   */
  @Input() virtualized = true;
  /**
   * 排序字段
   */
  @Input() sortName: string;
  /**
   * 排序方式
   */
  @Input() sortOrder: 'asc' | 'desc';
  /**
   * 启用编辑
   */
  @Input() editable = false;
  /**
   * 保持选中
   */
  @Input() keepSelect = true;
  /**
   * 是否启用分页
   */
  @Input() pagination = false;
  //#endregion
  //#region output
  /**
   * 行切换
   */
  @Output() selected = new EventEmitter(true);
  /**
   * 取消选择
   */
  @Output() unSelected = new EventEmitter(true);
  /**
   * 勾选行发生变化
   */
  @Output() checkedChange = new EventEmitter<string[]>(true);
  /**
   * 双击事件
   */
  @Output() dblClick = new EventEmitter<{ items: any[] }>(true);
  //#endregion
  //#region  eventhandler
  public appendHandler: () => void;
  /**
   * 行切换
   * @param event event
   */
  public onSelected(event: any) {
    console.log("onSelected", event);
    if (this.displayType === DisplayType.treetable) {
      this.currentItem = event.node && event.node.data;
      // this.currentId = event.node.id;
      // if (this.multi && !this.showCheckbox) {
      //   this.checkIds = [event.node.id];
      // }
    } else if (this.displayType === DisplayType.datagrid) {
      const { data = null, id = null } = event || {};
      this.currentItem = data;
      // this.currentId = id;
      // if (this.multi && !this.showCheckbox) {
      //   this.checkIds = [id];
      // }
    }
    this.selected.emit(this.currentItem);
  }
  /**
   * 取消选中
   * @param event event
   */
  public onUnSelected(event: any) {
    let previousItem = null;
    if (this.displayType === DisplayType.treetable) {
      previousItem = event.node && event.node.data;
      this.currentItem = null;
    } else if (this.displayType === DisplayType.datagrid) {
      const { data = null, id = null } = event || {};
      this.currentItem = null;
      previousItem = data;
    }
    this.unSelected.emit(previousItem);
  }
  /**
   * 勾选发生变化
   * @param event event
   */
  public onCheckedChange(event: any) {
    let ids = [];
    // 如果没有启用多选功能，只是显示了复选框，则不再处理勾选数据逻辑
    if (!this.multi) {
      return;
    }
    if (this.displayType === DisplayType.treetable) {
      ids = this.treetable.checkValues;
    } else if (this.displayType === DisplayType.datagrid) {
      event = event || [];
      ids = event.map(item => item[this.primaryKey]);
    }
    this.checkIds = ids;
    console.log('onCheckedChange', ids);
    this.checkedChange.emit(this.checkIds);
  }
  /**
   * 双击
   * @param event event
   * @description 快捷操作，相当于选中行并点击确定
   */
  public onDoubleClick(event: any) {
    let { id = null, data = null } = {};
    // 多选时不支持双击选择
    if (this.multi) {
      return;
    }
    if (this.displayType === DisplayType.treetable) {
      data = event && event.data;
      // id = data && data[this.idField];
    } else if (this.displayType === DisplayType.datagrid) {
      // id = event && event.id;
      data = event && event.rowData;
    }
    console.log('onDoubleClick', id, data);
    this.dblClick.emit({ items: [data] });
  }
  /**
   * 树搜索事件
   * @param event event
   */
  public onSearch(event: any) {
    this.treetable.searchHandle.search(event.field, event.value);
  }
  /**
   * 新增行
   * @param event event
   * @description 仅支持grid
   */
  public onAddClick(event: any) {
    const hasEmptyRow = this.items.find(item => !item[this.primaryKey]);
    if (hasEmptyRow) {
      return;
    }
    this.items.push({ [this.primaryKey]: new Date().valueOf().toString() });
    this.items = this.items.concat([]);
  }
  /**
   * 删除数据
   * @param event 
   * @description 仅支持grid
   */
  public onRemove(event: any) {
    const id = event && event.rowData[this.primaryKey];
    const index = this.items.findIndex(item => item[this.primaryKey] === id);
    if (index >= 0) {
      this.items.splice(index, 1);
      this.items = this.items.concat([]);
      if (this.currentItem && this.currentItem[this.primaryKey] === id) {
        this.currentItem = null;
      }
    }
  }
  //#endregion
  // public currentId: string;
  public checkIds: string[];
  public currentItem: any;

  constructor() { }

  ngOnInit() {
  }
}