import styles from './index.module.scss'

import { Input, Button } from 'antd'
import { useCallback, useEffect, useState } from 'react'
import { setTokenInfo } from '@/utils/storage'
import history from '@/utils/history'
import { MessageFu } from '@/utils/message'
import { userLoginAPI, getUserInfoAPI } from '@/store/action/layout'

export default function Login() {
  // 账号密码 - 验证码
  const [userName, setUserName] = useState('')
  const [passWord, setPassWord] = useState('')
  const images = {
    logo: require('@/assets/img/logo.png'),
    loginPw: require('@/assets/img/loginPw.png'),
    loginUser: require('@/assets/img/loginUser.png'),
    eye: require('@/assets/img/eye.png')
  }

  useEffect(() => {
    //进入登录页 重置 权限信息为空
  }, [])

  // 键盘按下回车事件
  const keyUpEntFu = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') loginClickFu()
  }
  // 点击登录
  const loginClickFu = useCallback(async () => {
    // 非空判断
    if (userName === '') return MessageFu.warning('请输入用户名!')
    else if (passWord === '') return MessageFu.warning('请输入密码!')
    const obj = {
      password: passWord,
      userName
    }
    await userLoginAPI(obj).then(async (res: any) => {
      if (res.code === 0) {
        MessageFu.success('登录成功')
        setTokenInfo({
          token: res.data
        })
        // 检查密码是不是默认密码，是的话给提示
        if (passWord === '123456') {
          window.setTimeout(() => {
            MessageFu.warning('您的密码还是默认密码，请尽快修改!')
          }, 1000)
        }

        const userInfo = await getUserInfoAPI()
        setTokenInfo({
          token: res.data,
          user: userInfo.data
        })
        history.push('/')
      }
    })
  }, [passWord, userName])

  return (
    <div className={styles.Login}>
      <div className='mainRight'>
        {/* logg */}
        <div className='LogoImg'>
          <img src={images.logo} alt='' />
        </div>

        {/* 账号密码输入框 */}
        <div className='inputBox'>
          <div className='inputBoxRow'>
            <Input
              onKeyUp={e => keyUpEntFu(e)}
              value={userName}
              onChange={e => setUserName(e.target.value.trim())}
              prefix={<img src={images.loginUser} alt='' />}
              placeholder='请输入用户名'
              maxLength={15}
            />
          </div>
          <div className='inputBoxRow'>
            <Input.Password
              onKeyUp={e => keyUpEntFu(e)}
              value={passWord}
              onChange={e => setPassWord(e.target.value.trim())}
              prefix={<img src={images.loginPw} alt='' />}
              iconRender={visible =>
                visible ? (
                  <img src={images.eye} alt='' />
                ) : (
                  <img src={images.eye} alt='' style={{ opacity: 0.5 }} />
                )
              }
              placeholder='请输入密码'
              maxLength={20}
            />
          </div>
        </div>

        {/* 登录按钮 */}
        <div className='loginBtn'>
          <Button type='primary' size='large' onClick={loginClickFu}>
            登 录
          </Button>
        </div>
      </div>
    </div>
  )
}
