import styles from '../../../GLQ/index.less';
import { useState } from 'react';
import { ConfigProvider, Select, Table } from 'antd';
import { tableTheme } from '@/utils/theme';
import { rowClassName } from '@/utils';
import ButtonComp from '@/components/ButtonComp';

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

  const columns: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 100,
      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: '000标识', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '密钥种类名称', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '安装方式', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '载体类型', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '输出日期', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '协同管理标志', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '是否下载到邮箱', dataIndex: 'name', key: 'name', align: 'center' }
  ]

  return (
    <div className={`${styles.params_warp}`}>
      <ButtonComp type={'special'} text={'专用密钥装配'} onClick={() => { }} />

      <div className='flex_aC mt20 mb20'>
        <div className='mr16'>密钥类型</div>
        <Select style={{ width: 260, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />

        <div className='mr16'>管理代理</div>
        <Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
      </div>

      <div className='mt30 mb30'>专用密钥装配列表</div>

      <div className='mb10'>用户密钥装配列表</div>
      <Table
        scroll={tableData.length > 0 ? { y: 41 * 8 } : {}}
        pagination={false}
        bordered
        columns={columns}
        dataSource={tableData}
        rowKey={(record: any) => record?.id}
        rowClassName={rowClassName}
      />

      <div className='flex_jE mt20'>
        <ButtonComp type='cancel' style={{ marginRight: 20 }} text={'过滤'} onClick={() => { }} />
        <ButtonComp type='cancel' style={{ marginRight: 20 }} text={'载体输出'} onClick={() => { }} />
        <ButtonComp type='cancel' text={'下载到邮箱'} onClick={() => { }} />
      </div>
    </div>
  );
}