import { MEditViewPanelControlBase } from '../../../widgets';
import { throttle } from '@ibizstudio/runtime';

/**
 * 多编辑面板部件基类
 *
 * @export
 * @class AppListExpBarBase
 * @extends {ListExpBarControlBase}
 */
export class AppMEditViewPanelBase extends MEditViewPanelControlBase {
  /**
   * 绘制内容
   *
   * @memberof AppMEditViewPanelBase
   */
  renderContent() {
    if (!this.controlInstance.getEmbeddedPSAppView()) {
      return;
    }
    if (Object.is(this.controlInstance.panelStyle, 'TAB_TOP')) {
      return this.renderTabtop();
    }
    return this.renderRow();
  }

  /**
   * 绘制上分页样式
   *
   *
   * @memberof AppMEditViewPanelBase
   */
  renderTabtop() {
    return (
      <tabs value={this.items.length - 1}>
        {this.items.map((item: any) => {
          return (
            <tabPane label={item.srfmajortext}>
              {this.$createElement('app-view-shell', {
                props: {
                  staticProps: {
                    viewDefaultUsage: false,
                    viewModelData: this.controlInstance.getEmbeddedPSAppView(),
                    panelState: this.panelState,
                  },
                  dynamicProps: {
                    viewdata: JSON.stringify(item.viewdata),
                    viewparam: JSON.stringify(item.viewparam),
                  },
                },
                class: 'viewcontainer2',
                on: {
                  viewdataschange: this.viewDataChange.bind(this),
                  viewload: this.viewload.bind(this),
                },
              })}
            </tabPane>
          );
        })}
      </tabs>
    );
  }

  /**
   * 绘制行记录样式
   *
   * @memberof AppMEditViewPanelBase
   */
  renderRow() {
    return this.items.map((item: any) => {
      return [
        this.$createElement('app-view-shell', {
          props: {
            staticProps: {
              viewDefaultUsage: false,
              viewModelData: this.controlInstance.getEmbeddedPSAppView(),
              panelState: this.panelState,
            },
            dynamicProps: {
              viewdata: JSON.stringify(item.viewdata),
              viewparam: JSON.stringify(item.viewparam),
            },
          },
          class: 'viewcontainer2',
          on: {
            viewdataschange: this.viewDataChange.bind(this),
            viewload: this.viewload.bind(this),
          },
        }),
        <divider />,
      ];
    });
  }

  /**
   * 绘制部件
   *
   * @param h
   * @memberof AppMEditViewPanelBase
   */
  render(h: any) {
    if (!this.controlIsLoaded) {
      return null;
    }
    const { controlClassNames } = this.renderOptions;
    return (
      <div class={{ ...controlClassNames, multieditviewpanel: true }}>
        {this.items.length > 0 ? this.renderContent() : null}
        {this.showButton ? (
          <i-button type='primary' on-click={() => throttle(this.handleAdd, [], this)} style='float: right;'>
            {this.$t('app.local.add')}
          </i-button>
        ) : null}
      </div>
    );
  }
}