import React, {Component} from 'react';

import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";

import {getImageUrl, DragValidator, broadcastChannelPostMessage} from 'educoder';
import {Tabs, Input, Checkbox, Button, notification,Menu} from 'antd';
import passopen from '../../../src/images/login/passopen.png';
import passoff from '../../../src/images/login/passoff.png';
import axios from 'axios';
import './common.css'
const { TabPane } = Tabs;
const loginInputsyl = {
"width":"434px",
"height": "462px",
"-webkit-box-shadow": "3px 10px 21px 0px rgba(76,76,76,0.15)",
"box-shadow": "3px 10px 21px 0px rgba(76,76,76,0.15)",
"border-radius": "6px",
"background": "#fff"
}

//父组件EducoderLogin.js
class LoginRegisterComponent extends Component {
    constructor(props) {
        super(props)


        //
        // console.log("LoginRegisterComponent");
        // console.log(props);
        // console.log(props.loginstatus);
        if(props.loginstatus === true){
            this.state = {
                tab:["0"],
                activeKey: 0,
                classpass: "text",
                // 登录
                passopens: passopen,
                seconds: 60,
                discodeBtn: false,
                clearInterval: false,
                autoLogin: true,
                classpassbool: true,
                // 注册
                readAgreement: false,
                getverificationcodes: true,
                dragOk: false,
                Agreetotheterms: false,
                login: "",
                password: "",
                logins: "",
                passwords: "",
                codes: "",
                Phonenumberisnotco: undefined,
                Phonenumberisnotcos: undefined,
                Phonenumberisnotcobool: false,

            }
        }
        else if(props.loginstatus === false){
            this.state = {
                tab:["1"],
                activeKey: '1',
                classpass: "text",
                // 登录
                passopens: passopen,
                seconds: 60,
                discodeBtn: false,
                clearInterval: false,
                autoLogin: true,
                classpassbool: true,
                // 注册
                readAgreement: false,
                getverificationcodes: true,
                dragOk: false,
                Agreetotheterms: false,
                login: "",
                password: "",
                logins: "",
                passwords: "",
                codes: "",
                Phonenumberisnotco: undefined,
                Phonenumberisnotcos: undefined,
                Phonenumberisnotcobool: false,

            }
        }
    }

// 点击表单后，改变type
    changeType = () => {
        this.setState({classpass: 'password'});
    }
    componentDidMount = () => {
        // console.log("componentDidUpdate");
        // console.log(this.props);
        if (this.props.match.url === "/login") {
            console.log("11111111111111111111111111");
            this.state = {
                tab:["0"],
            }
            this.onTabChange('0');
        } else if (this.props.match.url === "/register") {
            this.state = {
                tab:["1"],
            }
            this.onTabChange('1');
        }

    }
    openNotification = (messge,type) => {
        // type  1 成功提示绿色 2提醒颜色黄色 3错误提示红色
        notification.open({
            message: "提示",
            description: messge,
            onClick: () => {
                console.log('Notification Clicked!');
            },
        });
    }


    ;
    StudyMakeMoney = () => { // 调用父组件方法
        this.props.Setshowbool(3);
        // this.props.Setlogins(3);
        this.setState({
            login: "",
            password: "",
            logins: "",
            passwords: "",
            codes: "",
        })
    }
    onTabChange = (activeKey) => {
        console.log("onTabChange");
        // console.log(activeKey);
        // this.setState({activeKey})
    }
    // -------------------- LOGIN START
    //下次自动登入
    onAutoLoginChange = (e) => {
        this.setState({autoLogin: e.target.checked})
    }

    // -------------------- LOGIN END

    isCorrectname = (value, id) => {
        if (id === 1) {
            console.log(value.length);
            if (value.length === 0) {
                this.setState({
                    Phonenumberisnotco: undefined,
                    Phonenumberisnotcobool: false,
                })
                return;
            }
        } else if (id === 2) {
            if (value.length === 0) {
                this.setState({
                    Phonenumberisnotcos: undefined,
                    Phonenumberisnotcobool: false,
                })
                return;
            }
        }
        // var telephone = $("#telephoneAdd.tianjia_phone").val();
        var regph = /^[1][3,4,5,6,7,8][0-9]{9}$/;
        // var email = $("#add_email.tianjia_email").val();
        var regemail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

        // [1]手机号开头必须是1    [3,4,5,6,7,8] 第二位是3-8中的一个 [0-9]{9} 后边9位可以是0-9的任意数字。
        var stringdata = undefined;
        if (!regph.test(value)) {
            stringdata = "手机号格式不正确";
            if (id === 1) {
                this.setState({
                    Phonenumberisnotco: stringdata,
                    Phonenumberisnotcobool: false,
                })
            } else if (id === 2) {
                this.setState({
                    Phonenumberisnotcos: stringdata,
                    Phonenumberisnotcobool: false,
                })
            }

        } else {
            if (id === 1) {
                this.setState({
                    Phonenumberisnotco: undefined,
                    Phonenumberisnotcobool: true,
                })
            } else if (id === 2) {
                this.setState({
                    Phonenumberisnotcos: undefined,
                    Phonenumberisnotcobool: true,
                })
                this.Emailphonenumberverification(value, id)
            }
            return
        }

        if (!regemail.test(value)) {
            if ((value.indexOf("@") != -1) === true) {
                stringdata = "邮箱格式不正确";
            } else {
                stringdata = "手机号格式不正确";
                // if (!regph.test(value)) {
                //     // 这里先判断是不是手机号然后在判断是不是邮箱然后又判断是不是手机号，如果不是手机号就是账号
                //     stringdata=undefined;
                // }
                }
            if (id === 1) {
                this.setState({
                    Phonenumberisnotco: stringdata,
                    Phonenumberisnotcobool: false,
                })
            } else if (id === 2) {
                this.setState({
                    Phonenumberisnotcos: stringdata,
                    Phonenumberisnotcobool: false,
                })
                this.Emailphonenumberverification(value, id)
            }
            return
        } else {
            if (id === 1) {
                this.setState({
                    Phonenumberisnotco: undefined,
                    Phonenumberisnotcobool: true,
                })
            } else if (id === 2) {
                this.setState({
                    Phonenumberisnotcos: undefined,
                    Phonenumberisnotcobool: true,
                })
                this.Emailphonenumberverification(value, id)
            }
            return
        }
    }
    // -------------------- REGISTER START
    onReadAgreementChange = (e) => {
        this.setState({readAgreement: e.target.checked})
    }
    //是否验证通过
    dragOkCallback = () => {
        this.setState({dragOk: true})
    }
    // -------------------- REGISTER END

    //是否同意
    onChange = (e) => {
        this.setState({
            Agreetotheterms: e.target.checked,
        })
    }

    //登入接口
    postLogin = () => {
        if (this.state.login === undefined || this.state.login == "") {
            this.openNotification(`请输入登录手机号码或邮箱`,2);
            return
        } else if (this.state.password === undefined || this.state.password == "") {
            this.openNotification(`请输入密码`,2);
            return
        }
        var url = "/accounts/login.json";
        axios.post(url, {
            login: this.state.login,
            password: this.state.password,
        }).then((response) => {
            if (response === undefined) {
                return
            }
            if (response.status === 200) {
                if (response.data.status === 402) {
                    window.location.href = response.data.url;
                } else {
                    broadcastChannelPostMessage('refreshPage')
                    this.setState({
                        isRender: false
                    })
                    window.location.href = "/"

                }
            }


        }).catch((error) => {

        })

    }
    //注册接口
    postregistered = () => {
        if (this.state.logins === undefined || this.state.logins == "") {
            this.openNotification(`请输入登录手机号码或邮箱`,2);

            return
        } else if (this.state.dragOk === false) {
            this.openNotification(`请拖动滑块验证`,2);
            return
        } else if (this.state.codes === undefined || this.state.codes == "") {
            this.openNotification(`请输入验证码`,2);
            return
        } else if (this.state.passwords === undefined || this.state.passwords == "") {
            this.openNotification(`请输入密码`,2);
            return
        } else if (this.state.Agreetotheterms === false) {
            this.openNotification(`请同意服务协议条款`,2);
            return;
        }
        var url = "/accounts/register.json";
        axios.post(url, {
            login: this.state.logins,
            password: this.state.passwords,
            code: this.state.codes,
        }).then((result) => {
            console.log(result);
            try {
                // this.onTabChange("1");
                this.setState({
                    logins: "",
                    dragOk: false,
                    codes: "",
                    passwords: "",
                    Agreetotheterms: "",
                })
             this.props.history.push("/interesse");
             // this.props.Setshowbool(2,this.state.logins,this.state.passwords);
            } catch (e) {

            }
        }).catch((error) => {

        })
    }

    //邮箱手机号验证
    Emailphonenumberverification = (value, id) => {
        var url = `/accounts/valid_email_and_phone.json`;
        axios.get((url), {
            params: {
                login: value,
                type: 1,
            }
        }).then((result) => {
            //验证有问题{"status":1,"message":"success"}
            // console.log(result);


        }).catch((error) => {
            // console.log(error);
            // this.setState({
            //     login:"",
            //     logins:"",
            // })
        })
    }
    //短信验证
    SMSverification = () => {
        var url = `/accounts/get_verification_code.json`;
        axios.get((url), {
            params: {
                login: this.state.logins,
                type: 1,
            }
        }).then((result) => {
            //验证有问题{"status":1,"message":"success"}
            // console.log(result);
            this.openNotification("验证码已发送，请注意查收!",2);


        }).catch((error) => {
            console.log(error);

        })
    }
    //显示和不显示密码
    Showandhide = (e) => {
        console.log("显示于隐藏");
        if (this.state.classpassbool === true) {
            this.setState({
                passopens: passoff,
                classpass: "text",
                classpassbool: false,
            })
        } else {
            this.setState({
                passopens: passopen,
                classpass: "password",
                classpassbool: true,
            })
        }

    }

    //倒计时
    getverificationcode = () => {
        if (this.state.Phonenumberisnotcobool === false ||this.state.Phonenumberisnotcobool === undefined) {
            if (this.state.logins&&this.state.logins.length === 0) {
                this.openNotification("请输入手机号或邮箱",2);
                return
            }else {
                this.openNotification("请输入正确的手机号或邮箱",2);
            }
            return;
        }

        if (this.state.getverificationcodes === true) {
            this.setState({
                getverificationcodes: undefined,
            })
            let timer = setInterval(() => {
                this.setState((preState) => ({
                    seconds: preState.seconds - 1,
                }), () => {
                    if (this.state.seconds == 0) {
                        clearInterval(timer);
                        this.setState({
                            getverificationcodes: false,
                            seconds: 60,
                        })
                    }
                });
            }, 1000)
            this.SMSverification();
        } else {
            this.setState({
                getverificationcodes: undefined,
            })
            let timer = setInterval(() => {
                this.setState((preState) => ({
                    seconds: preState.seconds - 1,
                }), () => {
                    if (this.state.seconds == 0) {
                        clearInterval(timer);
                        this.setState({
                            getverificationcodes: false,
                            seconds: 60,

                        })
                    }
                });
            }, 1000)
            this.SMSverification();
        }
    }
    //滑动验证手机号

    //获取登入
    loginInputonChange = (e) => {
        // console.log(e.target.value);
        var stirngt;
        if(e.target.value.length>0){
            var str=  e.target.value.replace(/\s*/g,"")
            stirngt=str;
        }else{
            stirngt=  e.target.value;
        }
        this.setState({
            login: stirngt,
        })

    }
    //失去焦点判断
    inputOnBlur = (e, id) => {
        this.isCorrectname(e.target.value, id);
        // this.Emailphonenumberverification(e.target.value, id);
    }
    //获取登入密码
    passwordonChange = (e) => {
        // console.log(e.target.value);
        var stirngt;
        if(e.target.value.length>0){
            var str=  e.target.value.replace(/\s*/g,"")
            stirngt=str;
        }else{
            stirngt=  e.target.value;
        }
        this.setState({
            password: stirngt,
        })
        // this.setState({
        //     password: e.target.value
        // })
    }
    //获取注册登入
    loginInputonChanges = (e) => {
        // console.log(e.target.value);

        var stirngt;
          if(e.target.value.length>0){
           var str=  e.target.value.replace(/\s*/g,"")
              stirngt=str;
          }else{
              stirngt=  e.target.value;
          }
        this.setState({
            logins: stirngt,
        })

    }
    //获取注册密码
    passwordonChanges = (e) => {
        // console.log(e.target.value);
        var stirngt;
        if(e.target.value.length>0){
            var str=  e.target.value.replace(/\s*/g,"")
            stirngt=str;
        }else{
            stirngt=  e.target.value;
        }
        this.setState({
            passwords: stirngt,
        })
    }
    //获取code
    codesonChange = (e) => {
        this.setState({
            codes: e.target.value
        })
    }
    //切换tab
    changeTab=(e)=>{
        this.setState({
            tab:e.key
        })
       console.log(e.key);
        if(e.key === 0){
            this.setState({
                Phonenumberisnotcos:undefined
            })
        }else{
            this.setState({
                Phonenumberisnotco:undefined
            })

        }

        // this.props.history.push(`/courses/${this.props.match.params.coursesId}/exercises/${this.props.match.params.Id}/student_exercise_list?tab=`+e.key)

    }
    loginonkeyup =(e)=>{
        if(e.keyCode==32){

            return false;
        }
    }
    render() {
        const {
            activeKey,
            // 登录
            autoLogin,
            classpass,
            passopens,
            seconds,
            getverificationcodes,
            Agreetotheterms,
            Phonenumberisnotco,
            Phonenumberisnotcos,
            codes,
            tab,
            // 注册
            readAgreement, dragOk,
        } = this.state
        // height: 346px;
        if (this.state.seconds === 0) {
            // window.location.href='http://www.cnblogs.com/a-cat/';
        }

        // console.log(activeKey);
        return (

            <div className="login_register_content" style={  parseInt(tab[0])==0?{height: "346px"} :{height: "490px"}}>


                <div>
                    <Menu mode="horizontal" selectedKeys={tab} onClick={this.changeTab}>
                        <Menu.Item key="0" className={tab===0?"active font-18":"font-18"}   > 登录</Menu.Item>
                        <Menu.Item key="1" className={tab===1?"active font-18":"font-18"}  >注册</Menu.Item>
                    </Menu>

                    {
                        parseInt(tab[0])==0 &&
                        <div style={{width: '340px'}}>
                            <style>
                                {
                                    `
														.ant-input {
																		font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
																		-webkit-box-sizing: border-box;
																		box-sizing: border-box;
																		margin: 0;
																		padding: 0;
																		list-style: none;
																		position: relative;
																		display: inline-block;
																		padding: 4px 11px;
																		width: 100%;
																		height: 38px;
																		font-size: 14px;
																		line-height: 1.5;
																		color: rgba(0, 0, 0, 0.65);
																		background-color: #fff;
																		background-image: none;
																		border: 1px solid #d9d9d9;
																		border-radius: 4px;
																		-webkit-transition: all .3s;
																		-o-transition: all .3s;
																		transition: all .3s;
																}
														  .loginInputzhuche{
																	width: 100%;
																	background-color: #fff!important;
																	height: 45px !important;
																	padding: 5px;

																}

                                `
                                }
                            </style>

                            <Input placeholder="请输入登录手机号码或邮箱" value={this.state.login}
                                   onChange={this.loginInputonChange}
                                   name="username"
                                   className="font-14 color-grey-9 loginInputzhuche"
                                   onBlur={(e) => this.inputOnBlur(e, 1)}
                                   style={{marginTop: '30px', height: '38px'}}></Input>

                            {
                                Phonenumberisnotco && Phonenumberisnotco != "" ?
                                    <p className="color-red  mt5 mb5" style={{width: " 100%", height: "20px"}}>
                                        <span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotco}</span>
                                    </p>
                                    : <div style={{height:"25px"}}></div>
                            }

                            <Input type="password" name="password" id="password"   value={this.state.password}
                                   onChange={this.passwordonChange}
                                   className="font-14 color-grey-9 loginInputzhuche"

                                   placeholder="密码"></Input>

                            <div className="left_right mt25 font-12 " style={{color: '#676767'}}>
                                <Checkbox onChange={this.onAutoLoginChange} checked={autoLogin}>下次自动登录</Checkbox>

                                <a onClick={()=>this.StudyMakeMoney()}
                                    className="mr3 color-grey-9 mt3 font-12">找回密码</a>
                            </div>

                            <Button className="login_btn font-16" type="primary" style={{height:"46px"}} onClick={() => this.postLogin()}
                                    size={"large"}>登录</Button>
                        </div>
                    }
									<style>
										{
											`
											.loginInputzhuche{
													width: 100%;
													background-color: #fff!important;
													height: 45px !important;
													padding: 5px;

												}
										 .loginInputzhuche .ant-input{
													width: 100%;
													background-color: #fff!important;
													height: 45px !important;
													padding: 5px;
													position: relative;
													right: 5px;
													width: 103%;
												}
												`
										}
									</style>

                    {
                        parseInt(tab[0])==1 &&
                        <div style={{width: '340px'}}>
                            <Input className="loginInputsyl color-grey-9 loginInputzhuche" placeholder="请使用手机号/邮箱账号进行注册"
                                   value={this.state.logins}
                                   type="text" autoComplete="off"
                                   onChange={this.loginInputonChanges}
                                   onBlur={(e) => this.inputOnBlur(e, 2)}
                                   style={{marginTop: '30px' , height: '38px',color:'#999999',fontSize:"14px"}}></Input>
                            {
                                Phonenumberisnotcos && Phonenumberisnotcos != "" ?
                                    <p className="color-red  mt5 mb5  " style={{width: " 100%", height: "20px"}}>
                                        <span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotcos}</span>
                                    </p>
                                    : <div style={{height:"25px"}}></div>

                            }

                            <DragValidator
                                height={38} className="loginInput" successGreenColor="#29bd8b"
                                style={{ height: '38px'}}
                                dragOkCallback={this.dragOkCallback}
                            ></DragValidator>

                            <div className="mt25">
                                <Input className="fl mr5 font-14 color-grey-9 loginInputzhuche" name="codes" type="text" autoComplete="off" readonly
                                       onfocus="this.removeAttribute('readonly')" style={{
                                    width:'210px',
                                    height:'38px',
                                }} placeholder="请输入验证码"
                                       onChange={this.codesonChange}
                                       value={codes}
                                >
                                </Input>
                                {
                                    getverificationcodes === undefined ?
                                        <Button className="fl ml5 font-14" disabled style={{"width": "120px","text-align":"center", "height": "45px",}}
                                                size={"large"}>重新发送{seconds}s</Button>
                                        : getverificationcodes === true ?
                                        <Button className="fl ml5 font-14" type="primary" style={{"width": "120px","text-align":"center", "height": "45px",}}
                                                onClick={() => this.getverificationcode()} size={"large"}>获取验证码</Button>
                                        :
                                        <Button className="fl ml5 font-14 " type="primary" style={{"width": "120px","text-align":"center", "height": "45px",}}
                                                onClick={() => this.getverificationcode()} size={"large"}>重新发送</Button>
                                }


                            </div>
                            {/*<Input type="text" name="username"*/}
                            {/*       style={{height: '0', width: '0', border: 'none', display: "none"}}/>*/}
                            {/*<Input type="password" name="password" id="password" autoComplete="new-password"*/}
                            {/*       style={{height: '0', width: '0', border: 'none', display: "none"}}/>*/}
                            <Input className="loginInput  font-14 mt25  color-grey-9 loginInputzhuche" placeholder="输入8~16位密码，区分大小写"
                                   type={classpass}

                                   autoComplete="new-password"
                                   onClick={this.changeType}
                                   value={this.state.passwords} onChange={this.passwordonChanges} suffix={
                                <img className={"mt5"} src={passopens} onClick={(key) => this.Showandhide(key)}>
                                </img>
                            }></Input>
                            <Checkbox onChange={this.onChange}
                                      value={Agreetotheterms}
                            ><span className="font-14 "  style={{
                                color: '#676767',
                            }}>我已阅读并同意服务协议条款</span></Checkbox>
                            <Button className="login_btn font-16" type="primary" style={{height:"46px"}} onClick={() => this.postregistered()}
                                    size={"large"}>注册</Button>


                        </div>
                    }
                </div>
            </div>
        );
    }
}

export default (LoginRegisterComponent);