text: import React, { useState, useEffect } from 'react';
  
  // redux
  import { useStore } from 'react-redux';
  import { addCaptcha } from '@app/redux/actions/captcha';
  
  // styles
  import './styles/index.scss';
  
  type Func = (data: object, fc: any) => void
  
  interface Props {
    onClick: (func: Func) => void
  }
  
  export default function({ onClick }: Props) {
  
    const [ countdown, setCountdown ] = useState(0);
  
    const store = useStore();
    const _addCaptcha = (args: object)=>addCaptcha(args)(store.dispatch, store.getState);
  
    let loading = false;
  
    const handCountdown = function() {
      let count = 61;
  
      // 发送成功后倒计时
      let run = () =>{
        if (count == 0) return null;
        count--;
        setCountdown(count);
        setTimeout(()=>{ run() }, 1000)
      }
  
      run();
    }
  
    const add = (data: object, callback: any = ()=>{}) => {
    
      if (loading || countdown > 0) return null;
      
      loading = true;
  
      _addCaptcha(data)
      .then(async ()=>{
        callback(true);
        loading = false;
        handCountdown();
      })
      .catch(async (err: any)=>{
        callback(false);
  
        $.toast({
          text: err.message,
          position: 'top-center',
          showHideTransition: 'slide',
          icon: 'error',
          loader: false,
          allowToastClose: false
        });
  
        loading = false;
  
      })
    }
  
    const handle = () =>{
      onClick((data, callback)=>{
        add(data, callback)
      });
    }
  
    return (
      <span styleName="captcha-button" className="a text-primary" onClick={handle}>
      {countdown > 0 ? `发送成功 (${countdown})` : "获取验证码"}
      </span>
    )
  }