import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Button } from 'components/Form'
import VerificationCode from 'components/VerificationCode'

import { LOG } from 'utils'

export default class Forget extends Component {
    static propTypes = {
        onSuccess: PropTypes.func,
        styles: PropTypes.object,
        step: PropTypes.number

    }
    static defaultProps = {
        onSuccess: () => { LOG('重置密码成功prop未定义') },
        step: 1
    }
    handelSendEmail = () => {
        alert('验证码已经发送到您的邮箱，请查收，并通过验证码进行修改操作')
    }
    handelReset = () => {
        this.props.onSuccess()
    }
    state = {errorInfo: '', loading: false}

    render () {
        const {styles, step} = this.props
        let view = null
        if (step === 1) {
            view =
                <div>
                    <p className={styles.title}>找回密码</p>
                    <input className={`${styles.inputText} ${styles.email}`} placeholder='注册时填写的邮箱地址或电话号码' type='text' />
                    <VerificationCode />
                    <p className={styles.error}>{this.state.errorInfo}</p>
                    <Button onClick={this.handelSendEmail}>确认</Button>
                </div>
        } else if (step === 2) {
            view =
                <div >
                    <p className={styles.title}>重置密码</p>
                    {/* <input className={`${styles.inputText} ${styles.code}`} placeholder='验证码' type='text' /> */}
                    <input className={`${styles.inputText} ${styles.pwd}`} placeholder='新密码' type='password' />
                    <input className={`${styles.inputText} ${styles.pwd}`} placeholder='重复新密码' type='password' />
                    <div className={styles.error}>{this.state.errorInfo}</div>
                    <Button onClick={this.handelReset}>重置密码</Button>
                </div>
        }
        return (
            <div className={`${styles.register} ${styles.form}`}>
                {view}
            </div>
        )
    }
}