import React, { Component } from "react";
import { Input, Button, Card, message, Form, Icon, Row, Col } from "antd";
import "./AccountLogin.css";
import request from "../../utils/request";
const { TextArea } = Input;
@Form.create()
export default class PhoneRetrieval extends Component {
  state = {
    sequence: "",
    loading: false,
    listData: {},
    duanxin: false,
    Sent: false,
    phoneNumber: "",
    yztime: 60,
  };
  onChange = (e) => {
    const { value } = e.target;
    console.log(value);
    this.setState({ sequence: value });
  };

  goPhone = () => {
    request
      .post("yszh-login/auth/getMobileCaptchCode", {
        phoneNumber: this.state.phoneNumber,
      })
      .then((res) => {
        console.log(res);
        this.setState({ loading: false });
        if (res.data.code === 200) {
          this.count();

          
        } else {
          message.error(res.data.message);
        }
      })
      .catch((err) => {
        this.setState({ loading: false });
        console.error(err);
      });
  };
  getValuePhone = (e) => {
    const { value } = e.target;
    var regExp = new RegExp("^1[3578]\\d{9}$");
    if (regExp.test(value)) {
      this.setState({
        duanxin: true,
      });
      this.setState({
        phoneNumber: value,
      });
    } else {
      this.setState({
        duanxin: false,
      });
    }
  };
  count = () => {
    this.setState({
      duanxin: false,
      Sent: true,
    });
    let { yztime } = this.state;
    let siv = setInterval(() => {
      this.setState({ yztime: yztime-- }, () => {
        if (yztime <= -1) {
          clearInterval(siv); //倒计时( setInterval() 函数会每秒执行一次函数)，用 clearInterval() 来停止执行:
          this.setState({ duanxin: true, Sent: false, yztime: 59 });
        }
      });
    }, 1000);
  };
  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({
      focusItem: -1,
    });
    this.props.form.validateFields((err, values) => {
      console.log(values);
      const {phoneNumber,pwd,checkPwd,captcha}=values

      let data={
        phoneNumber:phoneNumber,
        pwd:pwd,
        checkPwd:checkPwd,
        captcha: captcha

      }
      if (!err) {
        request
          .post("/yszh-login/auth/checkMobileCaptcha", data)
          .then((res) => {
            console.log(res);
            this.setState({ loading: false });
            if (res.data.code === 200) {
             
              message.success("修改成功");
              this.props.gobackLogin();
              
             
            } else {
              message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.setState({ loading: false });
            console.error(err);
          });
      }
    });
  };
  render() {
    const { listData, loading } = this.state;
    const { getFieldDecorator, getFieldError, getFieldValue } = this.props.form;
    const formItemLayout = {
        labelCol: { span: 7 },
        wrapperCol: { span: 17 },
      };
    return (
      <Form onSubmit={this.handleSubmit} layout="vertical">
        <Form.Item label="手机号"{...formItemLayout}>
        {getFieldDecorator("phoneNumber", {
              rules: [
                { required: true, message: "手机号不能为空" },
                { pattern: "^1[3578]\\d{9}$", message: "请输入正确手机号！" },
              ],
            })(
              <Input onChange={this.getValuePhone} placeholder="请输入手机号" />
            )}
        </Form.Item>
        <Form.Item label="密码" {...formItemLayout}>
            {getFieldDecorator("pwd", {
              validateFirst: true,
              rules: [
                { required: true, message: "密码不能为空" },
                { pattern: "^[^ ]+$", message: "密码不能有空格" },
              ],
            })(<Input type="password" maxLength={16} placeholder="密码" />)}
          </Form.Item>
          <Form.Item label="确认密码" {...formItemLayout}>
            {getFieldDecorator("checkPwd", {
              validateFirst: true,
              rules: [
                { required: true, message: "请确认密码" },
                {
                  validator: (rule, value, callback) => {
                    if (value && value !== getFieldValue("pwd")) {
                      callback("两次输入不一致！");
                    }
                    callback();
                  },
                },
              ],
            })(<Input type="password" maxLength={16} placeholder="确认密码" />)}
          </Form.Item>
        <Form.Item label="验证码" {...formItemLayout}>
            {getFieldDecorator("captcha", {
              validateFirst: true,
              rules: [{ required: true, message: "请输入验证码" }],
            })(
              <Row>
                <Col span={11}>
                  <Input maxLength={6} placeholder="验证码" />
                </Col>
                <Col span={13}>
                  <div className="Verification-code">
                    <Button
                      disabled={!this.state.duanxin}
                      type="primary"
                      onClick={this.goPhone}
                      style={{ marginLeft: "5px" }}
                    >
                      {this.state.Sent ? "已发送" : "发送短信"}
                      {this.state.Sent && this.state.yztime}
                    </Button>
                  </div>
                </Col>
              </Row>
            )}
          </Form.Item>
          <Form.Item>
          <Button
            type="primary"
            style={{ width: "100%" }}
            htmlType="submit"
            className="login-form-button"
          >
            确定
          </Button>
        </Form.Item>
      </Form>
    );
  }
}
