text: import React, { Component } from 'react';
  import { connect } from 'dva';
  import { routerRedux, Link } from 'dva/router';
  import { Form, Input, Button, Select, Row, Col, Popover, Progress } from 'antd';
  import styles from './Setting.less';
  
  const FormItem = Form.Item;
  const { Option } = Select;
  const InputGroup = Input.Group;
  
  const passwordStatusMap = {
    ok: <div className={styles.success}>强度：强</div>,
    pass: <div className={styles.warning}>强度：中</div>,
    pool: <div className={styles.error}>强度：太短</div>,
  };
  
  const passwordProgressMap = {
    ok: 'success',
    pass: 'normal',
    pool: 'exception',
  };
  
  @connect(state => ({
    setting: state.setting,
  }))
  @Form.create()
  export default class Setting extends Component {
    state = {
      confirmDirty: false,
      visible: false,
      prevVisible: false,
      prevHelp: '',
      help: '',
    }
  
    componentWillReceiveProps(nextProps) {
      if (nextProps.setting.status === 'ok') {
        this.props.dispatch(routerRedux.push('/user/settingResult'));
      }
    }
  
    componentWillUnmount() {
      clearInterval(this.interval);
    }
  
    onGetCaptcha = () => {
      let count = 59;
      this.setState({ count });
      this.interval = setInterval(() => {
        count -= 1;
        this.setState({ count });
        if (count === 0) {
          clearInterval(this.interval);
        }
      }, 1000);
    }
  
    getPasswordStatus = () => {
      const { form } = this.props;
      const value = form.getFieldValue('password');
      if (value && value.length > 9) {
        return 'ok';
      }
      if (value && value.length > 5) {
        return 'pass';
      }
      return 'pool';
    }
  
    handleSubmit = (e) => {
      e.preventDefault();
      this.props.form.validateFields({ force: true },
        (err, values) => {
          if (!err) {
            console.log(values);
            this.props.dispatch({
              type: 'setting/modifyPassword',
              payload: values,
            });
          }
        }
      );
    }
  
    handleConfirmBlur = (e) => {
      const { value } = e.target;
      this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }
  
    checkConfirm = (rule, value, callback) => {
      const { form } = this.props;
      if (value && value !== form.getFieldValue('password')) {
        callback('两次输入的密码不匹配!');
      } else {
        callback();
      }
    }
  
    checkPassword = (rule, value, callback) => {
      if (!value) {
        this.setState({
          help: '请输入密码！',
          visible: !!value,
        });
        callback('error');
      } else {
        this.setState({
          help: '',
        });
        if (!this.state.visible) {
          this.setState({
            visible: !!value,
          });
        }
        if (value.length < 6) {
          callback('error');
        } else {
          const { form } = this.props;
          if (value && this.state.confirmDirty) {
            form.validateFields(['confirm'], { force: true });
          }
          callback();
        }
      }
    }
  
    renderPasswordProgress = () => {
      const { form } = this.props;
      const value = form.getFieldValue('password');
      const passwordStatus = this.getPasswordStatus();
      return value && value.length ?
        <div className={styles[`progress-${passwordStatus}`]}>
          <Progress
            status={passwordProgressMap[passwordStatus]}
            className={styles.progress}
            strokeWidth={6}
            percent={value.length * 10 > 100 ? 100 : value.length * 10}
            showInfo={false}
          />
        </div> : null;
    }
  
    render() {
      const { form } = this.props;
      const { getFieldDecorator } = form;
      return (
        <div className={styles.main}>
          <h3>修改密码</h3>
          <Form onSubmit={this.handleSubmit} >
            <FormItem help="">
              {getFieldDecorator('prevPassword', {
                rules: [{
                  required: true, message: '请输入原密码！',
                }],
              })(
                <Input
                  size="large"
                  type="password"
                  placeholder="请输入原密码"
                />
              )}
            </FormItem>
            <FormItem help={this.state.help}>
              <Popover
                content={
                  <div style={{ padding: '4px 0' }}>
                    {passwordStatusMap[this.getPasswordStatus()]}
                    {this.renderPasswordProgress()}
                    <div style={{ marginTop: 10 }}>请至少输入 6 个字符。请不要使用容易被猜到的密码。</div>
                  </div>
                }
                overlayStyle={{ width: 240 }}
                placement="right"
                visible={this.state.visible}
              >
                {getFieldDecorator('password', {
                  rules: [{
                    validator: this.checkPassword,
                  }],
                })(
                  <Input
                    size="large"
                    type="password"
                    placeholder="请输入新密码，至少6位密码，区分大小写"
                  />
                )}
              </Popover>
            </FormItem>
            <FormItem>
              {getFieldDecorator('confirm', {
                rules: [{
                  required: true, message: '请确认密码！',
                }, {
                  validator: this.checkConfirm,
                }],
              })(
                <Input
                  size="large"
                  type="password"
                  placeholder="请再次输入新密码"
                />
              )}
            </FormItem>
            {/* <FormItem> */}
            {/* <Row gutter={8}> */}
            {/* <Col span={16}> */}
            {/* {getFieldDecorator('captcha', { */}
            {/* rules: [{ */}
            {/* required: true, message: '请输入验证码！', */}
            {/* }], */}
            {/* })( */}
            {/* <Input */}
            {/* size="large" */}
            {/* placeholder="验证码" */}
            {/* /> */}
            {/* )} */}
            {/* </Col> */}
            {/* <Col span={8}> */}
            {/* <Button */}
            {/* size="large" */}
            {/* disabled={count} */}
            {/* className={styles.getCaptcha} */}
            {/* onClick={this.onGetCaptcha} */}
            {/* > */}
            {/* {count ? `${count} s` : '获取验证码'} */}
            {/* </Button> */}
            {/* </Col> */}
            {/* </Row> */}
            {/* </FormItem> */}
            <FormItem>
              <Row gutter={8}>
                <Col span={18}>
                  <Button size="large" className={styles.submit} type="primary" htmlType="submit"> 提交</Button>
                </Col>
                <Col span={6}>
                  <Link to="/"><Button size="large" type="primary">返回首页</Button></Link>
                </Col>
              </Row>
            </FormItem>
          </Form>
        </div>
      );
    }
  }
  