import React, { Component } from 'react';
import { Formik, Form, Field } from 'formik';
import { withRouter, Link } from 'react-router-dom';
import Captcha from '@/common/Captcha';
import {  getParam } from '@/utils';
import './index.scss';

class BindPhone extends Component {
  constructor(props) {
    super(props),
    this.state = {

      // 弹窗类型：0: 无弹出，1:非微信，2:微信
      type: 0,
      isCopy: false,
      validate: '',
      captchaInstance: null,
      seconds: 60,
      isFirst: true,
      timer: null,
      isTimer: false, // 是否开始倒计时
      shareInfo: {
        url: '',
        share_code: '',
        command: '【七月在线送你一个红包】https://www.julyedu.com/'
      },
      doneInfo: { //领取后的状态，1:领取成功，2:领取超时
        status: 2,
        txt: '手机号绑定超时，红包已失效!',
        desc: ''
      },
      money: '', // 红包金额,
      endTime: 10, // 手机绑定时限
      countdownTimer: null,
      countdown: '00分00秒', // 绑定时间
      accountInfo: {},
      bindInfo: {},
      country: {
        num: '86'
      }
    }
  }

  render() {
    const { country, validate, isTimer } = this.state;
    return (
      <div className="popup-form">
        <Formik
          initialValues={{
            tel: '',
            code: ''
          }}
          validate={({tel, code}) => {
            const errors = {};

            // if (!validateTel(tel)) {
            if(!/^\d+$/.test(tel)) {
              errors.tel = '请填写正确格式的手机号';
            }
            if (!/[0-9]{6}/.test(code)) {
              errors.code = '请输入验证码';
            }

            return errors;
          }}
          onSubmit={(values, { setStatus, setSubmitting }) => {
            this.setState({
              accountInfo: {
                ...values
              }
            });
            this.toContinueBind();
          }}
          render={({values: {tel, code}, errors}) => (
            <Form className="popup-form__content">
              <h4 className="popup-form__title">绑定手机号</h4>
              <div className="popup-form__item">
                <Link
                  className="popup-form__button--num"
                  to={`/country?id=${getParam('id')}&share_code`}>
                  +{country.num}
                  <i className="iconfont iconiconfront-69"/>
                </Link>
                <Field
                  name="tel"
                  render={({field}) => {
                    return (
                      <input
                        {...field}
                        className="popup-form__ipt"
                        data-bdrs="0 6px 6px 0"
                        data-type="tel"
                        type="text"
                        placeholder="请填写手机号"
                      />
                    );
                  }}
                />
              </div>
              <Captcha
                mrBtm={15}
                getInstance={this.getCaptchaInstance}
                onVerify={this.onVerify}
              />
              <div className="popup-form__item">
                <Field
                  name="code"
                  render={({field}) => {
                    return (
                      <input
                        {...field}
                        className="popup-form__ipt popup-form__ipt--left"
                        type="text"
                        placeholder="输入验证码"
                      />
                    );
                  }}
                />
                <button
                  className="popup-form__button--code"
                  data-status={(validate && !isTimer)? 'do': ''}
                  type="button"
                  onClick={() => this.handleToSend({tel, code})}
                >
                  {
                    isTimer? `重新发送${seconds}s` : '发送验证码'
                  }
                </button>
              </div>
              <button
                className="popup-packet__button--bundle"
                data-status={(tel && code && isEmpty(errors))? 'do': 'done'}
                type="submit"
              >
                完成绑定
              </button>
            </Form>
          )}
        />
        <i
          className="popup-password__button--close iconfont iconiconfront-2"
          onClick={() => this.handleToClose(false)}
        />
      </div>
    )
  }
}

export default withRouter(BindPhone);