import { throttle, Util } from '@ibizstudio/runtime';
import { KanbanControlBase } from '../../../widgets';
import { IPSUIAction, IPSUIActionGroup, IPSUIActionGroupDetail } from '@ibizstudio/runtime';

/**
 * 实体看板部件基类
 *
 * @export
 * @class AppKanbanBase
 * @extends {KanbanControlBase}
 */
export class AppKanbanBase extends KanbanControlBase {
  /**
   * 绘制itemPSLayoutPanel部件
   *
   * @returns {*}
   * @memberof AppKanbanBase
   */
  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 });
  }

  /**
   * 绘制折叠栏
   *
   * @param group 分组
   * @param index 下标
   * @memberof AppKanbanBase
   */
  renderDragbar(group: any, index: any) {
    return (
      <draggable
        list={group?.items}
        class='dragbar'
        ghostClass='dragitems'
        handle='.dataview-group-item'
        group={{ name: 'bar', put: group?.folding ? false : true }}
        on-change={($event: any) => this.onDragChange($event, 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?.value)}
              {'(' + group?.items?.length + ')'}
            </div>
          </div>
        ) : null}
      </draggable>
    );
  }

  /**
   * 绘制分组界面行为
   *
   * @param ActionGroup 分组界面行为组
   * @param group 分组类型
   * @memberof AppKanbanBase
   */
  renderGroupAction(ActionGroup: IPSUIActionGroup | null, group: any) {
    return (
      <poptip trigger='hover' content='content' placement={!Object.is(this.controlInstance?.groupLayout, 'COLUMN') ? 'bottom-end' : 'right-start'} style='float: right;'>
        <icon type={!Object.is(this.controlInstance?.groupLayout, 'COLUMN') ? 'md-more' : 'ios-more'} />
        <div slot='content' class='group-action'>
          {ActionGroup?.getPSUIActionGroupDetails()?.map((uiActionDetail: IPSUIActionGroupDetail) => {
            const uiAction = uiActionDetail.getPSUIAction() as IPSUIAction;
            if (uiAction) {
              return (
                <div class='group-action-item'>
                  <i-button long on-click={($event: any) => throttle(this.uiActionClick, [uiActionDetail, $event, group], this)}>
                    {uiAction.getPSSysImage()?.imagePath ? <img class='app-kanban-icon' src={uiAction.getPSSysImage()?.imagePath} /> : null}
                    {uiAction.getPSSysImage()?.cssClass ? <i class={[uiAction.getPSSysImage()?.cssClass, 'app-kanban-icon']}></i> : null}
                    <span class='caption'>{this.$tl(uiAction.getCapPSLanguageRes()?.lanResTag, uiAction.caption)}</span>
                  </i-button>
                </div>
              );
            }
          })}
        </div>
      </poptip>
    );
  }

  renderItemContent(item: any) {
    if (this.controlInstance?.getItemPSSysPFPlugin()) {
      const pluginInstance: any = this.PluginFactory.getPluginInstance('CONTROLITEM', this.controlInstance?.getItemPSSysPFPlugin()?.pluginCode || '');
      if (pluginInstance) {
        return pluginInstance.renderCtrlItem(this.$createElement, this.controlInstance, this, item);
      }
    } else {
      return item.srfmajortext;
    }
  }

  /**
   * 绘制分组看板
   *
   * @param group 分组
   * @param index 下标
   * @memberof AppKanbanBase
   */
  renderGroup(group: any, index: any) {
    const groupStyle = {
      'flex-grow': this.controlInstance?.groupWidth || this.controlInstance.groupHeight ? false : '1',
    };
    this.controlInstance?.groupWidth ? Object.assign(groupStyle, { width: this.controlInstance?.groupWidth + 'px' }) : null;
    this.controlInstance?.groupHeight ? Object.assign(groupStyle, { height: this.controlInstance?.groupHeight + 'px' }) : null;
    return group.folding ? (
      <div class='dataview-group-content' style={groupStyle}>
        <div class={['dataview-group-header', this.controlInstance?.getGroupPSSysCss()?.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={this.controlInstance?.name}
            class='dataview-group-items'
            on-change={($event: any) => this.onDragChange($event, group.value)}
            on-end={() => this.onDragEnd()}
          >
            {group.items.map((item: any) => {
              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(this.controlInstance.getEmptyTextPSLanguageRes()?.lanResTag, this.$t('app.commonwords.nodata'))}</span>
          </div>
        )}
      </div>
    ) : null;
  }

  /**
   * 绘制部件
   *
   * @param h
   * @memberof AppKanbanBase
   */
  render(h: any) {
    if (!this.controlIsLoaded) {
      return null;
    }
    const { controlClassNames } = this.renderOptions;
    return (
      <div
        class={{
          ...controlClassNames,
          'app-data-view-group': !Object.is(this.controlInstance?.groupLayout, 'COLUMN'),
          'app-data-view-group-column': Object.is(this.controlInstance.groupLayout, 'COLUMN'),
        }}
      >
        {[
          this.groups.map((item, index) => {
            if (this.controlInstance?.getGroupPSSysPFPlugin()) {
              const pluginInstance: any = this.PluginFactory.getPluginInstance('CONTROLITEM', this.controlInstance.getGroupPSSysPFPlugin()?.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>
    );
  }
}