import React, {useEffect} from 'react';
import { connect } from 'umi';
import {Form, Modal, Button, Input} from 'antd'

const FormItem = Form.Item;

const Exchange = (props) => {
  const {visible, handleClose, loading} = props;

  /**
   * @表单提交
   */
  const [form] = Form.useForm();
  const handleSubmit =  e => {
    e.preventDefault();
    form.validateFields().then(values => {
      console.log(values)
    }).catch((err) => {
      console.log(err)
    });
  };
  /* 关闭Modal */
  const closeModal = () => {
    form.resetFields()
    handleClose()
  }


  /**
   * @页面数据
   */
  const formTailLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 15 },
  };

  useEffect(() => {
    if (visible) {
      form.setFieldsValue({

      })
    }
  }, [visible])
  
  return (
    <Modal
      width={450}
      title='替换'
      visible={ visible }
      onCancel={ closeModal }
      centered
      footer={null}
      getContainer={false}
      loading={loading}
    >
      <Form form={form} {...formTailLayout} onFinish={ handleSubmit }>
        {/* {allFormData?.length > 0 && allFormData.map(item => createSubmitForm(item))} */}
        <FormItem name="1111" label="替换项" rules={[{required: true}]}>
          <Input allowClear/>
        </FormItem>
        <FormItem name="222" label="替换成" rules={[{required: true}]}>
          <Input allowClear/>
        </FormItem>
        <div style={{ marginTop: 32, textAlign: 'right' }}>
          <Button
            style={{ width: 70, height: 30, marginRight: 20 }}
            onClick={closeModal}
          >
            取消
          </Button>
          <Button
            style={{ width: 70, height: 30 }}
            type="primary"
            loading={loading}
            onClick={handleSubmit}
          >
            保存
          </Button>
        </div>
      </Form>

    </Modal>
  );
};

export default connect(({ ops, loading }) => ({
  ops,
  loading: loading.models.ops,
}))(Exchange);