/* eslint-disable react/jsx-no-undef */
import React, { useEffect, useState } from 'react';
import { Card, Form, Input, Button, Select, Divider, Spin, message } from 'antd';
import { InfoCircleFilled } from '@ant-design/icons';
import styles from './index.less';
import dataBase from '../../../../assets/images/icons/数据库.png';
import { SaveSysConfigurate, SysConfiguration } from '@/services/hostmanager/hostmanager';

const { Item } = Form;
const RedisConfig = props => {
  const [loading, setLoading] = useState(false); // 加载
  const [form] = Form.useForm();

  useEffect(() => {
    getData();
  }, []);

  const getData = () => {
    SysConfiguration({ moduleName: 'Redis配置' }).then(res => {
      if (res.code === 0) {
        let data = res.data && JSON.parse(res.data);
        form.setFieldsValue(data);
      }
    });
  };

  const onFinish = values => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj = form.getFieldsValue();
        SaveSysConfigurate({
          configName: 'Redis配置',
          configValue: JSON.stringify(obj),
        }).then(resData => {
          if (resData.code === 0) {
            message.success('配置保存成功');
          } else {
            message.error(resData.msg);
          }
        });
      }
    });
  };

  return (
    <div className={styles.iot_container}>
      <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
        <Spin spinning={loading} tip="loading">
          <Form
            form={form}
            name="basic"
            initialValues={{ remember: true, configValue: 'V4' }}
            onFinish={onFinish}
          >
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
              }}
            >
              <img src={dataBase} style={{ height: '16px' }} alt="" />
              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>Redis数据库</span>
            </div>
            <Divider />
            <Item
              label="IP"
              name="ip"
              rules={[{ required: true, message: '请输入IP' }]}
              style={{ marginLeft: '20px' }}
            >
              <Input
                placeholder="请输入IP"
                allowClear
                style={{ marginLeft: '30px', width: '300px' }}
              />
            </Item>
            <Item
              label="端口"
              name="port"
              rules={[{ required: true, message: '请输入端口' }]}
              style={{ marginLeft: '20px' }}
            >
              <Input
                placeholder="请输入端口号"
                allowClear
                style={{ marginLeft: '15px', width: '300px' }}
              />
            </Item>
            <Item
              label="数据库"
              name="dbName"
              rules={[{ required: true, message: '请输入数据库名' }]}
              style={{ marginLeft: '20px' }}
            >
              <Select
                placeholder="请选择数据库名"
                style={{ marginLeft: '2px', width: '300px' }}
                options={[
                  { value: '0', label: '0' },
                  { value: '1', label: '1' },
                  { value: '2', label: '2' },
                  { value: '3', label: '3' },
                  { value: '4', label: '4' },
                  { value: '5', label: '5' },
                  { value: '6', label: '6' },
                  { value: '7', label: '7' },
                  { value: '8', label: '8' },
                  { value: '9', label: '9' },
                  { value: '10', label: '10' },
                  { value: '11', label: '11' },
                  { value: '12', label: '12' },
                  { value: '13', label: '13' },
                  { value: '14', label: '14' },
                  { value: '15', label: '15' },
                ]}
              />
            </Item>
            <Item
              label="密码"
              name="key"
              rules={[{ required: true, message: '请输入密码' }]}
              style={{ marginLeft: '18px' }}
            >
              <Input.Password
                placeholder="请输入密码"
                allowClear
                style={{ marginLeft: '18px', width: '300px' }}
              />
            </Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}>
                保存
              </Button>
            </Form.Item>
          </Form>
        </Spin>
      </Card>
    </div>
  );
};
export default RedisConfig;
