import React, {useState} from 'react'
import style from './style.module.css'
import http from '../../http'
import {setToken} from '../../http'
import {history} from '../../router.config'

function Login() {
  let [user, setUser] = useState('');
  let [psw, setPsw] = useState('');

  const submission = async () => {
    let {status, data, message} = (await http({ method: 'post', url: '/login', params: {username: user, password: psw} })).data
    // let {status, data, message} = (await http.post('/login', {params: {username: user, password: psw}})).data
    if (status === 200) {
      sessionStorage.setItem('userName', data.name)
      setToken(data.token)
      history.replace('/gis')
    } else {
      alert(message)
    }
  }

  return (
    <div className={style.layer}>
      <h1>登录</h1>
      <div>
        <label htmlFor="user">用户名</label>
        <input type="text" name="user" value={user} onChange={ev => setUser(ev.target.value)}/>
      </div>
      <div>
        <label htmlFor="psw">密码</label>
        <input type="password" name="psw" value={psw} onChange={ev => setPsw(ev.target.value)}/>
      </div>

      <div>
        <a className={style.button} onClick={submission}>登录</a>
      </div>
    </div>
  )
}

export default Login