import { FC, useEffect, useState } from 'react';
import { history, useLocation } from "umi";
import styles from './index.less';
import { Input, Modal, message } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import { LeftOutlined } from '@ant-design/icons';

interface PageProps { }

const CoreSystemEntrance: FC<PageProps> = ({ }) => {
  const [visibility, setVisibility] = useState<boolean>(false);
  const [key, setKey] = useState<string>('一');
  const [pin, setPin] = useState<any>('');

  useEffect(() => {
    function handleKeyPress(e: any) {
      if (e.key === 'Enter') {
        setVisibility(true)
      }
    }

    // 添加事件监听器
    document.addEventListener('keydown', handleKeyPress);

    // 清除事件监听器
    return () => {
      document.removeEventListener('keydown', handleKeyPress);
    };
  }, [])

  const initData = () => {
    setVisibility(false);
    setKey('一');
    setPin('')
  }

  const submit = () => {
    if (key == '一' && pin == '123123') {
      setKey('二');
      setPin('')
    } else if (key == '二' && pin == '123123') {
      initData()
      // 登录成功进入系统
      history.push('/teamViewer/paramsSetting')
    }else {
      message.error('PIN码错误，请重新输入')
    }
  }

  return (
    <div className={styles.entrance}>
      <div className={styles.goback} onClick={() => history.push('/')}><LeftOutlined />返回</div>
      <div className={styles.text_warp}>
        <div>总参谋部</div>
        <div>一体化对称密码管理系统</div>
        <div>总参谋部密码管理中心</div>
      </div>

      <div className={styles.prompt}>请插入电子钥匙...</div>

      {/* 登录弹窗 */}
      <Modal
        title="用户登录（pin码：123123）"
        open={visibility}
        centered
        width={550}
        onCancel={() => setVisibility(false)}
        footer={null}
        maskClosable={false}
      >
        <div className={styles.login_warp}>
          <div className={styles.imges}></div>
          <div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div style={{ width: 120, marginRight: 16 }}>请输入PIN码</div>
              <Input placeholder="请输入PIN码" value={pin} onChange={(e) => setPin(e.target.value)} onPressEnter={() => submit()} />
            </div>
            <div className='mt20'>提示信息：请插入第{key}个钥匙并输入PIN码</div>
          </div>
        </div>

        <div className='flex_jE mt20'>
          <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => submit()} />
          <ButtonComp type="cancel" text={'退出'} onClick={() => initData()} />
        </div>
      </Modal>
    </div>
  )
}

export default CoreSystemEntrance