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

// 网络GLQ配置 --> 远程文件配置--> 网络参数
export default function Page() {

  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    remoteFileConfiSendData({
      jsonStr: JSON.stringify(values),
      type: 2
    }).then( (res) => {
      if (res?.result == "success") {
        message.success('文件提交成功');
        form.resetFields();
      }else {
        message.error(res?.errorMsg);
      }
    })
  };

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

  return (
    <div className={`${styles.params_warp} ${styles1.params_warp1}`}>
      <ContentWarp text={'网络参数配置'}>
        <div className='pd20'>配置隔离器网络运行参数</div>
        <div className='line'></div>
        <div className='pd20 pb100'>
          <Form
            form={form}
            onFinish={onFinish}
          >
            <Form.Item
              name="ipAddress"
              label="IP地址"
              rules={[
                { required: true, message: '请输入IP地址' },
                { validator: validateIPAddress }
              ]}
            >
              <Input placeholder="请输入IP地址" style={{ width: '560px' }} />
            </Form.Item>
            <Form.Item
              name="mask"
              label="子网掩码"
              rules={[
                { required: true, message: '请输入子网掩码' }
              ]}
            >
              <Input placeholder="请输入子网掩码" style={{ width: '560px' }} />
            </Form.Item>
            <Form.Item
              name="defaultGateway"
              label="默认网关"
              rules={[
                { required: true, message: '请输入默认网关' },
              ]}
            >
              <Input placeholder="请输入默认网关" style={{ width: '560px' }} />
            </Form.Item>
          </Form>
          <div className={styles.btn_warp}>
            <ButtonComp style={{ marginRight: 20 }} text={'文件提交'} onClick={() => form.submit()} />
            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => clearInfo()} />
          </div>
        </div>
      </ContentWarp>
    </div>
  );
}
