import { FC, useEffect, useState } from 'react';
import { history, useLocation, useParams } from 'umi';
import styles from './index.less';
import DeviceInstall from './DeviceInstall';
import PowerOnAuth from './PowerOnAuth';
import { LeftOutlined } from '@ant-design/icons';
import { Modal } from 'antd';

interface PageProps { }

const InitialSystem: FC<PageProps> = ({ }) => {
  const [activeItem, setActiveItem] = useState<any>(null)
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const type = queryParams.get('type');
  const count = queryParams.get('count');
  const [visibility, setVisibility] = useState<boolean>(true);

  const urlParams = useParams();
  let installExe = localStorage.getItem(`${urlParams?.fileType}`);
  let info = installExe ? JSON.parse(installExe) : null;

  const MenuList: any = {
    'admin': [
      { name: '算法加载', dom: <div>暂无内容</div>, img: '' },
      { name: '设备初装', dom: <DeviceInstall />, img: '' },
      { name: '开机认证', dom: <PowerOnAuth />, img: '' },
      { name: '状态查询', dom: <div>暂无内容</div>, img: '' },
      { name: '安全销毁', dom: <div>暂无内容</div>, img: '' },
    ],
    'test': [
      { name: '硬件检测', dom: <div>暂无内容</div>, img: '' },
      { name: '传输加解密', dom: <div>暂无内容</div>, img: '' },
      { name: '存储加解密', dom: <div>暂无内容</div>, img: '' },
      { name: '认证/验证', dom: <div>暂无内容</div>, img: '' },
      { name: '非对称算法', dom: <div>暂无内容</div>, img: '' },
    ]
  }

  useEffect(() => {
    if (type && count) {
      setActiveItem(MenuList[type][count])
    } else {
      setActiveItem(null)
    }
  }, [location.search])

  const itemDom = (type: string, item: any, index: number) => {
    return (
      <div className={styles.item1} key={item.name} onClick={() => {
        setActiveItem(item)
        history.push(`/initialSystem/${urlParams?.fileType}?type=${type}&count=${index}`)
      }}>
        <div className={styles.item1_img}></div>
        <div className={styles.item1_name} style={{ color: activeItem?.name == item.name ? 'red' : '' }}>
          {item.name}
        </div>
      </div>
    )
  }

  return (
    <div className={styles.initial_warp}>
      {info.installExe[14].select ? <>
        {/* 头部 */}
        <div className={styles.header_warp}>
          <div className='ml20'>专用核心密码机管理软件</div>
          <div className='mr20'></div>
        </div>
        {/* 底部 */}
        <div className={styles.main_warp}>
          {/* 左侧菜单 */}
          <div className={styles.left_menu}>

            <div className={styles.nav_title}>密码机管理</div>
            {MenuList['admin'].map((item: any, index: number) => itemDom('admin', item, index))}

            <div className={styles.nav_title}>密码机测试</div>
            {MenuList['test'].map((item: any, index: number) => itemDom('test', item, index))}

          </div>
          {/* 右侧内容 */}
          <div className={styles.right_warp}>
            {
              activeItem ? activeItem.dom :
                <div className={styles.start_warp}>
                  <div className={styles.start_title}>全军一体化对称密码管理系统</div>
                  <div className={styles.introduce}>
                    <div>专用核心密码机管理系统</div>
                    <div>软件当前版本：2.0.3</div>
                    <div>总参谋第XXX研究所研制</div>
                  </div>
                </div>
            }
          </div>
        </div>
      </> : <Modal
        title={'系统提示'}
        open={visibility}
        centered
        width={500}
        closeIcon={false}
        footer={null}
        maskClosable={false}
      >
        <div style={{padding: '20px 0'}}>
          缺少驱动，请先安装所需的驱动程序！
        </div>
      </Modal>

      }


    </div>
  )
}

export default InitialSystem