import React, { useState, useEffect } from 'react';
import { InputNumber, Modal, Form, Input, Button, Select } from 'antd';
import { GetBatchingAsync,GetProductListByBom,getloc } from '../services';

const CreateForm = (props) => {
  console.log("设备库存",props.DeviceId);
  const { Option, OptGroup } = Select;
  const [batchingList, setBatchingList] = useState([]);
  const [loc, setloc] = useState([]);
  //原料
  //初始化数据
  useEffect(() => {
    const initBatching = () => {
      getloc(props.deviceKey).then((data) => {
        //
        setloc(data.data);
      });
    if(props.isbom){
      GetProductListByBom({ DeviceId: props.DeviceId,BomIds:props.bomIds }).then((data) => {
        setBatchingList(data.data);
      });

    }else {
      GetBatchingAsync({ DeviceId: props.DeviceId }).then((data) => {
        setBatchingList(data.data);
      });
    }

    };
    initBatching();
  }, []);
  return (
    <Modal
      title={props.values.id ? '编辑' : '新建'}
      width={640}
      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="batching_Id"
          label="原料名称"
          rules={[{ required: true, message: '请选择原料名称' }]}
        >
          <Select placeholder="请选择原料名称" showSearch
            optionFilterProp="children"
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }>
            {batchingList?.map((item, index) => {
              return (
                <Select.Option index={index} value={item.id} key={item.id}>
                  {item.name}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          name="batching_Loc"
          label="库存位置"
          rules={[{ required: true }]}
          defaultValue="0"
        >
         <Select placeholder="请选择库存位置" >
            {loc?.map((item, index) => {
              return (
                <Select.Option index={index} value={item.loc} key={item.loc}>
                  {item.loc}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          name="batching_Count"
          label="原料数量"
          rules={[{ required: true }]}
          defaultValue="0"
        >
          <InputNumber min={0} placeholder="请输入原料数量" />
        </Form.Item>

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

export default CreateForm;
