import { CreateElement } from 'vue';
import { throttle } from '@ibizstudio/runtime';
import { PickupView3Base } from '../../../view/pickupview3-base';
import { AppLayoutService } from '../../../app-service';
import { IPSDEPickupViewPanel } from '@ibizstudio/runtime';

export class AppPickupView3Base extends PickupView3Base {
  /**
   * 渲染选择视图按钮
   *
   * @memberof PickupViewBase
   */
  renderPickButton() {
    if (this.isShowButton) {
      return (
        <card dis-hover={true} bordered={false} class='footer'>
          <row style={{ textAlign: 'right' }}>
            <i-button type='primary' disabled={this.viewSelections.length > 0 ? false : true} on-click={(...params: any[]) => throttle(this.onClickOk, params, this)}>
              {this.containerModel?.view_okbtn?.text}
            </i-button>
            &nbsp;&nbsp;
            <i-button on-click={(...params: any[]) => throttle(this.onClickCancel, params, this)}>{this.containerModel?.view_cancelbtn?.text}</i-button>
          </row>
        </card>
      );
    }
  }

  renderPickupViewPanel(panel: IPSDEPickupViewPanel) {
    let { targetCtrlParam, targetCtrlEvent, targetCtrlName } = this.computeTargetCtrlData(panel);
    return this.$createElement(targetCtrlName, { props: targetCtrlParam, ref: panel.name, on: targetCtrlEvent });
  }

  renderPickupViewPanelTab(panel: IPSDEPickupViewPanel, tabName: string) {
    const name = panel.name || panel.codeName;
    return (
      <tab-pane lazy={true} name={name} tab={tabName} label={this.$tl(panel.getCapPSLanguageRes()?.lanResTag, panel.caption)}>
        {this.renderPickupViewPanel(panel)}
      </tab-pane>
    );
  }

  renderMainContent() {
    const tabName = `${this.appDeCodeName}_${this.viewInstance.viewType}_${this.viewInstance.name}`;
    return (
      <div class='pickupview3-tabs-container' slot='default'>
        <tabs value={this.activedPickupViewPanel} class='pickupview3-tabs' name={tabName} on-on-click={($event: any) => throttle(this.tabPanelClick, [$event], this)}>
          {this.pickupViewPanelModels.map((panel: IPSDEPickupViewPanel) => {
            return this.renderPickupViewPanelTab(panel, tabName);
          })}
        </tabs>
      </div>
    );
  }

  /**
   * 数据视图渲染
   *
   * @memberof AppPickupViewBase
   */
  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.renderBodyMessage(), this.renderToolBar(), this.renderMainContent(), this.renderPickButton(), this.renderBottomMessage()],
    );
  }
}