import React, { Component } from "react";
import { WeaCheckbox, WeaFormItem, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
import { observer } from "mobx-react";
import { WeaSwitch } from "comsMobx";

const getLabel = WeaLocaleProvider.getLabel;
@observer
export default class FormInfo extends Component {
  renderForm = () => {
    const {
      formFields, form, colCount, itemRender, onSelectedChangeHandle, showLabel, multiColumn, custLabelCol,
      childrenComponents
    } = this.props;

    let groupArr = [];
    const formParams = form.getFormParams();
    const labelVisible = showLabel == null || showLabel == true;
    const col = colCount ? colCount : 1;
    const labelCol = labelVisible ? (custLabelCol || 6) : 0;
    const itemProps = {
      // ratio1to2: labelVisible && custLabelCol == null,
      style: { marginLeft: 0 },
      tipPosition: "bottom",
      labelCol: { span: labelCol },
      wrapperCol: { span: 22 - labelCol }
    };
    const textAreaProps = { minRows: 4, maxRows: 4 };

    formFields.map((fields, i) => {
      let formItems = [];
      fields.items.map((field, j) => {
        const customerRender = itemRender != null ? itemRender[field.domkey[0]] : null;
        const showCheckbox = field.checkbox || false;
        let label = getLabel(field.lanId, field.label);
        if (showCheckbox)
          label = <WeaCheckbox content={label} value={field.checkboxValue} onChange={(v) => {
            field.checkboxValue = v === "1";
            onSelectedChangeHandle && onSelectedChangeHandle(field, v);
          }}/>;
        let coms;
        if (customerRender == null) {
          coms = <WeaSwitch fieldConfig={{
            ...field, helpfulTip: getLabel(field.helpfulTipLanId || "", field.helpfulTip || ""), ...textAreaProps,
            hasBorder: false
          }} form={form} formParams={formParams}/>;
        } else {
          coms = customerRender({
            ...field, helpfulTip: getLabel(field.helpfulTipLanId || "", field.helpfulTip || "")
          }, textAreaProps, form, formParams);
        }
        Object.assign(itemProps, { label, error: form.getError(field) });
        let col = colCount ? colCount : 1;
        if (multiColumn != null) {//检查有哪些字段需要一行显示多个
          const idx = _.findIndex(multiColumn, item => item.key === field.domkey[0]);
          if (idx > -1) {
            col = field.colSpan || 1;
            if (multiColumn[idx].labelCol != null)//检查字段是否有配置标题宽度
              Object.assign(itemProps, {
                labelCol: { span: multiColumn[idx].labelCol },
                wrapperCol: { span: 24 - multiColumn[idx].labelCol }
              });
          } else {
            Object.assign(itemProps, {
              labelCol: { span: labelCol },
              wrapperCol: { span: 24 - labelCol }
            });
          }
        }
        coms != null && formItems.push({
          com: (<WeaFormItem {...itemProps}>{coms}</WeaFormItem>), hide: field.hide,
          col
        });

        if (childrenComponents && childrenComponents[field.domkey[0]]) {
          childrenComponents[field.domkey[0]]().map(child => formItems.push(child));
        }
      });

      groupArr.push(<WeaSearchGroup
        center={this.props.center != null ? this.props.center : true}
        needTigger={true}
        title={formFields.length < 2 ? null : fields.title}
        showGroup={true}
        items={formItems}
        col={col}
        fontSize={14}/>);
    });
    return groupArr;
  };

  render() {
    const { formFields, className, form } = this.props;
    if (formFields == null || !form.isFormInit) return (<div></div>);
    return (
      <div className={className}>{this.renderForm()}</div>
    );
  }
}