import { CloseCircleOutlined,PlusOutlined } from '@ant-design/icons';
import { Modal, Col, Popover, Row,Select, Button,Divider,Space,Input,message } from 'antd';
import { useState, useEffect,useRef } from 'react';
import ProForm, { ProFormSelect, ProFormText,ProFormDigit } from '@ant-design/pro-form';
import { EditableProTable } from '@ant-design/pro-table';
import styles from './style.less';
import api from '../service'
const fieldLabels = {
  name: '物料名称',
  stockUint: '物料单位',
  specs: '物料规格',
  code: '物料编码',
  aittribute: '物料属性',
  typeID: '物料分类',
  status: '物料状态',
  price: '成本价',
  netrecovery: '净料率(%)',
  OutstockUint: '出库单位',
  proportion: '换算比例(%)',
  foreignKeyRe:'关联外键'
};

const defaultData = [];
const CreateForm = (props) => {
  const { modalVisible, onCancel } = props;
  const formRef = useRef();
  const [editableKeys, setEditableRowKeys] = useState(() => defaultData.map((item) => item.id));
  const [Code, setCode] = useState();
  const [dataSource, setDataSource] = useState(() => defaultData);
  const [items, setItems] = useState([]);
  const [itemsuity, setitemsuity] = useState([]);
  const [name, setName] = useState('');
  const [uityname, setuityname] = useState('');
  const inputRef = useRef(null);
  const inputuityRef = useRef(null);
  const getTableInfo = () => {
    if (props.values.membersList != undefined) {
      setEditableRowKeys(props.values.membersList.map((item) => item.id));
      setDataSource(props.values.membersList);
    }
  };
  useEffect(() => {
    getTableInfo();
    console.log("props.uintListData",props.uintListData)
    setItems(props.typeListData)
    setitemsuity(props.uintListData)
  }, [modalVisible,props.typeListData,props.uintListData]);

  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: 'key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '条码',
      dataIndex: 'code',
      width: '30%',
      formItemProps: {
        rules: [
          {
            required: true,
            whitespace: true,
            message: '物料编码',
          },
          {
            max: 8,
            whitespace: true,
            message: '最长为 8 位',
          },
          {
            min: 4,
            whitespace: true,
            message: '最小为 4 位',
          },
        ],
      },
    },
    {
      title: '包装单位',
      key: 'packUnit',
      dataIndex: 'packUnit',
      valueType: 'select',
      fieldProps: {
        options: props.uintListData,
      },
      formItemProps: {
        rules: [
          {
            required: true,
            whitespace: true,
            message: '包装单位',
          },
        ],
      },
    },
    {
      title: '比例',
      dataIndex: 'proportion',
      valueType: 'digit',
      formItemProps: {
        rules: [
          {
            required: true,
            whitespace: true,
            message: '换算比例',
          },
        ],
      },
    },
    {
      title: '操作',
      valueType: 'option',
      width: 250,
    },
  ];
  const onNameChange = (event) => {
    setName(event.target.value);
  };
  const onNameuityChange=(event)=>{
    setuityname(event.target.value)
  }
  const addItem = (e) => {
    e.preventDefault();
    if(name.length==0){
      message.error("请输入名称");
     }else{
      var parm={name:name}
      api.addbatchingtype(parm).then((res)=>{
        if(res.succeeded){
          message.success('添加成功');
          props.initTypeList();
          setName('');
        }else{
          message.error(res.errors);
        }
      })
     }
    
  };
  const addItemuity = (e) => {
    e.preventDefault();
   
    if(uityname.length==0){
      message.error("请输入名称");
     }else{
      var parm={name:uityname}
      api.addbatchinguint(parm).then((res)=>{
        if(res.succeeded){
          props.initUintList()
          setuityname('');
          message.success('添加成功');
        }else{
          message.error(res.errors);
        }
      })
    }
  };
  return (
    <Modal
      destroyOnClose
      title={props.values.id ? '编辑物料' : '新建物料'}
      width={1000}
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
      maskClosable={false}
    >
      <ProForm
        layout="horizontal"
        hideRequiredMark
        formRef={formRef}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Row gutter={16}>
          <Col lg={12} md={12} sm={24}>
            <ProFormText
              label={fieldLabels.code}
              name="code"
              rules={[
                {
                  required: true,
                  max: 50,
                },
              ]}
              placeholder="请输入原料编码"
              onChange={(item) => {
                setCode(item.target.value);
              }}
            />
          </Col>
          <Col lg={12} md={12} sm={24}>
            <ProFormText name="id" hidden={true} />
            <ProFormText
              label={fieldLabels.name}
              name="name"
              rules={[
                {
                  required: true,
                  max: 50,
                },
              ]}
              placeholder="请输入原料名称"
            />
          </Col>
          {/* <Col lg={8} md={12} sm={24}>
            <ProFormText
              label={fieldLabels.specs}
              name="specs"
              rules={[
                {
                  required: true,
                  max: 500,
                },
              ]}
              placeholder="请输入规格型号"
            />
          </Col> */}
        </Row>
        
        {/* <Row gutter={16}>
          <Col lg={8} md={12} sm={24}>
            <ProFormSelect
              label={fieldLabels.aittribute}
              name="aittribute"
              rules={[
                {
                  required: true,
                  message: '请选择物料属性',
                },
              ]}
              options={[
                {
                  value: '0',
                  label: '成品',
                },
                {
                  value: '1',
                  label: '半成品',
                },
                {
                  value: '2',
                  label: '易耗品',
                },
              ]}
              placeholder="请选择物料属性"
            />
          </Col>
          <Col lg={8} md={12} sm={24}>
            <ProFormDigit
              label={fieldLabels.price}
              name="price"
              placeholder="请输入成本价"
              min={1}
            />
          </Col>
          <Col lg={8} md={12} sm={24}>
          <ProFormDigit
              label={fieldLabels.netrecovery}
              name="netrecovery"
              min={1}
              max={100}
              placeholder="请输入净料率"
            />
          </Col>
        </Row> */}
        <Row gutter={16}>
          <Col lg={12} md={12} sm={24}>
           
            <ProFormSelect
              label={fieldLabels.typeID}
              name="typeID"
            style={{width: '100%',}}
            showSearch
            rules={[
              {
                required: true,
                message: '请选择物料分类',
              },
            ]}
            placeholder="请选择物料分类"
            fieldProps={{
            dropdownRender:(menu) => (
              <>
              {menu}
              <Divider
                style={{
                  margin: '8px 0',
                }}
              />
              <Space
                style={{
                  padding: '0 8px 4px',
                }}
            >
            <Input
              placeholder="请输入物料分类"
              ref={inputRef}
              value={name}
              onChange={onNameChange}
              onKeyDown={(e) => e.stopPropagation()}
            />
            <Button type="text" icon={<PlusOutlined />} onClick={addItem}>
              添加
            </Button>
          </Space>
        </>
            )
              }}
          options={items}
    />
          </Col>
          <Col lg={12} md={12} sm={24}>
      
            <ProFormSelect
             label={fieldLabels.stockUint}
             name="stockUint"
             showSearch
             rules={[
               {
                 required: true,
                 message: '请选择单位',
               },
             ]}
            style={{width: '100%',}}
            placeholder="请选择物料单位"
            fieldProps={{
            dropdownRender:(menu) => (
              <>
              {menu}
              <Divider
                style={{
                  margin: '8px 0',
                }}
              />
              <Space
                style={{
                  padding: '0 8px 4px',
                }}
            >
            <Input
              placeholder="请输入物料单位"
              ref={inputuityRef}
              value={uityname}
              onChange={onNameuityChange}
              onKeyDown={(e) => e.stopPropagation()}
            />
            <Button type="text" icon={<PlusOutlined />} onClick={addItemuity}>
              添加
            </Button>
          </Space>
        </>
          )
              }}
      options={itemsuity}
    />
          </Col>
          {/* <Col lg={8} md={12} sm={24}>
            <ProFormSelect
              label={fieldLabels.OutstockUint}
              name="outstockUint"
              rules={[
                {
                  required: true,
                  message: '请选择出库单位',
                },
              ]}
              request={async () => itemsuity}
              placeholder="请选择出库单位"
            />
          </Col> */}
          {/* <Col lg={8} md={12} sm={24}>
          <ProFormDigit
              label={fieldLabels.proportion}
              name="proportion"
              rules={[
                {
                  required: true,
                  message: '请输入出入库换算比例',
                },
              ]}
              placeholder="请输入换算比例"
            />
          </Col> */}
          {/* <Col lg={8} md={12} sm={24}>
            <ProFormSelect
              label={fieldLabels.status}
              name="status"
              rules={[
                {
                  required: true,
                  message: '请选择状态',
                },
              ]}
              options={[
                {
                  value: '0',
                  label: '正常',
                },
                {
                  value: '1',
                  label: '停用',
                },
              ]}
              placeholder="请选择状态"
            />
          </Col> */}
          {/* <Col lg={8} md={12} sm={24}>
            <ProFormText
              label={fieldLabels.foreignKeyRe}
              name="foreignKeyRe"
              placeholder="请输入关联外键"
            />
          </Col> */}
        </Row>
        {/* <ProForm.Item name="membersList" trigger="onValuesChange">
          <EditableProTable
            rowKey="id"
            toolBarRender={false}
            columns={columns}
            recordCreatorProps={{
              newRecordType: 'dataSource',
              record: () => ({
                id: Date.now(),
              }),
            }}
            editable={{
              type: 'multiple',
              editableKeys,
              onChange: setEditableRowKeys,
              actionRender: (row, _, dom) => {
                return [dom.delete];
              },
            }}
          />
        </ProForm.Item> */}
      </ProForm>
    </Modal>
  );
};

export default CreateForm;
