import React, { useContext, useState, useEffect, useRef } from 'react';
import {
  Form,
  Card,
  Tabs,
  Badge,
  Spin,
  Row,
  Col,
  Input,
  Select,
  Button,
  Table,
  InputNumber,
  message,
  Alert,
} from 'antd';
import { DownloadOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons';
import OperateFooterBar from '@/components/Table/OperateFooterBar';
import utilsStyles from '@/utils/utils.less';
import { isInteger } from '@/utils/common';
import { connect, history } from 'umi';
import style from '../index.less'
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('保存失败:', errInfo);
    }
  };

  let childNode = children;

  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{
          marginBottom: 0,
        }}
        name={dataIndex}
        className={style.explain_error}
        help=''
        rules={[
          {
            required: true,
            message: `${title} 不能为空`,
          },
        ]}
      >
        <InputNumber ref={inputRef} onPressEnter={save} onBlur={save} placeholder="请输入数量" style={{width: '100%'}}/>
      </Form.Item>
    ) : (
      <div
        className="editable-cell-value-wrap"
        style={{
          padding: '4px 14px',
          lineHeight: '22px',
          border: '1px solid #cbcbcb',
          textAlign: 'center',
        }}
        onClick={toggleEdit}
      >
        {children}
      </div>
    );
  }

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

const TableEditHasCode = (props) => {
  const { 
    tableData, 
    setTableData, 
    optColumns, 
    setSelectedKeys, 
    hasFooter , 
    selectedRowKeys , 
    totalMoney , 
    setSelectedRow
  } = props;
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      setSelectedKeys(selectedRowKeys)
      setSelectedRow(selectedRows)
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  };
  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];
    //这里需要修改字段
    if (!isInteger(row.num)) {
      message.info('需求数量必须是正整数!', 1.5);
      return false;
    }
    row.isAbove = parseInt(row.num) > parseInt(row.i) ? true : false; //判断是否有没有超过库存的数字
    newData.splice(index, 1, { ...item, ...row });
    console.log(`best newData is:`, newData);
    setTableData(newData);
  };

  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: handleSave,
      }),
    };
  });
  const handleClose = {};
  const handleSubmit = {};
  const winW = window.innerWidth;
  return (
    <>
      <div style={{ paddingBottom: 20 }}>
        <Table
          rowKey={(record) => record.id}
          rowSelection={{ ...rowSelection }}
          components={components}
          rowClassName={(record, index) => {
            return `editable-row ${record.isAbove ? utilsStyles.aboveTr : ''}`;
          }}
          dataSource={tableData}
          scroll={{
            x: winW < 1400 ? '130%' : '105%',
          }}
          pagination={[]}
          columns={columns}
          className="custom-table-setting"
          footer={hasFooter && (() => {
            return (
              <div
                style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
              >
                <div className="spaceLeft">
                  <span style={{ fontSize: 14 }}>
                    已选数量<span style={{ margin: '0 10px', color: '#5ca6f3' }}>{(selectedRowKeys && selectedRowKeys.length) || 0}</span>项
                  </span>
                  <span style={{ marginLeft: 60 }}>{`总价格：${totalMoney || 0}`}元</span>
                </div>
                {/* <div className="spaceRight">
                  <Alert
                    type="warning"
                    message="物料超出库存的部分进入采购阶段请耐心等待"
                    showIcon
                  />
                </div> */}
              </div>
            );
          })}
        />
      </div>
      {/* <OperateFooterBar handleClose={handleClose} handleSubmit={handleSubmit} /> */}
    </>
  );
};

export default connect(({ ware, loading }) => ({
  ware,
  loading
}))(TableEditHasCode);