/* eslint-disable react/jsx-no-undef */
import React, { useEffect, useState } from 'react';
import { Card, Form, Input, Button, Select, message, Divider, Row, Col, Spin } from 'antd';
import { CloseCircleFilled } from '@ant-design/icons';
import styles from './IotConfig.less';
import Internet from '../../../../assets/images/icons/物联.svg';
import EMQ from '../../../../assets/images/icons/EMQ.svg';
import Yes from '../../../../assets/images/icons/正确.svg';
import {
  GetIOTPlatformVersion,
  GetTCPConfigInfo,
  PingIOTPlatform,
  SaveTcpAddress,
} from '@/services/hostmanager/hostmanager';
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const tailLayout = {
  wrapperCol: { offset: 9, span: 15 },
};

const IotConfig = () => {
  const [loading, setLoading] = useState(false); // 加载
  const [show1, setShow1] = useState('none');
  const [show2, setShow2] = useState('none');
  const [currentIotVersion, setCurrentIotVersion] = useState({ data: '' });
  const [currentIotConfig, setCurrentIotConfig] = useState({
    TcpAddress: '',
    SSLSafe: '',
    IotAddress: '',
  });

  const [form] = Form.useForm();
  const onFinish = values => {
    if (values.IotAddress != null && values.IotAddress.length > 0) {
      if (values.SSLSafe === '是') {
        values.SSLSafe = 1;
      }
      if (values.SSLSafe === '否') {
        values.SSLSafe = 0;
      }
      PingIot({ ip: values.IotAddress, values });
    } else {
      if (values.SSLSafe === '是') {
        values.SSLSafe = 1;
      }
      if (values.SSLSafe === '否') {
        values.SSLSafe = 0;
      }
      SaveIotConfig({
        tcpAddress: values.TcpAddress,
        iotAddress: values.IotAddress,
        sslSafe: values.SSLSafe,
      });
    }
  };

  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  useEffect(() => {
    GetCurentIotVerison();
    GetIotConfig();
  }, []);

  const GetCurentIotVerison = () => {
    GetIOTPlatformVersion().then(res => {
      if (res.data) {
        setCurrentIotVersion(res);
      }
    });
  };
  const GetIotConfig = () => {
    GetTCPConfigInfo().then(res => {
      if (res.data) {
        let obj = {};
        Object.keys(currentIotConfig).forEach(k => {
          obj[k] = res.data[k];
        });
        console.log(obj);
        form.setFieldsValue(obj);
        if (!obj.IotAddress || obj.IotAddress == null) {
          form.setFieldsValue({ IotAddress: '127.0.0.1' });
        }
        if (!obj.TcpAddress || obj.TcpAddress == null) {
          form.setFieldsValue({ TcpAddress: '127.0.0.1:8083' });
        }
        if (!obj.SSLSafe || obj.SSLSafe == null) {
          form.setFieldsValue({ SSLSafe: '否' });
        }
        setCurrentIotConfig(val => ({ ...val, ...obj }));
      }
    });
  };
  const PingIot = ({ ip, values }) => {
    SaveIotConfig({
      tcpAddress: values.TcpAddress,
      iotAddress: values.IotAddress,
      sslSafe: values.SSLSafe,
    });
  };
  const PingIot1 = () => {
    setLoading(true);
    let aa = form.getFieldsValue().IotAddress;
    console.log(aa);
    PingIOTPlatform({
      ip: aa,
    }).then(res => {
      setLoading(false);
      if (res.code === 0) {
        setShow1('block');
        setShow2('none');
        message.success('连接成功!');
      } else {
        setShow1('none');
        setShow2('block');
        message.error(res.msg);
      }
    });
  };
  const SaveIotConfig = config => {
    setLoading(true);
    SaveTcpAddress(config).then(res => {
      setLoading(false);
      if (res.code === 0) {
        message.info('配置保存成功');
      } else {
        message.error(res.msg);
      }
    });
  };

  return (
    <div className={styles.iot_container}>
      <Card
        // title={`物联平台${currentIotVersion.data ? `[${currentIotVersion.data}]` : ''}`}
        style={{ width: '100%', height: 'calc(100vh - 130px)' }}
      >
        <Spin spinning={loading} tip="loading">
          <Form
            form={form}
            name="basic"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <div
              style={{
                marginTop: '10px',
                display: 'flex',
                alignItems: 'center',
              }}
            >
              <img src={Internet} style={{ height: '16px' }} alt="" />
              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>物联平台</span>
            </div>
            <Divider />
            <Form.Item
              style={{ marginLeft: '20px', marginBottom: '0px' }}
              // label="服务地址(平台)"
              // name="IotAddress"
              // rules={[
              //   {
              //     required: true,
              //     pattern: new RegExp(
              //       /^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])$/,
              //       'g',
              //     ),
              //     message: '请输入正确的IP例如:192.168.12.231',
              //   },
              // ]}
            >
              <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
                <Form.Item
                  label="服务地址(平台)"
                  name="IotAddress"
                  rules={[
                    {
                      required: true,
                      pattern: new RegExp(
                        /^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])$/,
                        'g',
                      ),
                      message: '请输入正确的IP例如:192.168.12.231',
                    },
                  ]}
                >
                  <Input
                    style={{ width: '300px', marginLeft: '15px' }}
                    placeholder="请输入服务地址"
                  />
                </Form.Item>
                <span style={{ display: show1 }}>
                  <img
                    src={Yes}
                    style={{
                      height: '24px',
                      marginTop: '10px',
                      marginLeft: '26px',
                    }}
                    alt=""
                  />
                </span>
                <span style={{ display: show2 }}>
                  <CloseCircleFilled
                    style={{
                      fontSize: '24px',
                      marginTop: '10px',
                      marginLeft: '26px',
                    }}
                  />
                </span>
              </div>
            </Form.Item>
            <Button type="primary" onClick={() => PingIot1()} style={{ marginLeft: '152px' }}>
              连接
            </Button>
            <div
              style={{
                marginTop: '40px',
                display: 'flex',
                alignItems: 'center',
              }}
            >
              <img src={EMQ} style={{ height: '16px' }} alt="" />
              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>EMQ</span>
            </div>
            <Divider />
            <Form.Item
              style={{ marginLeft: '20px' }}
              label="服务地址(EMQ)"
              name="TcpAddress"
              rules={[
                {
                  required: true,
                  pattern: new RegExp(/^.*:.*$/),
                  message: '请输入正确的IP:端口',
                },
              ]}
            >
              <Input style={{ width: '300px', marginLeft: '13px' }} />
            </Form.Item>
            <Form.Item
              style={{ marginLeft: '20px' }}
              name="SSLSafe"
              label="SSL(EMQ)"
              rules={[{ required: true, message: '请选择是否!' }]}
            >
              <Select placeholder="请选择是否!" style={{ width: '300px', marginLeft: '48px' }}>
                <Option value="1">是</Option>
                <Option value="0">否</Option>
              </Select>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}>
                保存
              </Button>
            </Form.Item>
          </Form>
        </Spin>
      </Card>
    </div>
  );
};
export default IotConfig;
