import React, { useContext, useState, useEffect, useRef } from 'react';
import { Form, Input, Select, Button, Table, InputNumber } from 'antd';
const EditableContext = React.createContext();
const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};

const EditableCell = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef();
  const form = useContext(EditableContext);
  useEffect(() => {
    if (editing) {
      inputRef.current.focus();
    }
  }, [editing]);

  const toggleEdit = () => {
    setEditing(!editing);
    form.setFieldsValue({
      [dataIndex]: record[dataIndex],
    });
  };

  const save = async (e) => {
    try {
      const values = await form.validateFields();
      toggleEdit();
      handleSave({ ...record, ...values });
    } catch (errInfo) {
      console.log('Save failed:', errInfo);
    }
  };

  let childNode = children;

  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{
          margin: 0,
        }}
        name={dataIndex}
        rules={[
          {
            required: true,
            // message: `${title} 不能为空`,
            help: ''
          },
        ]}
      >
        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
      </Form.Item>
    ) : (
        <div
          className="editable-cell-value-wrap"
          style={{
            padding: '4px 14px',
            background: '#ffffff',
            border: '1px solid #cbcbcb',
            lineHeight: '22px'
          }}
          onClick={toggleEdit}
        >
          {children}
        </div>
      );
  }

  return <td {...restProps}>{childNode}</td>;
};

const EditableTable = (props) => {
  const { tableData, setTableData, optColumns, pagination , selectRow , totalMoney , loading , tableProps} = props;
  const components = {
    body: {
      row: EditableRow,
      cell: EditableCell,
    },
  };
  const handleSave = (row) => {
    const newData = [...tableData];
    const index = newData.findIndex((item) => row.key === item.key);
    const item = newData[index];
    item.numberOfMaterials = row.numberOfMaterials
    newData.splice(index, 1, { ...item, ...row });
    setTableData(newData);
    props.editAction(item)
  };

  const columns = optColumns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      })
    };
  });
  // 表格项选中
  const [selectedRowKey , setSelectedRowKey] = useState([])
  const onSelectChange = (selectedRowKeys, selectedRows) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys , selectedRows);
    setSelectedRowKey(selectedRowKeys)
    selectRow(selectedRows)
  };
  const rowSelection = {
    selectedRowKey,
    onChange: onSelectChange,
    fixed: true
  };
  return <>
    <Table
      rowKey={record => record.id}
      components={components}
      rowSelection={rowSelection}
      rowClassName={() => 'editable-row'}
      dataSource={tableData}
      pagination={pagination}
      columns={columns}
      // size="small"
      className='custom-table-setting'
      scroll={{
        x: 1300
      }}
      {...tableProps}
      loading={loading}
      footer={() => {
        return (
            <div
                style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}
            >
                <span style={{ fontSize: 14 }}>
                    已选择<span style={{ margin: '0 10px', color: '#5ca6f3' }}>{selectedRowKey.length}</span>项
                  </span>
                <span style={{ marginLeft: 60 }}>总价格：{totalMoney || ''}</span>
            </div>
        );
    }}
    />
  </>
}
export default EditableTable;