import { throttle } from '@ibizstudio/runtime';
import { KanbanControlBase } from '../../../widgets';
/**
 * 实体看板部件基类
 *
 * @export
 * @class AppKanbanBase
 * @extends {KanbanControlBase}
 */
export class AppKanbanBase extends KanbanControlBase {
    /**
     * 绘制itemPSLayoutPanel部件
     *
     * @returns {*}
     * @memberof AppKanbanBase
     */
    renderItemPSLayoutPanel(item) {
        var _a, _b;
        let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(this.controlInstance.getItemPSLayoutPanel(), item);
        return this.$createElement(targetCtrlName, { props: targetCtrlParam, ref: (_b = (_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.getItemPSLayoutPanel) === null || _b === void 0 ? void 0 : _b.name, on: targetCtrlEvent });
    }
    /**
     * 绘制折叠栏
     *
     * @param group 分组
     * @param index 下标
     * @memberof AppKanbanBase
     */
    renderDragbar(group, index) {
        var _a;
        return (<draggable list={group === null || group === void 0 ? void 0 : group.items} class='dragbar' ghostClass='dragitems' handle='.dataview-group-item' group={{ name: 'bar', put: (group === null || group === void 0 ? void 0 : group.folding) ? false : true }} on-change={($event) => this.onDragChange($event, group === null || group === void 0 ? void 0 : group.value)}>
        {!group.folding ? (<div class='dataview-group-folading-kanban' on-click={() => throttle(this.onClick, [group, index], this)}>
            <div class='unfold-icon'>
              <i class='el-icon-s-unfold' title={this.$t('components.content.open')}></i>
            </div>
            <div class='dataview-group-folding'>
              {this.getGroupText(group === null || group === void 0 ? void 0 : group.value)}
              {'(' + ((_a = group === null || group === void 0 ? void 0 : group.items) === null || _a === void 0 ? void 0 : _a.length) + ')'}
            </div>
          </div>) : null}
      </draggable>);
    }
    /**
     * 绘制分组界面行为
     *
     * @param ActionGroup 分组界面行为组
     * @param group 分组类型
     * @memberof AppKanbanBase
     */
    renderGroupAction(ActionGroup, group) {
        var _a, _b, _c;
        return (<poptip trigger='hover' content='content' placement={!Object.is((_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.groupLayout, 'COLUMN') ? 'bottom-end' : 'right-start'} style='float: right;'>
        <icon type={!Object.is((_b = this.controlInstance) === null || _b === void 0 ? void 0 : _b.groupLayout, 'COLUMN') ? 'md-more' : 'ios-more'}/>
        <div slot='content' class='group-action'>
          {(_c = ActionGroup === null || ActionGroup === void 0 ? void 0 : ActionGroup.getPSUIActionGroupDetails()) === null || _c === void 0 ? void 0 : _c.map((uiActionDetail) => {
                var _a, _b, _c, _d, _e;
                const uiAction = uiActionDetail.getPSUIAction();
                if (uiAction) {
                    return (<div class='group-action-item'>
                  <i-button long on-click={($event) => throttle(this.uiActionClick, [uiActionDetail, $event, group], this)}>
                    {((_a = uiAction.getPSSysImage()) === null || _a === void 0 ? void 0 : _a.imagePath) ? <img class='app-kanban-icon' src={(_b = uiAction.getPSSysImage()) === null || _b === void 0 ? void 0 : _b.imagePath}/> : null}
                    {((_c = uiAction.getPSSysImage()) === null || _c === void 0 ? void 0 : _c.cssClass) ? <i class={[(_d = uiAction.getPSSysImage()) === null || _d === void 0 ? void 0 : _d.cssClass, 'app-kanban-icon']}></i> : null}
                    <span class='caption'>{this.$tl((_e = uiAction.getCapPSLanguageRes()) === null || _e === void 0 ? void 0 : _e.lanResTag, uiAction.caption)}</span>
                  </i-button>
                </div>);
                }
            })}
        </div>
      </poptip>);
    }
    renderItemContent(item) {
        var _a, _b, _c;
        if ((_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.getItemPSSysPFPlugin()) {
            const pluginInstance = this.PluginFactory.getPluginInstance('CONTROLITEM', ((_c = (_b = this.controlInstance) === null || _b === void 0 ? void 0 : _b.getItemPSSysPFPlugin()) === null || _c === void 0 ? void 0 : _c.pluginCode) || '');
            if (pluginInstance) {
                return pluginInstance.renderCtrlItem(this.$createElement, this.controlInstance, this, item);
            }
        }
        else {
            return item.srfmajortext;
        }
    }
    /**
     * 绘制分组看板
     *
     * @param group 分组
     * @param index 下标
     * @memberof AppKanbanBase
     */
    renderGroup(group, index) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
        const groupStyle = {
            'flex-grow': ((_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.groupWidth) || this.controlInstance.groupHeight ? false : '1',
        };
        ((_b = this.controlInstance) === null || _b === void 0 ? void 0 : _b.groupWidth) ? Object.assign(groupStyle, { width: ((_c = this.controlInstance) === null || _c === void 0 ? void 0 : _c.groupWidth) + 'px' }) : null;
        ((_d = this.controlInstance) === null || _d === void 0 ? void 0 : _d.groupHeight) ? Object.assign(groupStyle, { height: ((_e = this.controlInstance) === null || _e === void 0 ? void 0 : _e.groupHeight) + 'px' }) : null;
        return group.folding ? (<div class='dataview-group-content' style={groupStyle}>
        <div class={['dataview-group-header', (_g = (_f = this.controlInstance) === null || _f === void 0 ? void 0 : _f.getGroupPSSysCss()) === null || _g === void 0 ? void 0 : _g.cssName]}>
          <div class='fold-icon' on-click={() => throttle(this.onClick, [group, index], this)}>
            <i class='el-icon-s-fold' title={this.$t('components.content.close')}></i>
          </div>
          <span class='fold-text'>{this.getGroupText(group.value)}</span>
          {this.controlInstance.getGroupPSUIActionGroup() ? this.renderGroupAction(this.controlInstance.getGroupPSUIActionGroup(), group) : null}
        </div>
        {group.items.length > 0 ? (<draggable list={group.items} group={(_h = this.controlInstance) === null || _h === void 0 ? void 0 : _h.name} class='dataview-group-items' on-change={($event) => this.onDragChange($event, group.value)} on-end={() => this.onDragEnd()}>
            {group.items.map((item) => {
                    return (<div class={['dataview-group-item', { 'is-select': item.srfchecked === 1 ? true : false }]} on-click={() => throttle(this.handleClick, [item], this)} on-dblclick={() => throttle(this.handleDblClick, [item], this)}>
                  {this.controlInstance.getItemPSLayoutPanel() ? this.renderItemPSLayoutPanel(item) : this.renderItemContent(item)}
                </div>);
                })}
          </draggable>) : (<div class='app-data-empty'>
            <span>{this.$tl((_j = this.controlInstance.getEmptyTextPSLanguageRes()) === null || _j === void 0 ? void 0 : _j.lanResTag, this.$t('app.commonwords.nodata'))}</span>
          </div>)}
      </div>) : null;
    }
    /**
     * 绘制部件
     *
     * @param h
     * @memberof AppKanbanBase
     */
    render(h) {
        var _a;
        if (!this.controlIsLoaded) {
            return null;
        }
        const { controlClassNames } = this.renderOptions;
        return (<div class={Object.assign(Object.assign({}, controlClassNames), { 'app-data-view-group': !Object.is((_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.groupLayout, 'COLUMN'), 'app-data-view-group-column': Object.is(this.controlInstance.groupLayout, 'COLUMN') })}>
        {[
                this.groups.map((item, index) => {
                    var _a, _b;
                    if ((_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.getGroupPSSysPFPlugin()) {
                        const pluginInstance = this.PluginFactory.getPluginInstance('CONTROLITEM', ((_b = this.controlInstance.getGroupPSSysPFPlugin()) === null || _b === void 0 ? void 0 : _b.pluginCode) || '');
                        if (pluginInstance) {
                            return pluginInstance.renderCtrlItem(this.$createElement, this.controlInstance, this, item);
                        }
                    }
                    else {
                        return [this.renderDragbar(item, index), this.renderGroup(item, index)];
                    }
                }),
                this.renderQuickToolbar(),
            ]}
      </div>);
    }
}