import ContentWarp from '@/components/ContentWarp';
import styles from '../../index.less';
import { Form, Input, Select, message } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import { useEffect } from 'react';
import { remoteFileConfiSendData, remoteFileConfigClean } from '@/services/gql';

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

  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({
      deviceLocation: '前端机平台',
      deviceType: '类型1',
      hotStandby: 'no',
      deviceId: '',
    })
  }, [])

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

  const clearInfo = () => {
    remoteFileConfigClean({type: 4}).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}
            onFinish={onFinish}
          >
            <Form.Item
              name="deviceLocation"
              label="设备位置"
              rules={[
                { required: true, message: '请选择设备位置' },
              ]}
            >
              <Select
                style={{ width: 560 }}
                onChange={(e) => { }}
                options={[
                  { label: '前端机平台', value: '前端机平台' },
                  { label: '后端机平台', value: '后端机平台' }
                ]}
              />
            </Form.Item>
            <Form.Item
              name="deviceType"
              label="设备类型"
              rules={[
                { required: true, message: '请选择设备类型' },
              ]}
            >
              <Select
                style={{ width: 560 }}
                onChange={(e) => { }}
                options={[
                  { label: '类型1', value: '类型1' },
                  { label: '类型2', value: '类型2' }
                ]}
              />
            </Form.Item>
            <Form.Item
              name="hotStandby"
              label="存在热备"
              rules={[
                { required: true, message: '请选择存在热备' },
              ]}
            >
              <Select
                style={{ width: 560 }}
                onChange={(e) => { }}
                options={[
                  { label: 'no', value: 'no' },
                  { label: 'yes', value: 'yes' }
                ]}
              />
            </Form.Item>
            <Form.Item
              name="deviceId"
              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>
  );
}