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

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

  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>
      <Modal
        visible={getWayVisible}
        title="提示"
        width="350px"
        closable={false}
        footer={
          <Space>
            <Button
              onClick={() => {
                setGetWayVisible(false);
                setActiveKey('6');
              }}
              type="primary"
            >
              好的,去开启
            </Button>
          </Space>
        }
      >
        <InfoCircleFilled
          style={{
            color: '#faad14',
            fontSize: '18px',
            marginRight: '10px',
          }}
        />
        <span>当前网关暂未打开,请前往开启!</span>
      </Modal>
    </div>
  );
};

export default ETCConfig;