import { inject, observer } from 'mobx-react';
import {Button,  Spin} from 'antd'
import {WeaTop,WeaSearchGroup,WeaRightMenu,WeaFormItem,WeaDialogFooter} from 'ecCom'
import {WeaSwitch} from 'comsMobx';
import isEmpty from 'lodash/isEmpty'
import forEach from 'lodash/forEach'
import * as mobx from 'mobx';
const toJS = mobx.toJS;
import { WeaLocaleProvider } from 'ecCom';
import {i18n} from '../public/i18n';
const getLabel = WeaLocaleProvider.getLabel;

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

  componentDidMount(){
    const {bindTokenKey} = this.props;
    const requestFrom = this.props.location.query.requestFrom ||'';
    const syncTokenKey = this.props.location.query.syncTokenKey ||'';
    const dialogId = this.props.location.query.dialogId ||'';
    const langid = this.props.location.query.langid ||'';
    bindTokenKey.dialogId = dialogId; 
    if(langid){
      WeaLocaleProvider.getLocaleLabelByLang(['common', 'hrm'], langid).then(()=>{
        if(syncTokenKey == '1'){
          bindTokenKey.title=()=>getLabel(129202, "令牌同步");
        }
        bindTokenKey.getFormField({requestFrom,syncTokenKey,langid});
      })
    }else{
      if(syncTokenKey == '1'){
        bindTokenKey.title=()=>getLabel(129202, "令牌同步");
      }
      bindTokenKey.getFormField({requestFrom,syncTokenKey,langid});
    }
  }

  getRightMenu(){
    const arr = [{
        icon: <i className='icon-coms-Batch-delete'/>,
        content:i18n.button.save(),
        key: 'save',
        onClick: key =>{
          this.save();
        }
      }
    ];
    return arr;
  }

  save(){
    const { bindTokenKey } = this.props;
    const userid = this.props.location.query.userid ||'';
    const requestFrom = this.props.location.query.requestFrom ||'';
    const syncTokenKey = this.props.location.query.syncTokenKey ||'';
    const langid = this.props.location.query.langid ||'7';
    bindTokenKey.save({userid,requestFrom,syncTokenKey,langid});
  }

  getFormField(){
    const { bindTokenKey } = this.props;
    let { form, formFields } = bindTokenKey;
    const {isFormInit} = form;
    let group = [];
    isFormInit && !isEmpty(formFields) && toJS(formFields).forEach((c, i) =>{
        let items = [];
        c.items.forEach( (field, j) => {
          items.push({
            com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@a32s21@${j}`}
                label={`${field.label}`}
                error={form.getError(field)}
                tipPosition="bottom"
                labelCol={{span: `${window.HrmLabelCol}`}}
                wrapperCol={{span: `${window.HrmWrapperCol}`}}>
                  <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@81eec8@${j}`} fieldConfig={field} form={form}/>
                  {field.self_tip && <div className='self-tip' title={field.self_tip}>{field.self_tip}</div>}
                </WeaFormItem>),
            colSpan: 1
          });
        });
        group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@hrhk5o@${i}`} center items={items} showGroup={true} size={'middle'}/>)
    });
    return group;
  }

  render(){
    const { bindTokenKey } = this.props;
    const { title, date } = bindTokenKey;
    const dialogId = this.props.location.query.dialogId ||'';
    const requestFrom = this.props.location.query.requestFrom ||'';
    return (
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@semb3q`} datas={this.getRightMenu()}>
        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@2gk5zb`}
          title={title()}
          loading={false}
          icon={<i className='icon-coms-hrm' />}
          iconBgcolor='#217346'
        > 
          <div>
            {this.getFormField()}
            <div style={{color:'red',fontSize:'10px',paddingLeft: requestFrom=='system'? '100px':'200px'}}>{getLabel('386545',"注意：一个口令只能用一次")}</div>
            {dialogId !='' && <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@ldhmna`} buttons={<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5nia0c`} type="primary" onClick={() => this.save()}>{i18n.button.save()}</Button>} />}
          </div>
        </WeaTop>
      </WeaRightMenu>
    );
  }
}

export default BindTokenKey