import React, { useEffect } from 'react';

import { Form, Modal, Input } from 'antd';

const AddView = props => {
  const { onSubumit, handleCancel, visible, msg, flowNodeId, modalType, title } = props;
  const [form] = Form.useForm();
  useEffect(() => {
    form.resetFields();
    if (visible) {
      if (modalType === 'edit') {
        getFormData();
      }
    }
  }, [visible]);
  // 获取表单回显
  const getFormData = () => {
    form.setFieldsValue(msg);
  };
  // 提交表单
  const onFinish = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj = {};
        console.log(modalType);

        if (modalType === 'add') {
          obj = validate;
        } else {
          obj = { ...validate, key: msg.key };
        }
        onSubumit(obj, modalType);
      }
    });
  };
  return (
    <Modal
      title="流程节点辅助视图配置"
      visible={visible}
      onOk={onFinish}
      onCancel={handleCancel}
      maskClosable={false}
      destroyOnClose
    >
      <Form
        form={form}
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 18 }}
        initialValues={{ remember: true }}
      >
        {/* <Form.Item label="流程节点" name="FlowName">
          <Input disabled />
        </Form.Item> */}
        <Form.Item label="前端标签" name="WebLabel">
          <Input placeholder="请输入前端标签" />
        </Form.Item>
        <Form.Item label="前端视图" name="WebPage">
          <Input placeholder="请输入前端视图" />
        </Form.Item>
        <Form.Item label="视图参数" name="WebParam">
          <Input placeholder="请输入视图参数" />
        </Form.Item>
        <Form.Item label="手持标签" name="MobileLabel">
          <Input placeholder="请输入手持标签" />
        </Form.Item>
        <Form.Item label="手持视图" name="MobilePage">
          <Input placeholder="请输入手持视图" />
        </Form.Item>
        <Form.Item label="手持参数" name="MobileParam">
          <Input placeholder="请输入手持参数" />
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default AddView;
