import ContentWarp from '@/components/ContentWarp';
import styles from '../../index.less';
import styles1 from './index.less';
import { Form, Input, Select, Table, message } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import { useEffect, useState } from 'react';
import { rowClassName } from '@/utils';
import { validateIPAddress } from '@/utils/validate';
import { remoteFileConfiSendData, remoteFileConfigClean } from '@/services/gql';

// 网络GLQ配置 --> 远程文件配置--> VPN策略
export default function Page() {

  const [form] = Form.useForm();
  const [tableData, setTableData] = useState<any>([]);
  const [activeList, setActiveList] = useState<any>([]);

  useEffect(() => {
    form.setFieldsValue({
      unitName: '',
      deviceName: '',
      deviceIp: '',
      deviceId: '',
      messageComm: 1,
      pingComm: 1,
    })
  }, [])

  const columns: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 100,
      render: (a: any, b: any, c: any) => {
        return <span>{c + 1}</span>;
      },
    },
    { title: '单位名称', dataIndex: 'unitName', key: 'unitName', align: 'center' },
    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center' },
    { title: '设备IP', dataIndex: 'deviceIp', key: 'deviceIp', align: 'center' },
    { title: '设备ID', dataIndex: 'deviceId', key: 'deviceId', align: 'center' },
    { title: '报文通信策略', dataIndex: 'messageComm', key: 'messageComm', align: 'center' },
    { title: 'PING通信策略', dataIndex: 'pingComm', key: 'pingComm', align: 'center' },
  ]

  const onFinish = (values: any) => {
    values.rowKey = Math.floor(Math.random() * 10000);
    setTableData([...tableData, values])
  };

  const sending = () => {
    if (tableData.length == 0) {
      message.info('请添加数据');
      return
    }else if (activeList.length == 0) {
      message.info('请勾选需要发送的数据');
      return
    }

    let serviceList = activeList.map(({ unitName, deviceName, deviceIp, deviceId, messageComm, pingComm }: any) => {
      return { unitName, deviceName, deviceIp, deviceId, messageComm, pingComm }
    })
    remoteFileConfiSendData({
      jsonStr: JSON.stringify({ serviceList: serviceList }),
      type: 5
    }).then((res) => {
      if (res?.result == "success") {
        message.success('发送数据成功');
        form.resetFields();
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  const clearInfo = () => {
    remoteFileConfigClean({ type: 5 }).then(res => {
      if (res?.result == "success") {
        message.success('清除信息成功');
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  return (
    <div className={`${styles.params_warp} ${styles1.params_warp1}`}>
      <ContentWarp text={'VPN策略配置'}>
        <div className='pd20'>配置本地Ⅰ型隔离器与对端Ⅰ型隔离器之间数据通信的VPN策略</div>
        <div className='line'></div>
        <div className='pd20 pb100'>
          <Form
            form={form}
            onFinish={onFinish}
          >
            <Form.Item
              name="unitName"
              label="单位名称"
              rules={[
                { required: true, message: '请输入单位名称' },
              ]}
            >
              <Input style={{ width: '630px' }} />
            </Form.Item>
            <Form.Item
              name="deviceName"
              label="设备名称"
              rules={[
                { required: true, message: '请输入设备名称' },
              ]}
            >
              <Input style={{ width: '630px' }} />
            </Form.Item>
            <div style={{ display: 'flex' }}>
              <Form.Item
                name="deviceIp"
                label="设备IP"
                rules={[
                  { required: true, message: '请输入设备IP' },
                  { validator: validateIPAddress }
                ]}
              >
                <Input style={{ width: '250px', marginRight: 20 }} />
              </Form.Item>
              <Form.Item
                name="deviceId"
                label="设备ID"
                rules={[
                  { required: true, message: '请输入设备ID' },
                ]}
              >
                <Input style={{ width: '250px' }} />
              </Form.Item>
            </div>
            <div style={{ display: 'flex' }}>
              <Form.Item
                name="messageComm"
                label="报文通信策略"
                rules={[
                  { required: true, message: '请选择报文通信策略' },
                ]}
              >
                <Select
                  style={{ width: 250, marginRight: 20 }}
                  onChange={(e) => { }}
                  options={[
                    { label: '加密通信', value: 1 },
                    { label: '数据明传', value: 2 },
                    { label: '通信阻断', value: 3 }
                  ]}
                />
              </Form.Item>
              <Form.Item
                name="pingComm"
                label="PING通信策略"
                rules={[
                  { required: true, message: '请选择PING通信策略' },
                ]}
              >
                <Select
                  style={{ width: 250, marginRight: 20 }}
                  onChange={(e) => { }}
                  options={[
                    { label: '允许互PING', value: 1 },
                    { label: '阻断互PING', value: 2 }
                  ]}
                />
              </Form.Item>
              <ButtonComp text={'提交'} onClick={() => form.submit()} />
            </div>
          </Form>

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

          <div className={styles.btn_warp}>
            <ButtonComp style={{ marginRight: 20 }} text={'发送数据'} onClick={() => sending()} />
            <ButtonComp type={'cancel'} text={'信息清空'} onClick={() => clearInfo()} />
          </div>
        </div>
      </ContentWarp>
    </div>
  );
}