import React, { Component } from 'react'
import { Modal, Input, notification } from 'antd'
import styles from './Login.less'
import { getUserByUserNoOrNiceNo } from '@/services/common'

class Login extends Component {
  constructor (props) {
    super(props)
    this.state = {
      userNo: ''
    }
  }
  onLogin = async (e) => {
    e.preventDefault()
    const { userNo } = this.state
    if (!userNo) {
      notification.error({
        message: '请输入您的ID或靓号'
      })
      return
    }
    const { code, data } = await getUserByUserNoOrNiceNo({ params: userNo })
    if (code === 'OK' && data) {
      const { onOk } = this.props 
      onOk && onOk(data)
    } else {
      notification.error({ message: '用户不存在' })
    }
  }

  onUserNoChange = (e) => {
    const { value } = e.target
    this.setState({ userNo: value })
  }
  render () {
    const { userNo } = this.state
    return (
      <Modal 
        {...this.props}
        footer={null}
        width={700}
        title='登录'
      >
        <div>
          <h3 className={styles['modal-title']}>请登录您的账号</h3>
          <p className={styles['input-title']}>请输入您的ID或靓号</p>
          <div className={styles['input-wrap']}>
            <Input 
              placeholder='请输入您的ID或靓号'
              value={userNo}
              onChange={this.onUserNoChange}
            />
          </div>
          <div className={styles['recharge-btn-wrap']}>
            <a href="#" onClick={this.onLogin} className={styles['recharge-btn']}>登录</a>
          </div>
        </div>
      </Modal>
    )
  }
}
export default Login