import React,{Component} from "react"

import { Modal,Button,Input,message} from 'antd';

import axios from "axios"

import "./style.css"

class Login extends Component{

    constructor(props){

        super(props);

        this.showModal=this.showModal.bind(this);

        this.handleHide=this.handleHide.bind(this);

        this.changeUser=this.changeUser.bind(this);

        this.changePassword=this.changePassword.bind(this);

        this.checkLogin=this.checkLogin.bind(this);

        this.logout=this.logout.bind(this);

        this.state={

            login:false,

            modal:false,

            user:"",

            password:"",

        }

    }

    showModal(){

        this.setState({modal:true});

    }

    handleHide(){

        this.setState({modal:false});

    }

    changeUser(e){

        // console.log(e.target);s

        this.setState({user:e.target.value});

    }

    changePassword(e){

        this.setState({password:e.target.value});

    }

    logout(){

        axios.get("http://www.dell-lee.com/react/api/logout.json",{withCredentials:true})

            .then(res=>{

                const logout=res.data.data.logout;

                if(logout){

                    this.setState({login:false})

                }

                // console.log(logout);

            })

    }

    checkLogin(){

        const {user,password}=this.state;

        // console.log(user,password);

        let url=`http://www.dell-lee.com/react/api/login.json?user=${user}&password=${password}`;

        axios.get(url,{withCredentials:true})

            .then(res=>{

                // console.log(res);

                const login=res.data.data.login;

                // console.log(login);

                if(login){

                    message.success("登录成功");

                    this.setState({modal:false,login:true});

                }else{

                    message.error("登录失败");

                }

            });

    }

    render(){

        const {login}=this.state;

        return (<div className="login">

                    {

                    login ?

                    <Button 

                    onClick={this.logout}

                    type="primary">退出</Button> :

                    <Button type="primary"

                    onClick={this.showModal}

                    >登录</Button>

                    }

                    <Modal

                    title="登录"

                    visible={this.state.modal}

                    onOk={this.checkLogin}

                    onCancel={this.handleHide}

                    >

                        <Input 

                        placeholder="请输入用户名" 

                        onChange={this.changeUser}

                        value={this.state.user}

                        style={{marginBottom:10}} />

                        <Input 

                        placeholder="请输入密码" 

                        onChange={this.changePassword}

                        value={this.state.password}

                        type="password" />

                    </Modal>

                </div>);

    }

    componentWillMount(){

        axios.get("http://www.dell-lee.com/react/api/login.json",{withCredentials:true})

            .then(res=>{

                const login=res.data.data.login;

                this.setState({login})

            })

    }

}

export default Login;