import ContentWarp from '@/components/ContentWarp';
import styles from '../../index.less';
import { ConfigProvider, Form, Input, Table } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import { useState } from 'react';
import { tableTheme } from '@/utils/theme';

// 网络GLQ配置 --> 远程文件配置--> 安全策略
export default function Page() {
  const [form] = Form.useForm();
  const [tableData, setTableData] = useState([]);
  const [total, setTotal] = useState(0);

  const onFinish = (values: any) => {
    console.log('表单提交:', values);
  };

  const columns: any = [
    {
      title: '序号',
      key: 'index',
      align: 'center',
      width: 100,
      render: (text: any, record: any, index: any) => {
        return <span>{index + 1}</span>;
      },
    }, {
      title: '单位名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    }, {
      title: '设备名称',
      dataIndex: 'age',
      key: 'age',
      align: 'center',
    }, {
      title: '设备IP',
      dataIndex: 'age',
      key: 'age',
      align: 'center',
    }, {
      title: '电话号码',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    }, {
      title: '设备属性',
      dataIndex: 'age',
      key: 'age',
      align: 'center',
    }, {
      title: '设备型号',
      dataIndex: 'age',
      key: 'age',
      align: 'center',
    },
  ]

  const rowClassName = (record:any, index: any) => {
    return index % 2 === 0 ? 'even-row' : 'odd-row';
  };

  return (
    <div className={styles.params_warp}>
      <ContentWarp text={'安全策略配置'}>
        <div className='pd20'>配置隔离器与外网设备通信白名单列表</div>
        <div className='line'></div>
        <div className='pd20 pb100'>
          <ConfigProvider theme={tableTheme}>
            <Table
              scroll={{y: 451}}
              pagination={false}
              bordered
              columns={columns}
              dataSource={[{},{},{},{},{}]}
              rowKey={(record: any) => record?.id}
              rowClassName={rowClassName}
            />
          </ConfigProvider>

          <Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
            <Form.Item name="aaa" label="普密对外服务器IP（仅Ⅱ型隔离器时需配置此项）" rules={[{ required: true, message: '请输入普密对外服务器IP' }]} >
              <Input style={{ width: '280px' }} />
            </Form.Item>
            <div style={{ display: 'flex', marginLeft: 20 }}>
              <ButtonComp text={'获取普密信息'} onClick={() => form.submit()} />
            </div>
          </Form>

          <div className='mt20'>尚未连接普密对外服务器！</div>

          <div className={styles.btn_warp}>
            <ButtonComp text={'发送数据'} onClick={() => { }} />
          </div>
        </div>
      </ContentWarp>
    </div>
  );
}