import { TabExpViewBase } from '../../../view/tabexpview-base';
import { CreateElement } from 'vue';
import { AppLayoutService } from '../../../app-service/common-service/app-layout-service';

/**
 * 应用分页导航视图基类
 *
 * @export
 * @class AppTabExpViewBase
 * @extends {TabExpViewBase}
 */
export class AppTabExpViewBase extends TabExpViewBase {
  /**
   * 渲染数据面板
   *
   * @memberof AppTabExpViewBase
   */
  renderDataPanel() {
    if (this.dataPanelInstance) {
      let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(this.dataPanelInstance);
      return this.$createElement(targetCtrlName, { slot: 'datapanel', ref: this.dataPanelInstance?.name, props: targetCtrlParam, on: targetCtrlEvent });
    }
  }

  /**
   * 分页导航视图渲染
   *
   * @memberof AppTabExpViewBase
   */
  render(h: CreateElement) {
    if (!this.viewIsLoaded) {
      return null;
    }
    const targetViewLayoutComponent: any = AppLayoutService.getLayoutComponent(`${this.viewInstance?.viewType}-${this.viewInstance?.viewStyle}`);
    return h(
      targetViewLayoutComponent,
      {
        props: { viewInstance: this.viewInstance, model: this.model, modelService: this.modelService, viewparams: this.viewparams, context: this.context },
      },
      [this.renderTopMessage(), this.renderCaptionInfo(), this.renderDataPanel(), this.renderBodyMessage(), this.renderToolBar(), this.renderMainContent(), this.renderBottomMessage()],
    );
  }
}