import React, { Component } from 'react';
import './veri-code-input.scss'

import classnames from 'classnames'

import Input from '../Input'

class VeriCodeInput extends Component {
    count = 10
    state = {
        counting: false,
        count: this.count
    }
    timer = null

    countDown = () => {
        let {count} = this.state
        if (!this.state.counting) {
            this.sendCode()
            this.setState({count: count--, counting: true})
            this.timer = setInterval(() => {
                if (count <= 0) {
                    this.setState({counting: false, count: this.count})
                    clearInterval(this.timer)
                    return
                }
                this.setState({count: count--})
            }, 1000)
        }
    }

    sendCode = () => {

    }

    render() {
        let {type = 'number', className, ...rest} = this.props
        return (
            <Input
                type={type}
                wrapperClass={className}
                {...rest}
            >
                <button type='button' className={classnames('verify', {active: !this.state.counting})}
                        onClick={this.countDown}>
                    {
                        this.state.counting ?
                            (`重新发送${this.state.count}s`)
                            : '发送验证码'
                    }
                </button>
            </Input>
        );
    }
}

export default VeriCodeInput;