import React, { Component } from 'react'
import './forgot-password.scss'

import ClearableInput from '@common/ClearableInput'
import VeriCodeButton from '../common/veriCodeInput'
import Button from '../common/Button'


class ForgotPassword extends Component {

    constructor(props) {
        super(props);
        this.state = {
            verificationCode: '',
            password: ''
        }
    }

    setTel = (val) => {
        this.setState({tel: val})
    }

    setVerificationCode = (val) => {
        this.setState({verificationCode: val});
    }


    render() {
        return (
            <div className={'forgot-password'}>
                <ClearableInput
                    type={'tel'}
                    placeholder={'请输入注册时的邮箱账号或手机号'}
                    onChange={this.setTel}
                    wrapperClass={'tel-input'}
                    icon={<i className={'iconfont iconshouji'}
                             style={{fontSize: '22px', left: '11px'}}
                    />}
                />
                <VeriCodeButton
                    className={'verify-code'}
                    onChange={this.setVerificationCode}
                    icon={<i className={'iconfont iconduanxin'}
                             style={{fontSize: '20px', left: '12px'}}
                    />}
                />
                <div className="place"/>
                <Button className={'next'}>下一步</Button>
            </div>
        );
    }

}

export default ForgotPassword