import React, { Component } from 'react';
import './binding-tel.scss'

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

class BindingTel extends Component {

    constructor(props) {
        super(props);
        this.state = {
            veriCode: ''
        };
    }

    handleChange = (val) => {
        this.setState({veriCode: val});
    }

    render() {
        return (
            <div className={'binding-tel'}>
                <p className={'title'}>为提高您的账号安全，请绑定手机号</p>
                <ClearableInput
                    type={'number'}
                    placeholder={'请输入需要绑定的手机号'}
                    wrapperClass={'tel'}
                    icon={<i className={'iconfont iconshouji'}
                             style={{fontSize: '22px', left: '11px'}}
                    />}
                />
                <VeriCodeInput
                    type={'number'}
                    className={'verification'}
                    onChange={this.handleChange}
                    icon={<i className={'iconfont iconduanxin'}
                             style={{fontSize: '20px', left: '12px'}}
                    />}
                />
                <div className="place"/>
                <Button className={'complete-btn'}>完成</Button>
            </div>
        );
    }
}

export default BindingTel;