import React from 'react'
import { calculateWidth } from '../../utils/utils'
import { withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react/index'
import { Form, Input, message } from 'antd'
import PromptBox from '../../components/PromptBox'
import { request } from '../../utils/request'
import qs from 'qs'
import md5 from 'js-md5'


@withRouter @inject('appStore') @observer @Form.create()
class LoginForm extends React.Component {
  state = {
    focusItem: -1,   //保存当前聚焦的input
    code: ''         //验证码
  }

  componentDidMount () {
    // this.createCode()
  }

  /**
   * 生成验证码
   */
  // createCode = () => {
  //   const ctx = this.canvas.getContext('2d')
  //   const chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
  //   let code = ''
  //   ctx.clearRect(0, 0, 80, 39)
  //   for (let i = 0; i < 4; i++) {
  //     const char = chars[randomNum(0, 57)]
  //     code += char
  //     ctx.font = randomNum(20, 25) + 'px SimHei'  //设置字体随机大小
  //     ctx.fillStyle = '#D3D7F7'
  //     ctx.textBaseline = 'middle'
  //     ctx.shadowOffsetX = randomNum(-3, 3)
  //     ctx.shadowOffsetY = randomNum(-3, 3)
  //     ctx.shadowBlur = randomNum(-3, 3)
  //     ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
  //     let x = 80 / 5 * (i + 1)
  //     let y = 39 / 2
  //     let deg = randomNum(-25, 25)
  //     /**设置旋转角度和坐标原点**/
  //     ctx.translate(x, y)
  //     ctx.rotate(deg * Math.PI / 180)
  //     ctx.fillText(char, 0, 0)
  //     /**恢复旋转角度和坐标原点**/
  //     ctx.rotate(-deg * Math.PI / 180)
  //     ctx.translate(-x, -y)
  //   }
  //   this.setState({
  //     code
  //   })
  // }
  loginSubmit = (e) => {
    e.preventDefault()
    this.setState({
      focusItem: -1
    })
    this.props.form.validateFields((err, values) => {
      // this.props.appStore.toggleLogin(true, {username: values.username})
      // const {from} = this.props.location.state || {from: {pathname: '/'}}
      // this.props.history.push(from)

      if (!err) {
        // 表单登录时，若验证码长度小于4则不会验证，所以我们这里要手动验证一次，线上的未修复
        // if (this.state.code.toUpperCase() !== values.verification.toUpperCase()) {
        //   this.props.form.setFields({
        //     verification: {
        //       value: values.verification,
        //       errors: [new Error('验证码错误')]
        //     }
        //   })
        //   return
        // }
        // console.log();

        // const users = this.props.appStore.users
        // // 检测用户名是否存在
        // const result = users.find(item => item.username === values.username)
        // if (!result) {
        //   this.props.form.setFields({
        //     username: {
        //       value: values.username,
        //       errors: [new Error('用户名不存在')]
        //     }
        //   })
        //   return
        // } else {
        //   //检测密码是否错误
        //   if (result.passwd !== values.passwd) {
        //     this.props.form.setFields({
        //       passwd: {
        //         value: values.passwd,
        //         errors: [new Error('密码错误')]
        //       }
        //     })
        //     return
        //   }
        // }
        const newPasswd = md5(values.passwd)
        values.passwd = newPasswd
        request.post('/gpcr/login', qs.stringify(values))
          .then(res => {
            console.log(res)
            if (res.data.code === 200) {
              this.props.appStore.toggleLogin(true, { username: values.username })
              const { from } = this.props.location.state || { from: { pathname: '/' } }
              this.props.history.push(from)
            }
            else {
              message.error(res.data.msg)
            }
          })
          .catch(err => {
            console.error(err)
          })


      }
    })
  }
  register = () => {
    this.props.switchShowBox('register')
    setTimeout(() => this.props.form.resetFields(), 500)
  }

  render () {
    const { getFieldDecorator, getFieldError } = this.props.form
    const { focusItem, } = this.state
    return (
      <div className={this.props.className}>
        <h3 className='title'>管理员登录</h3>
        <Form onSubmit={this.loginSubmit}>
          <Form.Item help={getFieldError('username') &&
            <PromptBox info={getFieldError('username')} width={calculateWidth(getFieldError('username'))} />}>
            {getFieldDecorator('username', {
              rules: [{ required: true, message: '请输入用户名' }]
            })(
              <Input
                onFocus={() => this.setState({ focusItem: 0 })}
                onBlur={() => this.setState({ focusItem: -1 })}
                maxLength={16}
                placeholder='用户名'
                addonBefore={<span className='iconfont icon-User' style={focusItem === 0 ? styles.focus : {}} />} />
            )}
          </Form.Item>
          <Form.Item help={getFieldError('passwd') &&
            <PromptBox info={getFieldError('passwd')} width={calculateWidth(getFieldError('passwd'))} />}>
            {getFieldDecorator('passwd', {
              rules: [{ required: true, message: '请输入密码' }]
            })(
              <Input
                onFocus={() => this.setState({ focusItem: 1 })}
                onBlur={() => this.setState({ focusItem: -1 })}
                type='password'
                maxLength={16}
                placeholder='密码'
                addonBefore={<span className='iconfont icon-suo1' style={focusItem === 1 ? styles.focus : {}} />} />
            )}
          </Form.Item>
          {/* <Form.Item help={getFieldError('verification') &&
          <PromptBox info={getFieldError('verification')} width={calculateWidth(getFieldError('verification'))}/>}>
            {getFieldDecorator('verification', {
              validateFirst: true,
              rules: [
                {required: true, message: '请输入验证码'},
                {
                  validator: (rule, value, callback) => {
                    if (value.length >= 4 && code.toUpperCase() !== value.toUpperCase()) {
                      callback('验证码错误')
                    }
                    callback()
                  }
                }
              ]
            })(
              <Row>
                <Col span={15}>
                  <Input
                    onFocus={() => this.setState({focusItem: 2})}
                    onBlur={() => this.setState({focusItem: -1})}
                    maxLength={4}
                    placeholder='验证码'
                    addonBefore={<span className='iconfont icon-securityCode-b'
                                       style={focusItem === 2 ? styles.focus : {}}/>}/>
                </Col>
                <Col span={9}>
                  <canvas onClick={this.createCode} width="80" height='39' ref={el => this.canvas = el}/>
                </Col>
              </Row>
            )}
          </Form.Item> */}
          <div className='bottom'>
            <input className='loginBtn' type="submit" value='登录' />
            {/* <span className='registerBtn' onClick={this.register}>注册</span> */}
          </div>
        </Form>
        <div className='footer'>
          <div>欢迎登陆雅深智慧平台</div>
        </div>
      </div>
    )
  }
}

const styles = {
  focus: {
    width: '20px',
    opacity: 1
  },
}

export default LoginForm