content: import React from 'react'
  import md5Hex from 'md5-hex'
  
  import './style.scss'
  
  /** 登录界面*/
  class Login extends React.Component {
  
    static propTypes = {
      users: React.PropTypes.arrayOf(React.PropTypes.shape({
        oaAccount: React.PropTypes.string,
        userName: React.PropTypes.string,
        position: React.PropTypes.string
      })),
      logining: React.PropTypes.bool,
      handleLogin: React.PropTypes.func
    }
  
    genertateOaSsoUrl (oaAccount) {
      var uid = oaAccount
      // 获取当前日期 yyyyMMdd
      var today = new Date()
      var year = today.getFullYear()
      var month = today.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      var date = today.getDate()
      if (date < 10) {
        date = '0' + date
      }
      today = '' + year + month + date
      var prefix = 'oa123qwe!'
      var suffix = '###'
      var pid = prefix + today + uid + suffix
      pid = md5Hex(pid)
      var ruid = 'todo'
      ruid = md5Hex(ruid)
      // var ip = 'http://192.168.16.216:8888';
      // var ip = 'http://127.0.0.1:8080';
      var url = '/qdp/login/sso/oa?uid=' + uid + '&pid=' + pid + '&ruid=' + ruid
      return url
    }
  
    handleSubmit = (event) => {
      event.preventDefault()
      this.props.handleLogin(this.refs.account.value)
    }
  
    render () {
      var genertateOaSsoUrl = this.genertateOaSsoUrl
  
      return (
        <form className='container-fluid form-horizontal payment-login-form' onSubmit={this.handleSubmit}>
          <div className='form-group'>
            <div className='col-md-12'>
              <div className='ctg-logo' style={{display: 'inline-block'}} />
              <span className='payment-login-title'>合同支付审签系统</span>
            </div>
          </div>
          <div className='form-group payment-login-form-body'>
            <div className='col-md-12'>
              <select ref='account' className='form-control'>
                {
                  ['请选择账号...'].concat(this.props.users).map(function (x, index) {
                    if (x.oaAccount) {
                      return (<option key={index} value={genertateOaSsoUrl(x.oaAccount)}>
                                {x.userName}({x.oaAccount}) {x.position}
                      </option>)
                    } else {
                      return (<option key={index}>{x}</option>)
                    }
                  })
                }
              </select>
            </div>
            <div className='col-md-12'>
              {
                this.props.logining
                ? (<button disabled className='btn btn-primary' style={{width: '100%'}}>登录中。。。</button>)
                : (<button type='submit' className='btn btn-primary' style={{width: '100%'}}>登录</button>)
              }
            </div>
          </div>
        </form>
      )
    }
  }
  
  export default Login
  