import React, { useState, useEffect } from 'react';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import {
  Radio,
  Modal,
  Form,
  Input,
  Button,
  Select,
  InputNumber,
  DatePicker,
  Alert,
  TreeSelect,
  Space,
  Spin
} from 'antd';
import ProForm, { ProFormDatePicker, ProFormSelect, ProFormText } from '@ant-design/pro-form';
import { getproductpage } from '../services';

const CreateForm = (props) => {
  const [form] = Form.useForm();
  const { Option, OptGroup } = Select;
  const [productList, setProductList] = useState([]);
  const [productListAll, setProductListAll] = useState([]);
 

  //初始化数据
  useEffect(() => {
    const initproductList = async (value) => {
      var data = (await getproductpage({ current: 1, pageSize: 10000000 })).data;
      if (data.data) {
        var list = [];
        data.data.forEach((element) => {
          list.push({
            key: element.code,
            name: element.name,
            id:element.id
          });
        });
        setProductListAll(list);
        setProductList(list);
      }
    };
    initproductList();
  }, []);





  const formItemLayout = {
    labelCol: {
      //sm: { span: 8 },
    },
    wrapperCol: {},
  };
  const onTimeTypeChange = (value) => { };

  function onSearch(val) {
    var list = [];
   
  }
  return (
    <Modal
      title={props.values.id ? '编辑会员信息' : '新建会员信息'}
      width={870}
      maskClosable={false}
      visible={props.createModalVisible}
      // bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null} //底部内容
      //取消
      onCancel={() => {
        props.onCancel();
      }}
      //关闭时销毁 Modal 里的子元素
      destroyOnClose
    >
      <Form
        form={form}
        labelCol={{ span: 3 }}
        // wrapperCol={ {span: 12} }
        preserve={false}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="shelfNo" hidden={true}>
          <Input />
        </Form.Item>

        <Form.Item name="orgId" label="采购机构" rules={[{ required: true }]}>
          <TreeSelect
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={props.orgTreeList}
            placeholder="请选择入库机构"
            treeDefaultExpandAll
          />
        </Form.Item>

        <Form.Item name="receivingTel" label="收货人电话" rules={[{ required: true, max: 20 }]}>
          <Input placeholder="" />
        </Form.Item>

        <Form.Item name="receivingUser" label="收货人" rules={[{ required: true, max: 20 }]}>
          <Input placeholder="" />
        </Form.Item>

        <Form.Item name="receivingAddress" label="收货地址" rules={[{ required: true, max: 300 }]}>
          <Input placeholder="" />
        </Form.Item>

        <Form.Item name="supplierId" label="供应商" rules={[{ required: true }]}>
          <Select
            showSearch
            placeholder="请选择供应商"
            optionFilterProp="children"
            onChange={(value) => { }}
          >
            {props?.supplierList?.map((item, index) => {

              return (
                <Select.Option index={index} value={item.id} key={item.id}>
                  {item.name}
                </Select.Option>
              );

              <Select.Option index={index} value={item.id} key={item.id}>
                {item.name}
              </Select.Option>;
            })}
          </Select>
        </Form.Item>

        <Form.Item name="remark" label="备注" rules={[{  max: 300 }]}>
          <Input placeholder="" />
        </Form.Item>
        <Form.Item name="purchaseOrderEntryList">
          <Form.List
            name="purchaseOrderEntryList"    >
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, fieldKey, ...restField }) => (
                  <Space key={key} align="baseline">
                    <Form.Item
                      style={{ width: '450px' }}
                      {...restField}
                      name={[name, 'barcode']}
                      fieldKey={[fieldKey, 'barcode']}
                      label="条码"
                      rules={[{ required: true }]}
                    >
                      <Select
                        showSearch
                        placeholder="请选择物料条码"
                        optionFilterProp="children"
                        onSearch={onSearch}
                        onPopupScroll={onSearch}
                        onChange={(value) => {
                          var data=productList.find(x=>{
                            if (x.key==value) {
                             return x;
                            }
                          })
                          var newData = form.getFieldsValue().purchaseOrderEntryList;
                          form.setFieldsValue({ purchaseOrderEntryList: [], })
                          newData[key] = { ...newData[key], itemId: data?.id, };
                          form.setFieldsValue({ purchaseOrderEntryList: newData, });
                        }}
                      >
                        {productList.map((item, index) => {
                          return (
                            <Select.Option index={index} value={item.key} key={item.key}>
                              <span style={{ float: 'left' }}>{item.key}</span>
                              <span style={{ float: 'right', color: '#8492a6' }}>{item.name}</span>
                            </Select.Option>
                          );
                        })}
                      </Select>
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'itemId']}
                      fieldKey={[fieldKey, 'itemId']}
                      label=""
                      hidden={true}
                      rules={[{ required: true }]}
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'purchaseQty']}
                      fieldKey={[fieldKey, 'purchaseQty']}
                      label="采购数量"
                    >
                      <InputNumber />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'qty']}
                      fieldKey={[fieldKey, 'qty']}
                      label="数量"
                    >
                      <InputNumber />
                    </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" style={{ float: 'right' }}>
          保存
        </Button>
      </Form.Item>
    </Form>
    </Modal >
  );
};

export default CreateForm;
