import React from 'react';
import { List, InputItem, NavBar, Toast } from 'antd-mobile-v2';
import { createForm } from 'rc-form';
import 'antd-mobile-v2/dist/antd-mobile.css';
// import ExamineMobile from './ExamineMobile';
// import commonConfig from '../../utils/config';
// import * as commonUtils from '../../utils/utils';
import CommobileBase from '../../mobile/common/CommobileBase';
import CommobileListEvent from './CommobileListEvent';
import styles from '../mobile.less';
import  config from '../../utils/config';

class RevisePasswordMobile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sId: props.app.userinfo.sId,
      dispatch: props.dispatch,
      hasError: false,
      sOldPwd: '',
      sUserPwd: '',
      sUserPwdAgain: '',
    };
    this.obj = {};
  }
  onErrorClick = () => {
    if (this.state.hasError) {
      Toast.fail('密码输入不一致', 1);
    }
  }

  onChange = (name, value) => {
    // const nameNew = name;
    this.obj[name] = value;
    if (this.obj.sUserPwd !== this.obj.sUserPwdAgain) {
      this.setState({
        hasError: true,
      });
    } else {
      this.setState({
        hasError: false,
      });
    }
    this.setState({ [`${name}`]: value });
  }
  handleSubmitPwd = (e) => {
    /* 阻止表单提交动作 */
    e.preventDefault();
    const values = {};
    const {
      sId,
      sOldPwd,
      sUserPwd,
      sUserPwdAgain,
    } = this.state;
    values.sId = sId;
    values.sOldPwd = sOldPwd;
    values.sUserPwd = sUserPwd;
    values.sUserPwdAgain = sUserPwdAgain;
    if (values.sUserPwd !== values.sUserPwdAgain) {
      Toast.fail('密码输入不一致', 1);
      return;
    }
    const url = `${config.server_host}sftlogininfo/updatePasswordUserName/update?sModelsId=${100}`;
    const { dispatch } = this.state;
    dispatch({ type: 'app/editPwd', payload: { url, value: values, editPwdType: 'mobile' } });
  }
  render() {
    return (
      <div>
        <NavBar
          mode="light"
          leftContent={[
            <div style={{ width: '100%', textAlign: 'left', color: 'red' }}>返回</div>,
          ]
          }
          rightContent={[
            <div onClick={this.handleSubmitPwd.bind(this)} style={{ width: '100%', textAlign: 'right', color: 'red' }}>保存</div>,
          ]}
          onLeftClick={() => { window.history.back(-1); }}
          className={styles.iconColor}
        >
          修改密码
        </NavBar>
        <List className={styles.myselfList}>
          <div style={{ margin: '10px 0' }}>
            <InputItem
              placeholder="原密码"
              type="password"
              clear
              onChange={this.onChange.bind(this, 'sOldPwd')}
              value={this.state.sOldPwd}
              // ref={ el => this.inputRef = el}
            />
          </div>
          <InputItem
            placeholder="新密码"
            type="password"
            onChange={this.onChange.bind(this, 'sUserPwd')}
            value={this.state.sUserPwd}
            // ref={el => this.inputRef = el}
          />
          <InputItem
            placeholder="确认新密码"
            type="password"
            error={this.state.hasError}
            onErrorClick={this.onErrorClick}
            onChange={this.onChange.bind(this, 'sUserPwdAgain')}
            value={this.state.sUserPwdAgain}
            // ref={el => this.inputRef = el}
          />
        </List>
      </div>
    );
  }
}
const BasicInputExampleWrapper = createForm()(RevisePasswordMobile);
export default CommobileBase(CommobileListEvent(BasicInputExampleWrapper));