import {inject, observer} from "mobx-react";
import {toJS} from "mobx";
import {
  Button,
} from "antd";
import {
  WeaTop,
  WeaFormItem, 
  WeaRightMenu, 
  WeaNewScroll,
  WeaSearchGroup,
  WeaLocaleProvider, 
} from "ecCom";
import {
  WeaSwitch,
} from "comsMobx";
import NoRight from "../../public/NoRight";
import {
  onCheck,
  getForm
} from "../../util/IntegrationUtil";

const getLabel = WeaLocaleProvider.getLabel;

@inject("ExchangeStore")
@observer
class UserLoginURL extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      buttonLoading: false
    };
  }

  componentDidMount() {
    const { ExchangeStore } = this.props;
    ExchangeStore.doLoginURLInit();
    this.setState({
      buttonLoading: false
    });
  }

  componentWillReceiveProps(nextProps) {
    const { ExchangeStore } = this.props;
    if (this.props.location.key !== nextProps.location.key) {
      ExchangeStore.doLoginURLInit();
      this.setState({
        buttonLoading: false
      });
    }
  }

  /**
   * 按钮的显示和事件
   */
  onMenuClick = (type) => {
    const { 
      ExchangeStore 
    } = this.props, { 
      loginURLForm,
      doOperationlimit, 
    } = ExchangeStore;
    if(type && "BTN_SAVE" === type.toLocaleUpperCase()) {
      onCheck(loginURLForm, () => {
        this.setState({buttonLoading: true});
        doOperationlimit({...loginURLForm.getFormParams(), operate: "SaveUserAndPwd"}, (result) => {
          this.setState({buttonLoading: false});
        });
      });
    }
  };

  getBtns = (datas=[]) => {
    return datas && datas.map(data => <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@g5fp4r@integrationExchangeUserLoginButton${data.key}`} disabled={this.state.buttonLoading} type={data.type} key={data.key} onClick={() => this.onMenuClick(data.key)}>{data.content}</Button>);
  };

  getRightMenu = (datas=[]) => {
    return datas && datas.map(data => {
      return {
        ...data,
        disabled: this.state.buttonLoading,
        onClick: () => this.onMenuClick(data.key)
      }
    })
  }

  getForm = (form, datas=[]) => {
    const {
      isFormInit
    } = form;
    const formParams = form.getFormParams();
    let group = [];
    isFormInit && datas && datas.forEach((c, index) => {
      let items = [];
      c && c.items && c.items.forEach(fields => {
        let key = fields.domkey[0];
        items.push({
          com: (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@6qjgvw@integrationExchangeUserLoginForm${key}`}
              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@wcw5z1@integrationExchangeUserLoginForm${key}`} fieldConfig={fields} form={form} formParams={formParams} />
            </WeaFormItem>),
          colSpan: 1,
          hide: form.isHide(fields, (keys, allParams) => {
            let bool = false;
            fields && fields.showWhere && fields.showWhere.length > 0 && fields.showWhere.forEach(w => {
              if(!bool){
                let show = false;
                for(let val of w.value){
                if(allParams[w.domkey] == val){
                    show = true;
                    break;
                }
                }
                bool = !show;
              }
            })
            return bool;
          })
        });
      })
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@orktmw@integrationExchangeUserLoginForm${index}`} col={1} center={true} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items}/>)
    });
    return group;
  }

  render() {
    const { 
      ExchangeStore 
    } = this.props, {
      status,
      loginURLForm,
    } = ExchangeStore, {
      urlMenus,
      loginURLLoading,
      loginURLhasRight, 
      urlCollectParams,
      loginURLCondition,
    } = toJS(status);
    return (
      loginURLLoading 
        ? null
        : loginURLhasRight
          ? <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@emy4q9`}
              datas={this.getRightMenu(urlMenus)}
              collectParams={urlCollectParams}
            >
              <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@lgxlg4`}
                title={getLabel('517412','Exchange集成')}
                icon={<i className="icon-coms-integration" />}
                iconBgcolor="#1a57a0"
                buttons={this.getBtns(urlMenus)}
                showDropIcon={true}
                dropMenuDatas={this.getRightMenu(urlMenus)}
                dropMenuProps={{collectParams: urlCollectParams}}
              />
               <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@tdeens`} height={"calc(100% - 54px)"}> 
                 {getForm(loginURLForm, loginURLCondition, true, null, null, null, this && this.props && this.props.ecId || '', "integrationExchangeLoginUrlForm")}
               </WeaNewScroll>
            </WeaRightMenu>
          : <NoRight ecId={`${this && this.props && this.props.ecId || ''}_NoRight@1vvvkc`}/>
    );
  }
}

export default UserLoginURL;
