import { throttle } from '@ibizstudio/runtime';
import { SearchBarControlBase } from '../../../widgets/searchbar-control-base';
import { IPSEditor, IPSSearchBarFilter } from '@ibizstudio/runtime';

/**
 * 搜索栏部件基类
 *
 * @export
 * @class AppSearchBarBase
 * @extends {SearchBarControlBase}
 */
export class AppSearchBarBase extends SearchBarControlBase {
  /**
   * 绘制过滤栏
   *
   * @param {{ controlname: string; action: string; data: any }} { controlname 部件名称, action 事件名称, data 事件参数 }
   * @memberof AppSearchBarBase
   */
  renderBarFilters(data: any) {
    const barFilters: Array<IPSSearchBarFilter> = this.controlInstance.getPSSearchBarFilters() || [];
    if (barFilters.length === 0 || !data.editor) {
      return null;
    }
    return barFilters.map((filter: IPSSearchBarFilter) => {
      if (!filter.name || !Object.is(data.editor, filter.name)) {
        return null;
      }
      const editor: IPSEditor | null = filter.getPSEditor();
      if (editor) {
        let filterItem: any = this.filterItems.find((item: any) => {
          return item.editor && Object.is(item.editor, editor.name);
        });
        if (filterItem) {
          filterItem[editor.name] = data[editor.name];
        }
        return (
          <app-default-editor
            editorInstance={editor}
            value={data[editor.name]}
            contextData={data}
            context={this.context}
            viewparams={this.viewparams}
            service={this.service}
            disabled={false}
            ignorefieldvaluechange={false}
            on-change={this.editorChange.bind(this)}
          />
        );
      }
    });
  }

  /**
   * 编辑器值变化
   *
   * @memberof AppSearchBarBase
   */
  editorChange({ name, value }: any) {
    if (this.filterItems.length == 0) {
      return;
    }
    this.filterItems.forEach((item: any) => {
      if (item.editor && Object.is(name, item.editor)) {
        item[name] = value;
      }
    });
  }

  /**
   * 绘制过滤树
   *
   * @memberof AppSearchBarBase
   */
  renderFilterTree() {
    if (!this.filterFields || this.filterFields.length == 0) {
      return null;
    }
    return (
      <div class='filter-group'>
        <filter-tree
          datas={this.filterItems}
          fields={this.filterFields}
          scopedSlots={{
            default: ({ data }: any) => {
              return this.renderBarFilters(data);
            },
          }}
        ></filter-tree>
      </div>
    );
  }

  /**
   * 绘制过滤存储集合
   *
   * @memberof AppSearchBarBase
   */
  renderFilterFooter() {
    return (
      <div class='search-bar-footer'>
        <div class='search-bar-action'>
          {this.historyItems?.length > 0 ? (
            <el-select size='small' value={this.selectItem} on-change={this.onFilterChange.bind(this)}>
              {this.historyItems.map((item: any) => {
                return <el-option key={item.value} label={item.name} value={item.value}></el-option>;
              })}
            </el-select>
          ) : null}
          <i-button type='primary' on-click={(...params: any[]) => throttle(this.onSearch, params, this)}>
            {this.$t('app.searchbutton.search')}
          </i-button>
          <i-button on-click={this.onReset.bind(this)}>{this.$t('app.searchbutton.reset')}</i-button>
          <poptip ref='propip' trigger='hover' transfer placement='top-end' title='存储自定义查询' popper-class='searchbar-poptip' op-on-popper-show={this.openPoper.bind(this)}>
            <i-button>
              <i class='fa fa-floppy-o' aria-hidden='true'></i>
            </i-button>
            <div slot='content'>
              <i-input v-model={this.saveItemName} placeholder=''></i-input>
              <div class='save-action'>
                <i-button on-click={(...params: any[]) => throttle(this.onCancel, params, this)}>{this.$t('app.commonwords.cancel')}</i-button>
                <i-button type='primary' on-click={(...params: any[]) => throttle(this.onOk, params, this)}>
                  {this.$t('app.commonwords.save')}
                </i-button>
              </div>
            </div>
          </poptip>
        </div>
      </div>
    );
  }

  /**
   * 绘制搜索栏部件
   *
   * @memberof AppSearchBarBase
   */
  render() {
    if (!this.controlIsLoaded || !this.isExpandSearchForm) {
      return null;
    }
    const { controlClassNames } = this.renderOptions;
    return (
      <div class={{ ...controlClassNames, 'app-searchbar': true }}>
        {this.renderFilterTree()}
        {this.renderFilterFooter()}
      </div>
    );
  }
}