import styles from '../../../GLQ/index.less';
import { useState } from 'react';
import { ConfigProvider, Modal, Select, 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: 'productName', key: 'productName', align: 'center' },
    { title: '管理实体标识', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '000标识', dataIndex: 'name', key: 'name', align: 'center' },
    { title: 'IP地址', 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: 'productNum', key: 'productNum', 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' }
  ]

  const columns1: 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: '310标识', dataIndex: 'name', key: 'name', align: 'center' },
    { title: 'IP地址', 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={() => { }} />
      <ButtonComp style={{ margin: '20px 0 ' }} text={'选择设备'} onClick={() => setVisibility(true)} />

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

      <Modal
        title="选择设备"
        open={visibility}
        centered
        width={1100}
        onCancel={() => setVisibility(false)}
        footer={null}>

        <div className='flex_aiC mb20 pt10'>
          <div className='mr16'>检索项</div>
          <Select style={{ width: 120, marginRight: 20 }} placeholder={'请选择检索项'} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />

          <div className='mr16'>检索项</div>
          <Select style={{ width: 120, marginRight: 20 }} placeholder={'请选择检索项'} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />

          <div className='mr16'>设备型号</div>
          <Select style={{ width: 120, marginRight: 20 }} placeholder={'请选择设备型号'} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />

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

          <ButtonComp text={'查找'} onClick={() => { }} />
        </div>

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

        <div className='flex_jE mt20'>
          <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => { }} />
          <ButtonComp type='cancel' text={'取消'} onClick={() => { }} />
        </div>
      </Modal>
    </div>
  );
}