import React from "react";
import {Input} from "../ui/InputGroup";
import {Button, Form} from 'react-bootstrap'
import {RegisterProps, RegisterState} from "../entity";
import {JSONResponse, Method, request} from "../interface";
import {API} from "../api";
import {RegisterRes, RegisterTransform} from "../result";
import {MyDialog} from "../ui/MyDialog";
import {register} from '../public'

/**
 * 注册
 */
export class Register extends React.Component<RegisterProps, RegisterState>{

    constructor(props: Readonly<RegisterProps>) {
        super(props)
        this.state={
            confirmPwd: "",
            managerId:"",
            password:"",
            tipContent:null
        }
    }

    //注册
    register(){
        let that=this
       request(API.account.register,Method.POST, {
           managerId:this.state.managerId,
           password:this.state.password
       },new RegisterTransform(),function (res:JSONResponse<RegisterRes>) {
           switch (res.customResult) {
               case RegisterRes.ok:
                   that.setState({
                       tipContent:<div><h3 className="text-center text-info">注册成功</h3>
                           <Button className={"col-3 ml-auto mr-auto"} block={true} onClick={()=>that.props.toLogin()}>返回登录</Button></div>
                   })
                   break
               case RegisterRes.fail:
                   that.setState({
                       tipContent:<h3 className="text-center text-danger">注册失败,请联系管理员</h3>
                   })
                   break
               case RegisterRes.user_repeat:
                   that.setState({
                       tipContent:<h3 className="text-center text-danger">注册失败，账号：{that.state.managerId}已存在</h3>
                   })
                   break
           }
       })
    }

    //检查密码
    checkPwd(){
        return this.state.confirmPwd.length>0&&this.state.password===this.state.confirmPwd
    }

    //检查表单
    check(){
        return this.isNotEmpty(this.state.managerId,this.state.password)
            &&this.checkPwd()
    }

    //检查是否为空
    isNotEmpty(...value:(string | number)[]){
        for(let index in value){
            if(value[index].toString().length===0){
                return false
            }
        }
        return true
    }

    render() {
        return (
            <div className="d-flex align-items-center" style={{height:window.screen.availHeight+'px'}}>
                <div className="container">

                    <Form>

                        <Input  col={4} name="managerId" type="text" desc="管理员账号" value={this.state.managerId} onChange={(value: string)=>{
                            this.setState({...this.state,...{managerId:value}})}} valid={{check:this.isNotEmpty(this.state.managerId)}}/>

                        <Input col={4} name="password" type="password" desc="管理员密码" value={this.state.password}
                               onChange={(value: string)=>{this.setState({password:value})}} valid={{check:this.isNotEmpty(this.state.password)}}/>

                        <Input col={4} name="confirmPwd" type="password" desc="确认密码" placeholder="请确认密码" value={this.state.confirmPwd}
                               onChange={(value: string)=>{this.setState({confirmPwd:value})}}
                               valid={{check:this.checkPwd(),
                                   invalid:this.state.confirmPwd.length>0&&this.state.password!==this.state.confirmPwd?"密码和确认密码不一致":"验证失败"}}/>

                        <Button variant="success" className="mt-3 col-2 mr-3" disabled={!this.check()}  onClick={()=>register(this,this.state.managerId,this.state.password)}>注册</Button>

                        <Button variant="info" className="mt-3 col-2"  onClick={()=>this.props.toLogin()}>返回登陆</Button>

                    </Form>
                </div>

                <MyDialog content={this.state.tipContent} open={this.state.tipContent!=null} titleId={"register-dialog"}
                          menuName={"提示"} onClose={()=>this.setState({
                    tipContent:null
                })}/>
            </div>
        );
    }
}