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

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

// 网络GLQ配置 --> 远程文件配置--> 服务列表
export default function Page() {
  const [form] = Form.useForm();
  const [tableData, setTableData] = useState<any>([]);

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

  const columns: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 80,
      render: (a: any, b: any, c: any) => {
        return <span>{c + 1}</span>;
      },
    },
    { title: '服务名称', dataIndex: 'serviceName', key: 'serviceName', align: 'center' },
    { title: '服务器IP', dataIndex: 'serviceIP', key: 'serviceIP', align: 'center' },
    { title: '服务端口', dataIndex: 'servicePort', key: 'servicePort', align: 'center' },
  ]
  
  const sending = () => {
    if(tableData.length == 0) {
      message.info('请添加数据');
      return
    }
    
    let serviceList = tableData.map(({serviceName, serviceIP, servicePort}: any) => {
      return {serviceName, serviceIP, servicePort}
    })
    remoteFileConfiSendData({
      jsonStr: JSON.stringify({ serviceList: serviceList }),
      type: 1
    }).then( (res) => {
      if (res?.result == "success") {
        message.success('发送数据成功');
        form.resetFields();
      }else {
        message.error(res?.errorMsg);
      }
    })
  }
  
  const clearInfo = () => {
    remoteFileConfigClean({type: 1}).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'>

          <Form form={form} layout={'inline'} onFinish={onFinish} className='mb20'>
            <Form.Item name="serviceName" label="服务名称" rules={[{ required: true, message: '请输入服务名称' }]} >
              <Input placeholder="请输入服务名称" style={{ width: '200px' }} />
            </Form.Item>
            <Form.Item name="serviceIP" label="服务IP" rules={[
              { required: true, message: '请输入服务IP' },
              { validator: validateIPAddress}
            ]} >
              <Input placeholder="请输入服务IP" style={{ width: '200px' }} />
            </Form.Item>
            <Form.Item name="servicePort" label="服务端口" rules={[
              { required: true, message: '请输入服务端口' },
              { validator: validatePort }
            ]} >
              <Input placeholder="请输入服务端口" style={{ width: '200px' }} />
            </Form.Item>
            <ButtonComp text={'提交'} onClick={() => form.submit()} />
          </Form>

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

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

