import { TreeGridExControlBase } from '../../../widgets';

/**
 * 树表格部件基类
 *
 * @export
 * @class AppTreeGridExBase
 * @extends {TreeGridExControlBase}
 */
export class AppTreeGridExBase extends TreeGridExControlBase {
  /**
   * 绘制内容
   *
   * @returns
   * @memberof AppTreeGridExBase
   */
  render(): any {
    if (!this.controlIsLoaded) {
      return null;
    }
    const { name } = this.controlInstance;
    const { controlClassNames } = this.renderOptions;
    return (
      <div class={{ ...controlClassNames, 'tree-grid-ex': true }} style='height:100%'>
        <el-table
          ref={name}
          data={this.items}
          row-key='id'
          border
          lazy
          height='100%'
          row-class-name={this.setRowClass.bind(this)}
          load={this.loadTreeNode.bind(this)}
          tree-props={{ children: 'children', hasChildren: 'leaf' }}
          select-on-indeterminate={this.isSingleSelect}
          highlight-current-row={this.isSingleSelect}
          on-current-change={this.select.bind(this)}
        >
          <template slot='empty'>{this.$t('app.commonwords.nodata')}</template>
          {this.renderColumns()}
        </el-table>
      </div>
    );
  }
}