import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, InputNumber, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const CreateForm = (props) => {

  console.log(props.values);

  return (
    <Modal
      title={props.values.id ? '编辑' : '新建'}
      width={700}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Form
        layout="vertical"
        preserve={false}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>


        <Form.Item name="orgId" label={'选择机构'} rules={[{ required: true }]}>
          <Select disabled={props.values.id ? true : false}>
            {props.orgArray.map((item, index) => {
              return (
                <Select.Option index={index} value={item.id} key={item.id}>
                  {item.text}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>

        <Form.Item label="选择物料">
          <Form.List name="productList">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, fieldKey, ...restField }) => (
                  <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">

                    <Form.Item
                      {...restField}
                      name={[name, 'productId']}
                      fieldKey={[fieldKey, 'productId']}
                      label={'选择物料'}
                      rules={[{ required: true }]}>
                      <Select style={{ width: 150 }}
                        showSearch
                        optionFilterProp="children" >
                        {props.productArray.map((item, index) => {
                          return (
                            <Select.Option index={index} value={item.stockUint} key={item.id}>
                              {item.text}
                            </Select.Option>
                          );
                        })}
                      </Select>
                    </Form.Item>

                    <Form.Item
                      {...restField}
                      name={[name, 'stockQty']}
                      fieldKey={[fieldKey, 'stockQty']}
                      label="库存数量"
                      rules={[{ required: true }]}>
                      <InputNumber step={1} min={0} max={1000} style={{ width: 150 }} />
                    </Form.Item>

                    <Form.Item
                      {...restField}
                      name={[name, 'code']}
                      fieldKey={[fieldKey, 'code']}
                      label="物料编码"
                      rules={[{ required: true, max: 64 }]}>
                      <Input placeholder="物料条码" style={{ width: 300 }} />
                    </Form.Item>
                    <MinusCircleOutlined onClick={() => remove(name)} />
                  </Space>
                ))}

                <Form.Item>
                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                    添加
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
