import React from "react";
import { Form, Input, message, Tabs,PageHeader, } from "antd";
import { inject, observer } from "mobx-react/index";
import { calculateWidth } from "../../utils/utils";
import PromptBox from "../../components/PromptBox";
import PhoneRetrieval from "./PhoneRetrieval";
import EmailRetrieval from "./EmailRetrieval";
const { TabPane } = Tabs;

@inject("appStore")
@observer
@Form.create()
class RegisterForm extends React.Component {
  state = {
    focusItem: -1,
    activeKey:''
  };
  registerSubmit = (e) => {
    e.preventDefault();
    this.setState({
      focusItem: -1,
    });
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const users = this.props.appStore.users;
        // 检测用户名是否存在
        const result = users.find(
          (item) => item.username === values.registerUsername
        );
        if (result) {
          this.props.form.setFields({
            registerUsername: {
              value: values.registerUsername,
              errors: [new Error("用户名已存在")],
            },
          });
          return;
        }

        const obj = [
          ...this.props.appStore.users,
          {
            username: values.registerUsername,
            password: values.registerPassword,
          },
        ];
        localStorage.setItem("users", JSON.stringify(obj));
        this.props.appStore.initUsers();
        message.success("注册成功");
      }
    });
  };
  componentDidMount(){
   
  }
  gobackLogin = () => {
    this.props.switchShowBox("login");
    setTimeout(() => this.props.form.resetFields(), 500);
    this.setState({
      activeKey:''
    })
    console.log(this.state.activeKey);
  };
  onTabClick=(e)=>{
    console.log(e);
    this.setState({
      activeKey:e
    })

  }

  render() {
    const { getFieldDecorator, getFieldError, getFieldValue } = this.props.form;
    const { focusItem } = this.state;

    return (
      <div className={this.props.className}>
        <PageHeader
          style={{
            border: "0px solid rgb(235, 237, 240)",
          }}
          onBack={this.gobackLogin}
          title="返回登录"
        />
         
         <Tabs onTabClick={this.onTabClick} defaultActiveKey=''>
          <TabPane tab="手机号找回" key="3">
            <PhoneRetrieval  gobackLogin={this.gobackLogin}/>
          </TabPane>
          <TabPane tab="邮箱找回" key="4">
            <EmailRetrieval gobackLogin={this.gobackLogin} />
          </TabPane>
        </Tabs>
   
      </div>
    );
  }
}

const styles = {
  focus: {
    width: "20px",
    opacity: 1,
  },
};

export default RegisterForm;
