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('登录成功');
              window.localStorage.setItem('token', res.data.result.token);
              let indexVOList = res.data.result.indexVOList;
              console.log('indexVOList', indexVOList);
              indexVOList.push({ name: 'Kinase00', url: 'http://localhost:3000/#/Kinase', type: 2 });
              // indexVOList.push({ name: 'GPCR', url: 'http://localhost:3001/#/home' });
              // indexVOList.push({ name: 'Antigen2', url: 'http://localhost:3002/#/home' });
              // indexVOList.push({ name: 'PLDM', url: 'http://localhost:3003/#/login' });
              // indexVOList.push({ name: 'KG', url: 'http://localhost:3004/#/login' });
              // indexVOList.push({ name: 'Computed', url: 'http://172.16.20.12:3002/#/home/Docking'});
              if (indexVOList && indexVOList.length > 0) {
                indexVOList[0].state = true;
              }
              
              console.log(indexVOList);
              this.props.appStore.toggleLogin(true, { username: 'hahah' });
              const { from } = { from: { pathname: '/home', search: qs.stringify(indexVOList) } };
              console.log('qs.stringify(indexVOList)', qs.stringify(indexVOList));
              console.log('from', from);
              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>
    );
  }
}
