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

const defaultData = [];
const CreateForm = (props) => {
  const { modalVisible, onCancel } = props;

  const [editableKeys, setEditableRowKeys] = useState(() => defaultData.map((item) => item.id));
  const [Code, setCode] = useState();
  const [dataSource, setDataSource] = useState(() => defaultData);
  const getTableInfo = () => {
    if (props.values.membersList != undefined) {
      setEditableRowKeys(props.values.membersList.map((item) => item.id));
      setDataSource(props.values.membersList);
    }
  };
  useEffect(() => {
    getTableInfo();
  }, [modalVisible]);

  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,
    },
  ];

  return (
    <Modal
      destroyOnClose
      title={props.values.id ? '编辑物料' : '新建物料'}
      width={1000}
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
      maskClosable={false}
    >
      <ProForm
        layout="horizontal"
        hideRequiredMark
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Row gutter={16}>
          <Col lg={8} 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={8} 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={8} md={12} sm={24}>
            <ProFormSelect
              label={fieldLabels.typeID}
              name="typeID"
              rules={[
                {
                  required: true,
                  message: '请选择物料类别',
                },
              ]}
              request={async () => props.typeListData}
              placeholder="请选择物料类别"
            />
          </Col>
          <Col lg={8} md={12} sm={24}>
            <ProFormSelect
              label={fieldLabels.stockUint}
              name="stockUint"
              rules={[
                {
                  required: true,
                  message: '请选择单位',
                },
              ]}
              request={async () => props.uintListData}
              placeholder="请选择单位"
            />
          </Col>
          <Col lg={8} md={12} sm={24}>
            <ProFormSelect
              label={fieldLabels.OutstockUint}
              name="outstockUint"
              rules={[
                {
                  required: true,
                  message: '请选择出库单位',
                },
              ]}
              request={async () => props.uintListData}
              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>
        </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;
