import { ProForm, ProFormDigit, ProFormText } from '@ant-design/pro-components';
import { Col, Row, Space } from 'antd';
import { useEffect, useRef } from 'react';

export default (props) => {
  const { data, type, onFinish, storeTypeDict = [], onCancel } = props;
  const formRef = useRef();
  useEffect(() => {
    if (data) {
      // formRef.current.resetFields();
      formRef.current.setFieldsValue({
        typeId: data.typeName,
        name: data.name,
        unit: data.unit,
        amount: null,
      });
    }
  }, [data]);

  return (
    <ProForm
      formRef={formRef}
      layout={'horizontal'}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 18 }}
      onFinish={onFinish}
      // initialValues={{ type: '1', state: '1' }}
      submitter={{
        searchConfig: {
          resetText: '返回',
        },
        onReset: () => onCancel(),
        render: (props, doms) => {
          return (
            <Row>
              <Col span={8} offset={8}>
                <Space>{doms}</Space>
              </Col>
            </Row>
          );
        },
      }}
    >
      <ProFormText
        name="typeId"
        label="分类"
        disabled={true}
        placeholder="请选择分类"
        allowClear={false}
      />
      <ProFormText
        name="name"
        label="名称"
        placeholder="请输入名称"
        disabled={true}
        allowClear={false}
      />
      <ProFormText
        name="unit"
        label="单位"
        placeholder="请输入单位"
        disabled={true}
        allowClear={false}
      />
      <ProFormDigit
        name="amount"
        label="库存"
        addonBefore={type === 'out' ? '-' : '+'}
        placeholder="请输入库存"
        fieldProps={{ precision: 0 }}
        rules={[{ required: true, message: '请输入库存' }]}
      />
    </ProForm>
  );
};
