import React, { Component } from "react";
import { Input, Button, Card, message, Form, Icon, Row, Col } from "antd";
import "./AccountLogin.css";
import request from "../../utils/request";
import qs from 'qs'
const { TextArea } = Input;
@Form.create()
export default class ProteinView extends Component {
  state = {
    sequence: "",
    loading: false,
    listData: {},
    duanxin: false,
    Sent: false,
    phoneNumber: "",
    yztime: 60,
    imgUrl:''
  };
  componentDidMount(){
    this.getImg()

  }
  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,
      });
    }
  };
  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);
  };
  getImg = () => {
    request
      .get("yszh-login/auth/getPicCaptchCode")
      .then((res) => {
        console.log(res.request.responseURL);
        var num = Math.ceil(Math.random() * 10000)
        this.setState({ imgUrl: res.request.responseURL+'?num='+ num });
      })
      .catch((err) => {
        this.setState({ loading: false });
        console.error(err);
      });
  };
  handleSubmit = (e) => {
    e.preventDefault();
    this.setState({
      focusItem: -1,
    });
    this.props.form.validateFields((err, values) => {
      console.log(values);
      const {userAccount,userPwd,picCaptcha}=values

      let data={
        userAccount:userAccount,
        userPwd:userPwd,
        picCaptcha:picCaptcha,
        type: "2" 

      }
      if (!err) {
        request
          .post("yszh-login/pub/login", data)
          .then((res) => {
            console.log(res);
            this.setState({ loading: false });
            if (res.data.code === 200) {
          
              message.success("登录成功");
              window.localStorage.setItem('token', res.data.result.token) 
              let indexVOList=res.data.result.indexVOList
              indexVOList[0].state=true
              this.props.appStore.toggleLogin(true, {username: 'hahah'})
              const {from} = {from: {pathname: '/home',search: qs.stringify(indexVOList),}}
              this.props.history.push(from)
             
            } else {
              message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.setState({ loading: false });
            console.error(err);
          });
      }
    });
  };
  render() {
    const { listData, loading } = this.state;

    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
        labelCol: { span: 7 },
        wrapperCol: { span: 17 },
      };

    return (
      <Form onSubmit={this.handleSubmit} className="login-form" >
        <Form.Item>
          {getFieldDecorator("userAccount", {
             rules: [
              { required: true, message: "手机号不能为空" },
              { pattern: "^1[3578]\\d{9}$", message: "请输入正确手机号！" },
            ],
          })(
            <Input
              prefix={<Icon type="mobile" style={{ color: "rgba(0,0,0,.25)" }} />}
              placeholder="手机号"
              onChange={this.getValuePhone}
            />
          )}
        </Form.Item>
        <Form.Item >
            {getFieldDecorator("userPwd", {
              validateFirst: true,
              rules: [{ required: true, message: "请输入验证码" }],
            })(
              <Row>
                <Col span={11}>
                  <Input   prefix={<Icon type="shake" style={{ color: "rgba(0,0,0,.25)" }} />} 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>
          {getFieldDecorator("picCaptcha", {
            validateFirst: true,
            rules: [{ required: true, message: "请输入验证码" }],
          })(
            <Row>
              <Col span={15}>
                <Input maxLength={5} placeholder="验证码" />
              </Col>
              <Col span={9}>
                <div className="Verification-code" onClick={this.getImg}>
                  <img
                    src={
                     this.state.imgUrl
                    }
                    alt=""
                  />
                </div>
              </Col>
            </Row>
          )}
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            style={{ width: "100%" }}
            htmlType="submit"
            className="login-form-button"
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    );
  }
}
