import React from 'react';
import { inject, observer} from 'mobx-react';
import {WeaSearchGroup,
        WeaFormItem,
        WeaNewScroll,
       } from 'ecCom';
import * as mobx from 'mobx';
const toJS = mobx.toJS;
import {WeaSwitch} from 'comsMobx';
import isEmpty from 'lodash/isEmpty';

@inject('hrmOrganization')
@observer
class OrganizationInfo extends React.Component {
  constructor(props) {
    super(props);
  }

  getFormField() {
    const { hrmOrganization } = this.props;
    const { formView, formFieldView } = hrmOrganization;

    const {isFormInit} = formView;
    const formParams = formView.getFormParams();
    let items = [];
    isFormInit && toJS(formFieldView).map(c =>{
      c.items.map((fields, index) => {
        items.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@zzk1d0@${index}`}
          underline={true}
          label={`${fields.label}`}
          labelCol={{span: 8}}
          wrapperCol={{span: 16}}>
            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@p0qhmz@${index}`} fieldConfig={fields} form={formView} formParams={formParams}/>
          </WeaFormItem>);
      });
    });
    return <div className="wea-form-item-group">{items}</div>;
  }

  getSearchGroupForm() {
    const { hrmOrganization } = this.props;
    const { formFieldView, formView } = hrmOrganization;

    let arr = [];
    let formParams = formView.getFormParams();
    formView.isFormInit && toJS(formFieldView).map((c, i) => {
        let _arr = [];
        c.items.map((field, index) => {
            _arr.push({
                com: (
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@g3whpg@${index}`}
                            underline={true}
                            label={`${field.label}`}
                            labelCol={{span: 8}}
                            wrapperCol={{span: 16}}
                        >
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ha0wz6@${index}`} fieldConfig={field} form={formView} formParams={formParams} />
                        </WeaFormItem>
                ),
                colSpan: 1
            })
        })
        arr.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@i8yhln@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={_arr} col={1} />)
    })

    return arr;
}

  render(){
    const { hrmOrganization } = this.props;
    const { formFieldView,isSingle } = hrmOrganization;
    let tmpFormField = toJS(formFieldView);
    let conditionLen = isEmpty(tmpFormField) ? 0 : tmpFormField.length;
    let dialogHeight = isSingle?window.innerHeight - 50 : window.innerHeight - 227;
    return (
      // <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@5c5eug`} height={dialogHeight} ref="scrollBar">
        <div className={conditionLen>1?'hrm-info-form-group':'hrm-info-form'}>
          {conditionLen>1?this.getSearchGroupForm():this.getFormField()}
        </div>
      // </WeaNewScroll>
    );
  }
}

export default OrganizationInfo
