import React, {Component} from "react";
import {
    Form,
    Select,
    Input,
    Button,
    Checkbox,
    Upload,
    Icon,
    message,
    Modal,
    Table,
    Divider,
    InputNumber,
    Tag,
    DatePicker,
    Radio,
    Tooltip,
    notification
} from "antd";
import {Link, Switch, Route, Redirect} from 'react-router-dom';
import '../courses/css/members.css';
import "../courses/common/formCommon.css"
import '../courses/css/Courses.css';
import beijintulogontwo from '../../../src/images/login/beijintulogontwo.png';
import educodernet from '../../../src/images/login/educodernet.png';
import LoginRegisterComponent from '../user/LoginRegisterComponent';
import InterestpageComponent from '../user/Interestpage'
import FindPasswordComponent from '../user/FindPasswordComponent';
import passopen from "../../images/login/passopen.png";
//educoder登入页面
var sectionStyle = {
    "height": "100%",
    "width": "100%",
    "min-width": "1000px",
// makesure here is String确保这里是一个字符串，以下是es6写法


};
var imgback = {
   " background-size":"cover",
"background-repeat":"no-repeat",
    backgroundImage: `url(${beijintulogontwo})`,
}
var imgmian ={
    "width": "100%",
     "background": `url(${beijintulogontwo})`,
     "height": "100%",
     "position": "relative",
}

var newContainer={
   "min-height": "100%",
    "background": `url(${beijintulogontwo})`,
    "height": "auto !important",
     "position": "relative",
}
class EducoderLogin extends Component {
    constructor(props) {
        super(props);
        if(  props.match.url === "/changepassword" ){
            this.state = {
                showbool: 3,
                logini:3,
                namezh:"",
                passmm:""
            }
        }else {
            if(props.match.url === "/login"){
                this.state = {
                    showbool: 1,
                    loginstatus:true,
                    logini:1,
                    namezh:"",
                    passmm:""

                }
            }else if(props.match.url === "/register"){
                this.state = {
                    showbool: 1,
                    loginstatus:false,
                    logini:2,
                    namezh:"",
                    passmm:""
                }
            }else{
                this.state = {
                    showbool: 1,
                    logini:1,
                    namezh:"",
                    passmm:""

                }
            }

        }

    }

    componentDidMount() {

    }

    Setlogins=(i)=>{
        console.log("96ye");
        console.log(i)
        this.setState({
            logini:i
        })

    }
    Setshowbool = (e,name,pass) => {
        if (e===1) {
            this.setState({
                showbool: 1
            })
        } else if(e===2) {
            this.setState({
                showbool: 2,
                namezh:name,
                passmm:pass,
            })
        }else if(e===3){
            this.setState({
                showbool: 3
            })
        }
    }


    render() {
        let {showbool,loginstatus,logini} = this.state;
        return (
            <div style={newContainer} >
                <style>
                    {
                        `
                        html, body, {
  height: 100%;
}
                        `
                    }
                </style>
                <div style={imgmian}>
                    <div style={{
                        "display": "flex",
                        "justify-content": "center",
                        "align-items": "center",
                        "width": "100%"
                    }}>
                        <div style={{"margin-top": "20px"}}>
                            <img src={educodernet}/>
                        </div>


                    </div>
                    {
                        showbool === 1 ?
                            <div style={{
                                "display": "flex",
                                "justify-content": "center",
                                "align-items": "center",
                                "width": "100%",
                            }}>
                                <div style={{"margin-top": "40px","height":"580px"}}>

                                    <LoginRegisterComponent {...this.props} {...this.state}
                                                            Setshowbool={(e,name,pass)=>this.Setshowbool(e,name,pass)} ></LoginRegisterComponent>

                                </div>

                            </div>
                        :showbool === 2 ?
                          <div style={{
                              "display": "flex",
                              "justify-content": "center",
                              "align-items": "center",
                              "width": "100%",
                          }}>
                              <InterestpageComponent {...this.props} {...this.state}>
                              </InterestpageComponent>
                          </div>
                        :
                          <div style={{
                              "display": "flex",
                              "justify-content": "center",
                              "align-items": "center",
                              "width": "100%",
                          }}>
                              <div style={{"margin-top": "40px","height":"580px"}}>
                                  <FindPasswordComponent {...this.props} {...this.state}
                                                         Setshowbool={(e)=>this.Setshowbool(e)}></FindPasswordComponent>

                              </div>
                          </div>
                    }
                    <div style={{"height":"125px",
                        "display": "flex",
                        "justify-content": "center",
                        "align-items": "center",
                        "width": "100%",
                    }}>
                        <div className="font-14 color-grey-9 " style={{marginTop:"15px"}}><span className="font-18">©</span>&nbsp;2019&nbsp;EduCoder<span className="ml15 mr15">湘ICP备17009477号</span><a href="https://team.trustie.net" style={{"color":"#888"}} target="_blank">Trustie</a>&nbsp;&nbsp;&nbsp;&amp;&nbsp;&nbsp;&nbsp;IntelliDE inside.</div>
                    </div>
                    <div style={{"height":"100px"}}></div>
                </div>
            </div>
        )
    }

}

export default EducoderLogin;