import React from 'react';
import {toJS} from 'mobx';
import {inject, observer} from "mobx-react";
import {WeaRightMenu, WeaTop, WeaFormItem, WeaSearchGroup, WeaLocaleProvider, WeaNewScroll} from 'ecCom';
import {WeaSwitch} from "comsMobx";
import {Button, Spin} from 'antd';

const {getLabel} = WeaLocaleProvider;

@inject("ldapInit")
@observer
export default class LDAPInit extends React.Component{
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const {ldapInit} = this.props;
    ldapInit.getForm();
  }

  componentWillReceiveProps(nextProps) {
    if(this.props.location.key != nextProps.location.key) {
      this.props.ldapInit.getForm();
    }
  }

  getRightMenus = () => {
    return [{
      key: "init",
      icon:  <i className="icon-coms-operation"/>,
      content: getLabel(20873, "初始化"),
      onClick: () => this.onMenuClick("init")
    }]
  }

  getBtns = () => {
    return [
     <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j7i5z8@integrationLdapInitButtonInit`} type="primary" onClick={() => this.onMenuClick("init")}>{getLabel(20873, "初始化")}</Button>
    ]
  }

  onMenuClick = (type) => {
    const {ldapInit} = this.props;
    const {save, newForm} = ldapInit;

    if(type === "init") {
      newForm.validateForm().then(f => {
        if(f.isValid) {
          save();
        }else {
          f.showErrors();
        }
      })
    }
  }

  getSearch = (form, condition) => {
    const {isFormInit} = form;
    const formParams = form.getFormParams();
    let group = [];

    isFormInit && condition && condition.map((c, index) => {
      let items = [];
      c.items && c.items.map(fields => {
        items.push({
          com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@qqw4c3@integrationLdapInitForm${fields.domkey[0]}`}
            label={`${fields.label}`}
            labelCol={{span: `${fields.labelcol}`}}
            wrapperCol={{span: `${fields.fieldcol}`}}
            error={form.getError(fields)}
            tipPosition="bottom"
          >
            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@eqinbs@integrationLdapInitForm${fields.domkey[0]}`} form={form} fieldConfig={fields} formParams={formParams} />
          </WeaFormItem>)
        })
      })
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@zbnms8@integrationLdapInitForm${index}`} center={true} col={1} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />)
    })
    
    return group;
  }
  
  render() {
    const {ldapInit} = this.props;
    const {status, newForm} = ldapInit;
    const {loading, condition} = toJS(status);
    const collectParams = {
      favname: "LDAP初始化",
      favouritetype: 1,
      objid: 0,
      link: "wui/engine.html#/integration/LDAPInit",
      importantlevel: 1
    }

    return (
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@qw2vu5`}
        datas={this.getRightMenus()}
        collectParams={[collectParams]}
      >
        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@u9wz8p`} 
            title={"LDAP初始化"}
            icon={<i className="icon-coms-integration" />}
            iconBgcolor="#1a57a0"
            buttons={this.getBtns()}
            showDropIcon={true}
            dropMenuDatas={this.getRightMenus()}
            dropMenuProps={{collectParams}}
        /> 
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@di6umz`} height={"calc(100% - 48px)"}>
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@sqdvjf`} spinning={loading}>
            {this.getSearch(newForm, condition)}
            </Spin>
        </WeaNewScroll>
      </WeaRightMenu>
    )
  }
  
}