import { Component, Prop, Watch } from 'vue-property-decorator';
import { AppDefaultFormDetail } from '../app-default-form-detail/app-default-form-detail';
import { IPSDEFormItemEx, IPSLanguageRes } from '@ibizstudio/runtime';
import { VueLifeCycleProcessing } from '../../../../decorators';

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

  /**
   * 表单数据
   *
   * @type {*}
   * @memberof AppDefaultFormItem
   */
  @Prop() data: any;

  /**
   * 表单值规则
   *
   * @type {*}
   * @memberof AppDefaultFormItem
   */
  @Prop() rules: any;

  /**
   * 应用上下文
   *
   * @type {*}
   * @memberof AppDefaultFormItem
   */
  @Prop() declare context: any;

  /**
   * 视图参数
   *
   * @type {*}
   * @memberof AppDefaultFormItem
   */
  @Prop() declare viewparams: any;

  /**
   * 表单服务对象
   *
   * @type {*}
   * @memberof AppDefaultFormItem
   */
  @Prop() service: any;

  /**
   * 忽略表单项值变化
   *
   * @type {boolean}
   * @memberof AppDefaultFormItem
   */
  @Prop() ignorefieldvaluechange?: boolean;

  /**
   * 表单项值变化事件
   *
   * @memberof AppDefaultFormItem
   */
  onFormItemValueChange(...args: any) {
    this.$emit('formItemValueChange', ...args);
  }

  /**
   * 绘制基础复合编辑器
   *
   * @memberof AppDefaultFormItem
   */
  renderBaseCompositeEditor(refFormItem: any[], name: string, editor: any, contentStyle: any) {
    if (Object.is(editor?.editorType, 'DATERANGE') || Object.is(editor?.editorType, 'DATERANGE_NOTIME')) {
      return (
        <app-date-range
          activeData={this.data}
          name={name}
          editorType={editor.editorType}
          refFormItem={refFormItem}
          disabled={this.runtimeModel?.disabled}
          format={editor?.editorParams?.['TIMEFMT']}
          on-formitemvaluechange={(value: any) => {
            this.onFormItemValueChange(value);
          }}
          style={contentStyle}
        ></app-date-range>
      );
    } else if (Object.is(editor?.editorType, 'NUMBERRANGE')) {
      return (
        <app-number-range
          name={name}
          activeData={this.data}
          refFormItem={refFormItem}
          disabled={this.runtimeModel?.disabled}
          on-formitemvaluechange={(value: any) => {
            this.onFormItemValueChange(value);
          }}
          style={contentStyle ? contentStyle : 'width: 300px'}
        ></app-number-range>
      );
    } else {
      return (
        <app-range-editor
          value={this.data[name]}
          activeData={this.data}
          name={name}
          editorType={editor?.editorType}
          refFormItem={refFormItem}
          disabled={this.runtimeModel?.disabled}
          format={editor?.editorParams?.['TIMEFMT']}
          on-formitemvaluechange={(value: any) => {
            this.onFormItemValueChange(value);
          }}
          style={contentStyle}
        ></app-range-editor>
      );
    }
  }

  /**
   * 绘制复合表单项
   *
   * @returns
   * @memberof AppDefaultFormItem
   */
  renderCompositeItem() {
    const { name, contentHeight, contentWidth } = this.detailsInstance;
    let editor = this.detailsInstance.getPSEditor();
    let formItems = this.detailsInstance.getPSDEFormItems();
    let editorType = editor?.editorType;
    // 设置高宽
    let contentStyle: string = '';
    contentStyle += contentWidth && contentWidth != 0 ? `width:${contentWidth}px;` : '';
    contentStyle += contentHeight && contentHeight != 0 ? `height:${contentHeight}px;` : '';
    contentStyle += this.runtimeModel?.visible ? '' : 'display: none;';
    const refFormItem: any = [];
    if (formItems) {
      formItems?.forEach((formItem: any) => {
        refFormItem.push(formItem?.name);
      });
    }
    if (editor?.editorType !== 'USERCONTROL') {
      return this.renderBaseCompositeEditor(refFormItem, name, editor, contentStyle);
    } else {
      return (
        <app-default-editor
          editorInstance={editor}
          value={this.data[editor.name]}
          contextData={this.data}
          context={this.context}
          viewparams={this.viewparams}
          service={this.service}
          disabled={this.runtimeModel?.disabled}
          ignorefieldvaluechange={this.ignorefieldvaluechange}
          on-change={(value: any) => {
            this.onFormItemValueChange(value);
          }}
        />
      );
    }
  }

  /**
   * 属性标识
   *
   * @type {string}
   * @memberof AppDefaultFormItem
   */
  tipTag: string = '';

  /**
   * 监听表单成员实例对象变化
   *
   * @type {*}
   * @memberof AppDefaultFormItem
   */
  @Watch('detailsInstance', { immediate: true })
  detailsInstanceChange() {
    super.detailsInstanceChange();
    const field = this.detailsInstance?.getPSAppDEField();
    const entity = this.controlInstance?.getPSAppDataEntity();
    this.tipTag = `${entity?.codeName.toUpperCase()}__${field?.codeName.toUpperCase()}`;
  }

  /**
   * 绘制内容
   *
   * @returns {*}
   * @memberof AppDefaultFormItem
   */
  render(): any {
    const { detailClassNames } = this.renderOptions;
    let { name, caption, labelWidth, labelPos, showCaption, emptyCaption, detailStyle, compositeItem, contentWidth, contentHeight } = this.detailsInstance;
    let editor = this.detailsInstance.getPSEditor();
    let sysCss = this.detailsInstance.getLabelPSSysCss();
    let editorType = editor?.editorType;
    // 隐藏表单项
    if (editorType == 'HIDDEN') {
      return;
    }
    // 设置高宽
    let contentStyle: string = '';
    contentStyle += contentWidth && contentWidth != 0 ? `width:${contentWidth}px;` : '';
    contentStyle += contentHeight && contentHeight != 0 ? `height:${contentHeight}px;` : '';
    contentStyle += this.runtimeModel?.visible ? '' : 'display: none;';
    let labelCaption: any = this.detailsInstance.captionItemName
      ? this.data[this.detailsInstance.captionItemName.toLowerCase()]
      : this.$tl((this.detailsInstance.getCapPSLanguageRes() as IPSLanguageRes)?.lanResTag, caption);
    return (
      <app-form-item
        tipTag={this.tipTag}
        name={name}
        caption={labelCaption}
        isEmptyCaption={emptyCaption}
        isShowCaption={showCaption}
        labelWidth={labelWidth}
        labelPos={labelPos}
        detailsInstance={this.detailsInstance}
        uiStyle={detailStyle}
        itemRules={this.rules}
        required={this.runtimeModel?.required}
        error={this.runtimeModel?.error}
        class={detailClassNames}
        labelStyle={sysCss?.cssName}
        style={contentStyle}
        controlInstance={this.controlInstance}
      >
        {compositeItem ? this.renderCompositeItem() : this.$slots.default}
      </app-form-item>
    );
  }
}