import React, { useContext, useState, useEffect, useRef } from 'react';
import { connect } from 'umi';
import {
  Form,
  Select,
  Table,
  TreeSelect
} from 'antd';
import utilsStyles from '@/utils/utils.less';
import UserTree from '@/components/Customized/UserTree/clearIndex';
import AreaTree from '@/components/Customized/AreaTree';
import DepartTree from '@/components/Customized/DepartTree';
import customer from './../components/AddEquipTransfer';

const { Option } =Select;

// 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,
//   userTree,
//   ...restProps
// }) => {
//   const [editing, setEditing] = useState(false);
//   const inputRef = useRef();
//   const form = useContext(EditableContext);
//   console.log(`record=============>`, record,`dataIndex==========`,dataIndex);
  
//   // useEffect(() => {
//   //   if (editing) {
//   //     inputRef.current.focus();
//   //   }
//   // }, [editing]);

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

//   const save = async () => {
//     try {
//       const values = await form.validateFields();
//       toggleEdit();
//       handleSave({ ...record, ...values });
//     } catch (errInfo) {
//       console.log('保存失败:', errInfo);
//     }
//   };

//   let childNode = children;
//   console.log(`values is:==========>`, record?.changeAddressId, "=========", record?.changePrincipalId);
//   if (dataIndex === 'changeAddressId') { 
   
//     //变更地区
//      childNode =(<Form.Item
//         style={{
//           margin: 0,
//        }}
//        name={ dataIndex }
//         rules={[
//            {
//             required: true,
//              message: `${title} 不能为空`,
//          },
//          ]}
//   >
//       <AreaTree onChange = { save }  value = { record?.changeAddressId }   />
//   </Form.Item>)
//   } else if (dataIndex === 'changePrincipalId') {
//     //变更负责人
//      childNode =(<Form.Item
//         style={{
//           margin: 0,
//        }}
//        name={dataIndex}
//         rules={[
//            {
//             required: true,
//              message: `${title} 不能为空`,
//          },
//          ]}
//   >
//          <UserTree userTree = { userTree }  onChange = { save } value = { record?.changePrincipalId }  />
//       </Form.Item>)
//   }
 

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

const TableSelectEdit = (props) => {
  const {
    dispatch,
    tableData,
    setTableData,
    optColumns,
    oTableKey,
    customer: {
      customerList
    },
    user: {
      userTree
    } } = props;
  
   const customerListArr = customerList?.list;//客户

  const rowSelection = {
    onChange: () => {
    },
    onSelect: () => {
    },
    onSelectAll: () => {
    },
  };
  // 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];
    newData.splice(index, 1, { ...item, ...row });
    setTableData(newData);
    console.log(`new data is:=============>`, newData);
    dispatch({
      type: 'opsEquip/setModelsState',
      payload: {
        transferListTemp: newData
      }
    });
  };

  const handleRecordAreaSave = (val,record) => {
    console.log(`record handleRecordAreaSave ==========>`, val, record);
    let newRecord = {
      ...record,
      changeAddressId: val && Number(val) || null
    };
    handleSave(newRecord);
  };
  const handleRecordTreeSave = (val,record) => {
    console.log(`handleRecordTreeSave record ==========>`, val, record);
    let newRecord = {
      ...record,
      changePrincipalId: val && Number(val) || null
    };
    handleSave(newRecord);
  }
  const handleRecordTransSave =  (val,record) => {
    let newRecord = {
      ...record,
      transferUserId: val && Number(val) || null
    };
    handleSave(newRecord);
  }
  const handleRecordDepartSave = (val,record) => {
    let newRecord = {
      ...record,
      acceptDepartmentId: val && Number(val) || null
    };
    handleSave(newRecord);
  }
  // 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,
  //       userTree
  //     }),
  //   };
  // });
  const columns = optColumns.map((col) => {
      if (!col.editable) {
      return col;
    } 
    return {
      ...col,
      render: (val, record) => {
        console.log(`record ====>`, record);
        if (col.dataIndex === 'changeAddressId') {
          return <div className={utilsStyles.antFormBlock}>
            <AreaTree value = {record?.changeAddressId} onChange={(val) => { handleRecordAreaSave(val, record) }} oStyle={{ width: '100%', display: 'block' }} />
          </div>
        } else if (col.dataIndex === 'changePrincipalId') {
          console.log('record?.changePrincipalId :>> ', typeof record?.changePrincipalId,record?.changePrincipalId,`userTree is:`,userTree);
            return <div className={ utilsStyles.antFormBlock } >
              <UserTree userTree = { userTree }  value = { record?.changePrincipalId } onChange={(val) => { handleRecordTreeSave( val,record ) }} oStyle={{width:'100%',display:'block'}}  />
            </div>
        } else if (col.dataIndex === 'transferUserName') {
          console.log(`record is:============>`, record);
          //调入客户
          return <div className={utilsStyles.antFormBlock}>
               <Select placeholder='请输入' style={{width:'100%',display:'block'}} value ={ record?.transferUserId } onChange={(val) => { handleRecordTransSave( val,record ) }}>
                    {
                        customerListArr && customerListArr.map(item => (
                            <Option value={item.id} key = { item.id }>{item.name}</Option>
                        ))
                    }
              </Select>
           </div>
        }else if(col.dataIndex === 'acceptDepartmentId'){
          return <div className={utilsStyles.antFormBlock}>
          <DepartTree value = {record?.acceptDepartmentId} onChange={(val) => { handleRecordDepartSave(val, record) }} oStyle={{ width: '100%', display: 'block' }} />
        </div>
        }
      }
    }
  });
  console.log(`columns =====>`, columns);
  const winW = window.innerWidth;
  return (
    <>
      <div style={{ paddingBottom: 70 }}>
        {/* <Table
          rowKey={(record) => record.id}
          components={components}
          rowClassName={(record) => {
            return `editable-row ${record.isAbove ? utilsStyles.aboveTr : ''}`;
          }}
          dataSource={tableData}
          scroll={{
            x: winW < 1400 ? '130%' : '100%',
          }}
          pagination={[]}
          columns={columns}
          className="custom-table-setting"
        /> */}
        <Table
          rowKey={(record) => record.id}
          rowClassName={(record) => {
            return `editable-row ${record.isAbove ? utilsStyles.aboveTr : ''}`;
          }}
          dataSource={tableData}
          scroll={{
            x: winW < 1400 ? '130%' : '100%',
          }}
          key ={ oTableKey }
          pagination={[]}
          columns={columns}
          className="custom-table-setting"
        />
      </div>
    </>
  );
};

export default connect(({ universal, user,opsEquip,customer }) => ({
     universal,opsEquip,customer,
     user,
}))(TableSelectEdit);