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

export default function Page() {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    setParameter({
      ipAddress: values.ipAddress
    }).then((res) => {
      if (res.result == 'success') {
        message.success('连接成功')
      }else {
        message.success(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} onFinish={onFinish}>
            <Form.Item
              name="ipAddress"
              label="本地GLQ后端IP"
              rules={[
                { required: true, message: '请输入本地GLQ后端IP' },
                { validator: validateIPAddress },
              ]}
            >
              <Input placeholder="请输入本地GLQ后端IP" style={{ width: '560px' }} />
            </Form.Item>
          </Form>
          <div className={styles.btn_warp}>
            <ButtonComp style={{ marginRight: 20 }} text={'建立连接'} onClick={() => form.submit()} />
            <ButtonComp type={'cancel'} text={'参数重置'} onClick={() => form.resetFields()} />
          </div>
        </div>
      </ContentWarp>
    </div>
  );
}
