//再次刷新还是会显示登录啊

import React ,{Component,Fragment} from "react";
import { Button,Modal,Input,message } from 'antd'
import axios from "../../api/request";
import './Login.css'

class Login extends Component{
 constructor(props) {
   super(props);
   this.state={
     login:false,
     visible: false,
     username:'',
     password:''
   }
   this.changeUser=this.changeUser.bind(this)
 }

 componentDidMount() {
   axios.get('http://www.dell-lee.com/react/api/isLogin.json',{
     withCredentials:true
   }).then(res=>{
     this.setState({
       login:res.data.login
     })
   })
 }
 changeUser(e){
   this.setState({
     username:e.target.value
   })
 }
 changePassword=(e)=>{
   this.setState({
     password:e.target.value
   })
 }
 showModal = () => {
   this.setState({
     visible: true,
   });
 };
 logOut=()=>{
   axios.get('http://www.dell-lee.com/react/api/logout.json',{
     withCredentials:true
   }).then(res=>{
     console.log(res.data)
     if(res.data.logout){
       this.setState({
         login:false
       })
     }
   })
 }
 handleOk = e => {
   const {username,password}=this.state
   const url=`http://www.dell-lee.com/react/api/login.json?user=${username}&password=${password}`
   axios.get(url,{
     withCredentials:true
   }).then(res=>{
     const login=res.data.login
     if(login){
       message.success('登录成功')
       this.setState({
         login:res.data.login
       })
     }else {
       message.error('登录失败')
     }

   })
   this.setState({
     visible: false,
   });
 };

 handleCancel = e => {
   this.setState({
     visible: false,
   });
 };

 render() {
   const { login }=this.state
   return(
       <Fragment>
         <div className={'login'}>
           {
             login ?
                 <Button type="primary" onClick={this.logOut}>退出</Button>:
                 <Button type="primary" onClick={this.showModal}>登录</Button>

           }
         </div>
         <Modal
             title="登录"
             visible={this.state.visible}
             onOk={this.handleOk}
             onCancel={this.handleCancel}
               negative_button_text={'取消'}
               positive_button_text={'确定'}
         >
           <Input type={'text'}
                  value={this.state.username}
                  placeholder={'请输入用户名'}
                  onChange={this.changeUser}
                  style={{marginBottom:10}}/>
           <Input type={'password'}
                  value={this.state.password}
                  onChange={this.changePassword}
                  placeholder={'请输入密码'}/>
         </Modal>
       </Fragment>

   )
 }
}
export default Login