import React, { Component } from "react";
import { inject, observer } from 'mobx-react/index'
import { withRouter } from 'react-router-dom'
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;

@withRouter @inject('appStore') @observer @Form.create()
export default class ProteinView extends Component {
  state = {
    sequence: "",
    loading: false,
    listData: {},
    imgUrl: "",
  };
  componentDidMount() {
    this.getImg();
  }
  onChange = (e) => {
    const { value } = e.target;
    console.log(value);
    this.setState({ sequence: value });
  };
  getList() {
    this.setState({ loading: true });
    request
      .post("/tool/calc-protein-property", { sequence: this.state.sequence })
      .then((res) => {
        console.log(res);
        this.setState({ loading: false });
        if (res.data.code === 0) {
          this.setState({ listData: res.data.data });
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((err) => {
        this.setState({ loading: false });
        console.error(err);
      });
  }
  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: "1",
      };
      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("登录成功");
              console.log(res.data.result.indexVOList);
              window.localStorage.setItem('token', res.data.result.token) 
              let indexVOList=res.data.result.indexVOList
              indexVOList[0].state=true
              console.log(indexVOList);
              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;

    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
          {getFieldDecorator("userAccount", {
            rules: [{ required: true, message: "帐号不能为空" }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
              placeholder="请输入帐号"
            />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator("userPwd", {
            rules: [
              { required: true, message: "密码不能为空" },
              { pattern: "^[^ ]+$", message: "密码不能有空格" },
            ],
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
              type="password"
              placeholder="密码"
            />
          )}
        </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
                  
                    className="VerifyCodeImg"
                    id="showImg"
                    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>
    );
  }
}
