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: '算法标识', 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 mt30 mb30'>
        <div style={{ marginRight: 12 }}>目的系统</div>
        <Select style={{ width: 200, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />

        <div style={{ marginRight: 12 }}>配发方式</div>
        <Select style={{ width: 200, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />

        <div style={{ marginRight: 12 }}>载体类型</div>
        <Select style={{ width: 200 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
      </div>

      <div className='mb30' style={{ height: 1, background: '#EDEDED' }}></div>

      <div className='flex_aC_jS mb10'>
        <div>选择算法参数</div>
        <div className='flex_aC'>
          <div style={{ marginRight: 12 }}>设备型号</div>
          <Select style={{ width: 200, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />

          <div style={{ marginRight: 12 }}>参数中文名称</div>
          <Select style={{ width: 200 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
        </div>
      </div>

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

      <div className='flex_aC_jS mt30'>
        <ButtonComp text={'查看记录'} onClick={() => { }} />
        <ButtonComp text={'配发'} onClick={() => { }} />
      </div>
    </div>
  );
}