import styles from '../../../GLQ/index.less';
import { useState } from 'react';
import { ConfigProvider, Modal, Table } from 'antd';

import { rowClassName } from '@/utils';
import ButtonComp from '@/components/ButtonComp';

export default function Page() {
  const [tableData, setTableData] = useState([]);
  const [visibility, setVisibility] = useState(false);

  const columns: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 80,
      render: (a: any, b: any, c: any) => {
        return <span>{c + 1}</span>;
      },
    },
    { title: '管理盘号', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '密钥种类', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '当前版本号', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '导入时间', dataIndex: 'importTime', key: 'importTime', align: 'center' },,
    { title: '数据长度', dataIndex: 'name', key: 'name', align: 'center' }
  ]

  return (
    <div className={`${styles.params_warp}`}>
      <ButtonComp type={'special'} text={'管理系统管理盘数据维护'} onClick={() => { }} />

      <div className='flex_aiC mt20 mb20'>
        <ButtonComp text={'数据导入'} onClick={() => setVisibility(true)} />
      </div>

      <Table
        scroll={tableData.length > 0 ? { y: 41 * 10 } : {}}
        pagination={false}
        bordered
        columns={columns}
        dataSource={tableData}
        rowKey={(record: any) => record?.id}
        rowClassName={rowClassName}
      />

      <Modal
        title="xx部一体化对称密码管理系统"
        open={visibility}
        centered
        width={500}
        onCancel={() => setVisibility(false)}
        footer={null}>
        <div>
          <div>类型判断1： 选择文件弹窗</div>
          <div>类型判断2： 导入成功</div>
          <div>类型判断3： 已经存在管理盘数据，是否重新导入？</div>
        </div>
        <div className='flex_jE mt20'>
          <ButtonComp text={'确定'} onClick={() => { }} />
        </div>
      </Modal>
    </div>
  );
}