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

class Detail extends Component {
  constructor(props) {
      super(props);
      this.clickLogin = this.showModal.bind(this);
      this.showModal = this.showModal.bind(this);
      this.hideModal = this.hideModal.bind(this);
      this.changeName = this.changeName.bind(this)
      this.changePassword = this.changePassword.bind(this)
      this.checkLogin = this.checkLogin.bind(this)
      
    
      this.state = {
        login: false,
        modal: false,
        name: "",
        password: ""
      };
      
  }   
    
    

    showModal() {
        this.setState({modal:true})
    }
    
    hideModal() {
        this.setState({modal:false})
    }

    changeName(e) {
        this.setState({name:e.target.value})
    }

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

    checkLogin() {
                   const { name, password } = this.state;
        const url = `http://www.dell-lee.com/react/api/login.json?user=${name}&password=${password}`
        axios.get(url, { withCredentials: true }).then((res) => {
          const { login } = res.data.data;
          if (login) {
            message.success("登入成功");
            this.setState({
              login: true,
              modal: false,
            });
          } else {
            message.error("登入失敗");
          }

          // this.setState({ login })
        });
    }
    
    componentDidMount() {
        const url = 'http://www.dell-lee.com/react/api/islogin.json'
        axios.get(url, { withCredentials: true }).then(res => {
            const login = res.data.data.login
            this.setState({ login })
        })
        
    }

    render() {
        const { login } = this.state
        return (
          <Fragment>
            {login ? (
              <Button type="primary">登出</Button>
            ) : (
              <Button type="primary" onClick={this.showModal}>
                登入
              </Button>
            )}
            <Modal
              title="登入"
              visible={this.state.modal}
              onOk={() => {this.checkLogin()}}
              onCancel={() => {this.hideModal();}}
            >
                    <Input placeholder="請輸入用戶名" style={{ marginBottom: 10 }}
                        onChange={this.changeName} value={this.state.name}/>
              <Input placeholder="請輸入密碼" type="password" value={this.state.password} onChange={this.changePassword} value={this.state.password} />
            </Modal>
          </Fragment>
        );       
  }
}
export default Detail;