import React, { useEffect, useState } from 'react';
import { Modal, Input, Form } from 'antd';

const LineModal = props => {
  const { visible, handleCancel, lineMsg, onSubumit } = props;
  const [form] = Form.useForm();
  useEffect(() => {
    if (visible) {
      form.setFieldsValue({
        text: lineMsg.text,
      });
    } else {
      form.resetFields();
    }
  }, [visible]);
  // 保存线配置
  const onSave = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj = { ...lineMsg, ...validate };
        onSubumit(obj);
      }
    });
  };
  return (
    <div>
      <Modal
        title="线名称"
        visible={visible}
        onOk={onSave}
        width="860px"
        onCancel={handleCancel}
        maskClosable={false}
        destroyOnClose
        getContainer={false}
      >
        <Form form={form} labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
          <Form.Item label="线名称" name="text">
            <Input placeholder="请输入线点名称" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default LineModal;
