import { FC, useEffect, useState } from 'react';
import { history, useLocation } from "umi";
import styles from './index.less';
import ContentWarp from '@/components/ContentWarp';
import ButtonComp from '@/components/ButtonComp';

interface PageProps { }

const InstallExe: FC<PageProps> = ({ }) => {
  const [listData, setListData] = useState<any>([
    // 依赖程序
    { name: 'GBase', select: false },
    { name: 'GBase升级程序', select: false },
    { name: 'FlashPlayer9', select: false },
    { name: 'MSXML4', select: false },
    { name: '.NET 2.0', select: false },
    { name: '.NET 2.0 SQL', select: false },
    { name: 'HGoogleEarth', select: false },
    { name: 'MySQLServer 5.1', select: false },
    { name: 'MyODBC 3.51', select: false },
    // 专用核心密码管理分系统
    { name: '核心区安装程序', select: false },
    { name: '执勤区安装程序', select: false },
    { name: '密钥格式管理安装程序', select: false },
    { name: '密码资源输入输出设备驱动', select: false },
    // 一体化密码机
    { name: '一体化密码机管理软件', select: false },
    { name: '一体化密码机驱动安装程序', select: false },
    // JJP903C密码钥匙
    { name: '认证服务器Install', select: false },
    { name: '用户登录组件', select: false },
  ])

  let sty = { width: '28.5%', padding: '7vh 3vh 3vh 3vh' };

  const itemDom = (item: any, index: number) => {
    return (
      <div className={`${styles.box} ${item.select ?  styles.active_box : ''}`} key={index}
        onClick={() => {
          listData.forEach((data: any) => {
            if (data.name == item.name) {
              data.select = !data.select
            }
          })
          // listData.filter((k: any, i: any, self: any) => {
          //   return i === self.findIndex((t: any) => (
          //     t.id === k.id && t.name === k.name
          //   ));
          // });
          setListData([...listData])
        }}>
        {item.name}
      </div>
    )
  }

  return (
    <div className={styles.exeInstall}>
      <div className={styles.title_con}>一体化对称密码管理系统</div>
      <div className='flex_acB_jE'>
        {/* 左 */}
        <ContentWarp style={sty} text={'依赖程序'}>
          { listData.slice(0, 9).map((item: any, index: number) => { return itemDom(item, index) })}
        </ContentWarp>

        {/* 中 */}
        <ContentWarp style={sty} text={'专用核心密码管理分系统'}>
          {
            listData.slice(9, 13).map((item: any, index: number) => { return itemDom(item, index) })}
        </ContentWarp>

        {/* 右 */}
        <div style={{ width: '28.5%' }}>
          <ContentWarp style={{ marginBottom: '8%', padding: '7vh 3vh 3vh 3vh', height: '25.7vh' }} text={'一体化密码机'}>
            {
              listData.slice(13, 15).map((item: any, index: number) => { return itemDom(item, index) })}
          </ContentWarp>

          <ContentWarp text={'JJP903C密码钥匙'} style={{ padding: '7vh 3vh 3vh 3vh', height: '25.7vh' }}>
            {
              listData.slice(15, 17).map((item: any, index: number) => { return itemDom(item, index) })}
          </ContentWarp>
        </div>
      </div>
      <div className='flex_jE' style={{ marginTop: '3vh', paddingRight: '4.5vh' }}>
        <ButtonComp text={'退出'} onClick={() => history.push('/index')} />
      </div>
    </div>
  )
}

export default InstallExe