import { throttle } from '@ibizstudio/runtime';
import { ListControlBase } from '../../../widgets';
import { IPSDEListItem, IPSDEUIAction, IPSDEUIActionGroup, IPSUIActionGroupDetail } from '@ibizstudio/runtime';

/**
 * 实体列表部件基类
 *
 * @export
 * @class AppListBase
 * @extends {ListControlBase}
 */
export class AppListBase extends ListControlBase {
  /**
   * 绘制列表
   *
   * @returns {*}
   * @memberof AppListBase
   */
  render() {
    if (!this.controlIsLoaded) {
      return null;
    }
    let listClassName = {
      'app-list': true,
      'app-list-empty': this.items.length <= 0,
      ...this.renderOptions.controlClassNames,
    };
    return this.batchToolbarInstance ? (
      <div style='overflow:auto;height: 100%;'>
        <div class={listClassName} style='height:100%;'>
          {this.items.length > 0 ? <div style='height:100%;'>{this.renderHaveItems()}</div> : this.isControlLoaded ? this.renderEmptyDataTip() : this.renderLoadDataTip()}
          {this.viewStyle == 'DEFAULT' ? <el-backtop target='.content-container .app-list'></el-backtop> : null}
        </div>
        {this.batchToolbarInstance && (this.selections.length > 0 ? <row class='list-pagination'>{this.renderBatchToolbar()}</row> : null)}
      </div>
    ) : (
      <div class={listClassName} style='height:100%;'>
        {this.items.length > 0 ? <div style='height:100%;'>{this.renderHaveItems()}</div> : this.isControlLoaded ? this.renderEmptyDataTip() : this.renderLoadDataTip()}
        {this.viewStyle == 'DEFAULT' ? <el-backtop target='.content-container .app-list'></el-backtop> : null}
      </div>
    );
  }

  /**
   * 绘制列表项内容
   *
   * @returns {*}
   * @memberof AppListBase
   */
  renderListItemContent(item: any, index: number) {
    const listItem = this.controlInstance.getPSDEListItems?.()?.[0] || null;
    return [
      <div class='app-list-item-content'>
        <div class='item-content-text'>
          <span class='item-title'>{item.srfmajortext}</span>
          {item.content && <span class='item-content'>{item.content}</span>}
        </div>
      </div>,
      <div class='app-list-item-action'>{listItem ? this.renderListItemAction(item, listItem) : ''}</div>,
    ];
  }

  /**
   * 绘制有items的情况
   *
   * @returns {*}
   * @memberof AppListBase
   */
  renderHaveItems() {
    if (this.isEnableGroup) {
      return this.renderHaveGroup();
    } else if (this.enableRowEditOrder) {
      return this.renderDraggableItems();
    } else {
      return this.items.map((item: any, index: number) => {
        return this.renderDefaultItem(item, index);
      });
    }
  }

  /**
   * 渲染可拖拽item项
   *
   * @author zhanghengfeng
   * @date 2023-07-06 21:07:57
   * @return {*} 
   */
  renderDraggableItems() {
    return (
      <draggable handle='.app-list-item-draggable-handle' group={this.groupName} animation={150} on-update={this.onDraggableItemPositionChange}>
        {this.items.map((item, index) => (
          <div
            key={item.srfkey}
            class={['app-list-item', item.srfchecked === 1 ? 'isSelect' : '']}
            on-click={() => throttle(this.handleClick, [item], this)}
            on-dblclick={() => throttle(this.handleDblClick, [item], this)}
          >
            <i class='el-icon-rank app-list-item-draggable-handle'></i>
            {this.controlInstance.getItemPSLayoutPanel() ? this.renderItemPSLayoutPanel(item) : this.renderListItemContent(item, index)}
          </div>
        ))}
      </draggable>
    );
  }

  /**
   * 绘制面板部件
   *
   * @returns {*}
   * @memberof AppListBase
   */
  renderItemPSLayoutPanel(item: any) {
    let { targetCtrlName, targetCtrlParam, targetCtrlEvent }: { targetCtrlName: string; targetCtrlParam: any; targetCtrlEvent: any } = this.computeTargetCtrlData(
      this.controlInstance.getItemPSLayoutPanel(),
      item,
    );
    return this.$createElement(targetCtrlName, { props: targetCtrlParam, ref: this.controlInstance.getItemPSLayoutPanel()?.name, on: targetCtrlEvent });
  }

  /**
   * 绘制默认列表项
   *
   * @returns {*}
   * @memberof AppListBase
   */
  renderDefaultItem(item: any, index: number) {
    return (
      <div
        key={index}
        class={['app-list-item', item.srfchecked === 1 ? 'isSelect' : ''].join(' ')}
        on-click={() => throttle(this.handleClick, [item], this)}
        on-dblclick={() => throttle(this.handleDblClick, [item], this)}
      >
        {this.controlInstance.getItemPSLayoutPanel() ? this.renderItemPSLayoutPanel(item) : this.renderListItemContent(item, index)}
      </div>
    );
  }

  /**
   * 绘制有分组的情况
   *
   * @returns {*}
   * @memberof AppListBase
   */
  renderHaveGroup() {
    return (
      <el-collapse>
        {this.groupData.map((item: any) => {
          return (
            <el-collapse-item>
              <div slot='title' style='margin: 0 0 0 12px;'>
                <b>{item.group}</b>
              </div>
              {item.children.length > 0 ? (
                <div style='margin: 0 0 0 32px;'>
                  {item.children.map((item: any, index: number) => {
                    return this.renderDefaultItem(item, index);
                  })}
                </div>
              ) : (
                <div style='text-align: center;'>{this.$t('${langbase}.nodata')}</div>
              )}
            </el-collapse-item>
          );
        })}
      </el-collapse>
    );
  }

  /**
   * 绘制列表项行为
   * @param item 列数据
   * @param listItem
   * @memberof AppListBase
   */
  renderListItemAction(item: any, listItem: IPSDEListItem) {
    const UIActionGroupDetails: IPSUIActionGroupDetail[] = (listItem.getPSDEUIActionGroup() as IPSDEUIActionGroup)?.getPSUIActionGroupDetails() || [];
    return UIActionGroupDetails.map((uiactionDetail: IPSUIActionGroupDetail, index: number) => {
      const uiaction: IPSDEUIAction = uiactionDetail.getPSUIAction() as IPSDEUIAction;
      if (uiaction && item[uiaction.uIActionTag].visabled) {
        return (
          <a
            key={index}
            style='display: inline-block;margin: 0 12px;'
            disabled={item[uiaction.uIActionTag].disabled}
            on-click={($event: any) => {
              throttle(this.handleActionClick, [item, $event, listItem, uiactionDetail], this);
            }}
          >
            {uiactionDetail.showIcon ? <i class={uiaction.getPSSysImage()?.cssClass} style='margin-right:2px;'></i> : ''}
            <span>{uiactionDetail.showCaption ? this.$tl(uiaction.getCapPSLanguageRes()?.lanResTag, uiaction.caption) : ''}</span>
          </a>
        );
      }
    });
  }
}