import { throttle } from '@ibizstudio/runtime';
import { ListControlBase } from '../../../widgets';
/**
 * 实体列表部件基类
 *
 * @export
 * @class AppListBase
 * @extends {ListControlBase}
 */
export class AppListBase extends ListControlBase {
    /**
     * 绘制列表
     *
     * @returns {*}
     * @memberof AppListBase
     */
    render() {
        if (!this.controlIsLoaded) {
            return null;
        }
        let listClassName = Object.assign({ '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, index) {
        var _a, _b, _c;
        const listItem = ((_c = (_b = (_a = this.controlInstance).getPSDEListItems) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c[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, index) => {
                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) {
        var _a;
        let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(this.controlInstance.getItemPSLayoutPanel(), item);
        return this.$createElement(targetCtrlName, { props: targetCtrlParam, ref: (_a = this.controlInstance.getItemPSLayoutPanel()) === null || _a === void 0 ? void 0 : _a.name, on: targetCtrlEvent });
    }
    /**
     * 绘制默认列表项
     *
     * @returns {*}
     * @memberof AppListBase
     */
    renderDefaultItem(item, index) {
        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) => {
                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, index) => {
                            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, listItem) {
        var _a;
        const UIActionGroupDetails = ((_a = listItem.getPSDEUIActionGroup()) === null || _a === void 0 ? void 0 : _a.getPSUIActionGroupDetails()) || [];
        return UIActionGroupDetails.map((uiactionDetail, index) => {
            var _a, _b;
            const uiaction = uiactionDetail.getPSUIAction();
            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) => {
                        throttle(this.handleActionClick, [item, $event, listItem, uiactionDetail], this);
                    }}>
            {uiactionDetail.showIcon ? <i class={(_a = uiaction.getPSSysImage()) === null || _a === void 0 ? void 0 : _a.cssClass} style='margin-right:2px;'></i> : ''}
            <span>{uiactionDetail.showCaption ? this.$tl((_b = uiaction.getCapPSLanguageRes()) === null || _b === void 0 ? void 0 : _b.lanResTag, uiaction.caption) : ''}</span>
          </a>);
            }
        });
    }
}