/*
 * 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) {
      clearInterval(this.timeRef);
      this.setState({ captcha: "", time: 60 });
    }
  }

  handleSendCaptcha = () => {
    sendMobileCode({ id: this.props.id }).then(({ status, data }) => {
      if (status) {
        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);
      }
    });
  };
  handleConfirm = () => {
    if (!this.state.captcha) {
      this.refs.weaError.showError();
      // return
    }
    this.props.onCancel();
    this.props.onConfirm();
  };

  render() {
    const { captcha, time } = this.state;
    return (
      <WeaDialog
        initLoadCss {...this.props} style={{ width: 550 }}
        className="captchaWrapper" title={getLabel(111, "验证码验证")}
        buttons={[
          <Button type="primary" onClick={this.handleConfirm}>{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;
