# CountDown

const COUNT = 60

/**
 * CountDown
 * @prop {Function} onClick 触发倒计时事件
 * @prop {string} text 未倒计时时文本显示
 * @prop {number} count 倒计时秒数
 * @example
 */
class CountDown extends React.Component<any, any> {

  static defaultProps = {
    onClick: () => {},
    text: '发送验证码',
    count: COUNT,
  }

  timeFlag = 0
  state = {
    btnStatus: 0, // 0为未点击，1为点击
    count: COUNT,
  }

  constructor(props) {
    super(props)
    this.state.count = props.count
  }

  componentWillUnmount() {
    clearInterval(this.timeFlag)
  }

  onCheckCodeClick = () => {
    const { onClick } = this.props
    let { count } = this.state
    const { btnStatus } = this.state

    if (btnStatus === 1) return
    onClick()

    this.timeFlag = setInterval(() => {
      if (count === 0) {
        this.reset()
        clearInterval(this.timeFlag)
        return
      }
      this.setState({
        count: --count,
        btnStatus: 1,
      })
    }, 1000);
  }

  reset() {
    clearInterval(this.timeFlag)
    this.setState({
      btnStatus: 0,
      count: COUNT,
    })
  }

  render() {
    const { text } = this.props
    const { btnStatus, count } = this.state
    return (
      <div className='count-down' onClick={this.onCheckCodeClick}>
        { btnStatus === 0 ? text : `${count}秒`}
      </div>
    )
  }
}

export default CountDown