/*
 * Author: 黎永顺
 * name: 验证码弹框
 * Description:
 * Date: 2023/6/16
 */
import React, { Component } from "react";
import { WeaDialog, WeaError, WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
import { sendMobileCode } from "../../apis/payroll";
import { Button } from "antd";
import "./index.less";

const { getLabel } = WeaLocaleProvider;

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      captcha: "",
      time: 60
    };
    this.timeRef = null;
  }

  componentWillUnmount() {
    clearInterval(this.timeRef);
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && !nextProps.visible) {
      this.setState({ captcha: "" });
    } else {
      clearInterval(this.timeRef);
      this.setState({ time: 60 });
    }
  }

  handleSendCaptcha = () => {
    sendMobileCode({ id: this.props.id }).then(({}) => {
      this.timeRef = setInterval(() => {
        const { time } = this.state;
        this.setState({ time: time - 1 }, () => {
          if (this.state.time === -1) {
            clearInterval(this.timeRef);
            this.setState({ time: 60 });
          }
        });
      }, 1000);
    });
  };

  render() {
    const { captcha, time } = this.state;
    return (
      <WeaDialog
        initLoadCss {...this.props} style={{ width: 550 }}
        className="captchaWrapper" title={getLabel(111, "验证码验证")}
        buttons={[
          <Button type="primary">{getLabel(826, "确定")}</Button>
        ]}
      >
        <WeaSearchGroup needTigger={false} title="" showGroup>
          <WeaFormItem
            label={getLabel(111, "验证码")}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
          >
            <WeaError tipPosition="bottom" ref="weaError" error={getLabel(826, "验证码未填写")}>
              <div className="captchaInputBox">
                <WeaInput value={captcha} onChange={captcha => this.setState({ captcha })}/>
                <Button type="primary" onClick={this.handleSendCaptcha} disabled={time !== 60}>
                  {
                    time === 60 ? getLabel(111, "发送验证码") : `${time}S`
                  }
                </Button>
              </div>
            </WeaError>
          </WeaFormItem>
        </WeaSearchGroup>
      </WeaDialog>
    );
  }
}

export default Index;