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

/**
 * 表单UI组件
 *
 * @export
 * @class AppDefaultSearchFormItem
 * @extends {Vue}
 */
@Component({})
@VueLifeCycleProcessing()
export class AppDefaultSearchFormItem extends AppDefaultSearchFormDetail {
    /**
     * 表单数据
     *
     * @type {*}
     * @memberof AppDefaultSearchFormItem
     */
    @Prop() data: any;

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

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

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

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

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


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

    /**
     * 绘制复合表单项
     *
     * @returns
     * @memberof AppDefaultSearchFormItem
     */
    renderCompositeItem() {
        const { name, contentHeight, contentWidth, editor, formItems } = this.detailsInstance;
        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 (
              <app-range-editor
                  value={this.data[name]}
                  activeData={this.data}
                  name={name}
                  editorType={editorType}
                  refFormItem={refFormItem}
                  disabled={this.runtimeModel?.disabled}
                  format={editor.getEditorParam('TIMEFMT')}
                  on-formitemvaluechange={(value: any) => {
                    this.onFormItemValueChange(value);
                  }}
                  style={contentStyle}
              ></app-range-editor>
          );
        } else {
          return (
          <app-default-editor
              editorInstance={editor}
              containerCtrl={this.controlInstance}
              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);
              }}
          />)
        }
    }

    /**
     * 绘制内容
     *
     * @returns {*}
     * @memberof AppDefaultSearchFormItem
     */
    render(): any {
        const { detailClassNames } = this.renderOptions;
        let {
            name,
            caption,
            labelWidth,
            labelPos,
            showCaption,
            emptyCaption,
            detailStyle,
            getLabelPSSysCss,
            editor,
            compositeItem,
            contentWidth,
            contentHeight,
        } = this.detailsInstance;
        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.$tl((this.detailsInstance.getCapPSLanguageRes() as IPSLanguageRes)?.lanResTag, caption);
        return (
            <app-form-item
                name={name}
                caption={labelCaption}
                isEmptyCaption={emptyCaption}
                isShowCaption={showCaption}
                labelWidth={labelWidth}
                labelPos={labelPos}
                uiStyle={detailStyle}
                itemRules={this.rules}
                required={this.runtimeModel?.required}
                error={this.runtimeModel?.error}
                class={detailClassNames}
                labelStyle={getLabelPSSysCss?.cssName}
                style={contentStyle}
                controlInstance={this.controlInstance}
            >
                { compositeItem ? (
                    this.renderCompositeItem()
                ) : this.$slots.default }
            </app-form-item>
        );
    }
}