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

import { rowClassName } from '@/utils';
import { getTextSecretInfo, remoteFileConfiSendData } from '@/services/gql';
import { validateIPAddress } from '@/utils/validate';

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

  useEffect(() => {
    form.setFieldsValue({ip: '114.114.114.114'})
  }, [])


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

  const onFinish = (values: any) => {
    getTextSecretInfo(values).then(res => {
      if (res?.result == "success") {
        setTableData(res?.data[0].jsonStr)
        message.success('获取成功');
      } else {
        message.error(res?.errorMsg);
      }
    })
  };

  const sending = () => {
    if (tableData.length == 0) {
      message.info('请获取普密信息后再发送数据');
      return
    }

    remoteFileConfiSendData({
      jsonStr: JSON.stringify(tableData),
      type: 3
    }).then( (res) => {
      if (res?.result == "success") {
        message.success('发送数据成功');
      }else {
        message.error(res?.errorMsg);
      }
    })
  }

  return (
    <div className={styles.params_warp}>
      <ContentWarp text={'安全策略配置'}>
        <div className='pd20'>配置隔离器与外网设备通信白名单列表</div>
        <div className='line'></div>
        <div className='pd20 pb100'>

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

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

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

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