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 * as commonFunc from '../../components/Common/commonFunc';
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: '',
      app: props.app,
    };
    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() {
    const {app}= this.state;
    const ModifyPassword = commonFunc.showMessage(app.commonConst, 'ModifyPassword');/* 修改密码 */
    const oldPassword = commonFunc.showMessage(app.commonConst, 'oldPassword');/* 原密码 */

    const newPassword = commonFunc.showMessage(app.commonConst, 'newPassword');/* 新密码 */
    const confirmNewPassword = commonFunc.showMessage(app.commonConst, 'confirmNewPassword');/* 确认新密码 */
    const btnBack = commonFunc.showMessage(app.commonConst, 'btnBack');/* 返回 */

    const btnSave = commonFunc.showMessage(app.commonConst, 'BtnSave');/* 确认 */
    return (
      <div>
        <NavBar
          mode="light"
          leftContent={[<div style={{ width: "100%", textAlign: "left", color: "red" }}>{btnBack}</div>]}
          rightContent={[
            <div onClick={this.handleSubmitPwd.bind(this)} style={{ width: "100%", textAlign: "right", color: "red" }}>
              {btnSave}
            </div>,
          ]}
          onLeftClick={() => {
            window.history.back(-1);
          }}
          className={styles.iconColor}
        >
          {ModifyPassword}
        </NavBar>
        <List className={styles.myselfList}>
          <div style={{ margin: "10px 0" }}>
            <InputItem
              placeholder={oldPassword}
              type="password"
              clear
              onChange={this.onChange.bind(this, "sOldPwd")}
              value={this.state.sOldPwd}
              // ref={ el => this.inputRef = el}
            />
          </div>
          <InputItem
            placeholder={newPassword}
            type="password"
            onChange={this.onChange.bind(this, "sUserPwd")}
            value={this.state.sUserPwd}
            // ref={el => this.inputRef = el}
          />
          <InputItem
            placeholder={confirmNewPassword}
            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));
