import { Table, Input, Icon, Button, Popconfirm, Popover, Tooltip } from 'antd';
import "./index.less"

export class EditableCell extends React.Component {
  state = {
    value: this.props.value,
    record: this.props.record
  }
  handleChange = (e) => {
    const value = e.target.value;
    this.setState({ value });
    this.props.onChange(value);
  }
  render() {
    const { value } = this.state;
    const { editable } = this.props;
    return (
     
        <div className="editable-cell">
          <div className="editable-cell-input-wrapper">
            {
              editable ? <Input
                type={this.props.type ? this.props.type : "text"}
                value={value}
                onChange={this.handleChange}
              /> : value
            }
          </div>
        </div>
      
    );
  }
}

export default class EditableTable extends React.Component {
  constructor(props) {
    super(props);
    const { columns } = this.props;
    this.columns = columns;
    this.columns.map(item => {
      if (item.editable) {
        item.render = (text, record) => (
          <EditableCell
            type={this.props.type ? this.props.type : "text"}
            value={text}
            record={record}
            onChange={this.onCellChange(record.indexNum, item.dataIndex)}
            editable={this.props.editable}
          />
        )
      }

      if(item.popover) {
        item.render = (text, record) => (
          <Tooltip title={
            <div className="popoverBtnWrapper">
              <i className="icon-coms-Delete popBtnItem" onClick={() => {
this.onItemDelete(record)
}} />
            </div>
          }>
            <div>{text}</div>
          </Tooltip>
        )
      }

      if (item.children) {
        item.children.map(child => {
          if (child.editable) {
            child.render = (text, record) => (
              <EditableCell
                type={this.props.type ? this.props.type : "text"}
                value={text}
                onChange={this.onCellChange(record.indexNum, child.dataIndex)}
                editable={this.props.editable}
              />
            )
          }
        }
        )
      }
    })

  }
  onCellChange = (indexNum, dataIndex) => {
    return (value) => {
      const dataSource = [...this.props.dataSource];
      const target = dataSource.find(item => item.indexNum === indexNum);
      if (target) {
        target[dataIndex] = value;
        this.props.onDataSourceChange(dataSource)
      }

    };
  }

  onItemDelete = (record) => {
    let dataSource = [...this.props.dataSource];
    dataSource = dataSource.filter(item => item.indexNum != record.indexNum)
    dataSource.map((item, index) => {
item.indexNum = index + 1
})
    this.props.onDataSourceChange(dataSource)
  }
  render() {
    const columns = this.columns;
    const { editable } = this.props;
    return (
      <div>
        {
          editable && <div className="operateWrapper">
          <i className="icon-coms-tianjia operateItem" onClick={() => {
 this.props.addItem() 
}} />
        </div>
        }
        <Table columns={this.columns} dataSource={this.props.dataSource} {...this.props} />
      </div>
    );
  }
}