/* eslint-disable global-require */
import React, { useEffect, useState } from 'react';
import { Form, Divider, Button, Input, message } from 'antd';
import { SaveETLConfig, GetETLConfig } from '@/services/hostmanager/hostmanager';
import styles from './index.less';

const ETCConfig = () => {
  const [form] = Form.useForm();
  const [flag, setFlag] = useState(0);
  useEffect(() => {
    GetETLConfig().then(res => {
      if (res.code === 0) {
        console.log(res.data, 'res.data');
        form.setFieldsValue({ url: res.data });
      } else {
        message.error(res.msg);
      }
    });
  }, []);

  const onFinish = () => {
    form.validateFields().then(values => {
      if (values) {
        SaveETLConfig({ url: values.url }).then(res => {
          if (res.code === 0) {
            message.success('保存成功');
          } else {
            message.error(res.msg);
          }
        });
      }
    });
  };

  return (
    <div className={styles.pageContent}>
      <div className={styles.header}>
        <img
          className={styles.icon}
          src={require('../../../../assets/images/icons/数据中台.svg')}
          alt=""
        />

        <div className={styles.title}>数据中台</div>
      </div>
      <Divider />
      <Form
        form={form}
        labelCol={{
          span: 2,
        }}
        wrapperCol={{
          span: 5,
        }}
        onFinish={onFinish}
      >
        <Form.Item
          label="服务地址(平台)"
          name="url"
          labelAlign="left"
          style={{ marginLeft: '20px' }}
          rules={[
            {
              required: true,
              message: '请填写服务地址',
            },
          ]}
        >
          <Input
            style={{ width: '300px' }}
            placeholder="请填写服务地址"
            rules={[
              {
                validator: (rule, value) => {
                  let aa = form.getFieldValue().qrCodeurl;
                  let regEn = /^((ht|f)tps?):\/\/([\w-]+(\.[\w-]+)*\/?)+(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?$/;
                  if (aa) {
                    if (regEn.test(aa) === false) {
                      return Promise.reject('url必须以http(s)://开头');
                    }
                  }

                  return Promise.resolve();
                },
              },
            ]}
          />
        </Form.Item>

        <Form.Item
          style={{ marginLeft: '20px' }}
          wrapperCol={{
            offset: 2,
            span: 5,
          }}
        >
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default ETCConfig;
