import { IPSDEFormTabPanel } from '@ibizstudio/runtime';
import { throttle } from '@ibizstudio/runtime';
import { Component } from 'vue-property-decorator';
import { VueLifeCycleProcessing } from '../../../../decorators';
import { AppDefaultFormDetail } from '../app-default-form-detail/app-default-form-detail';

/**
 * 表单UI组件
 *
 * @export
 * @class AppDefaultFormTabPanel
 * @extends {Vue}
 */
@Component({})
@VueLifeCycleProcessing()
export class AppDefaultFormTabPanel extends AppDefaultFormDetail {
  /**
   * 表单成员实例对象
   *
   * @type {*}
   * @memberof AppDefaultFormDetail
   */
  declare detailsInstance: IPSDEFormTabPanel;

  /**
   * 绘制内容
   *
   * @returns {*}
   * @memberof AppDefaultFormTabPanel
   */
  render(): any {
    const { detailClassNames } = this.renderOptions;
    let { codeName, caption, contentHeight, contentWidth } = this.detailsInstance;
    let style = {
      height: contentHeight ? contentHeight + 'px' : false,
      width: contentWidth ? contentWidth + 'px' : false,
    };
    // 设置默认值
    let layoutmode = this.detailsInstance.getPSLayout()?.layout || 'TABLE_24COL';
    caption = caption || codeName;
    return (
      <tabs
        v-show={this.runtimeModel.visible}
        style={style}
        animated={false}
        name={codeName.toLowerCase()}
        class={{ 'app-tabpanel-flex': layoutmode == 'FLEX', ...detailClassNames }}
        value={this.runtimeModel.activatedPage}
        on-on-click={(e: any) => {
          throttle(this.runtimeModel?.clickPage, [e], this);
        }}
      >
        {this.$slots.default}
      </tabs>
    );
  }
}