import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import * as config from '../config.js';
const $ = require('jquery');
$.DataTable = require('datatables.net');


let td = null;

class dataTable extends PureComponent {
    render() {
        const { columnsData } = this.props;
        return (
            <div>
                <table ref={el => this.el = el} className="table table-bordered table-hover table-striped w-100">
                    {/* <thead dangerouslySetInnerHTML={{__html: this.props.thead}} />  */}
                    <thead>
                        <tr>
                            {
                                columnsData.map((item,index) => {
                                    //console.log(item.get('联系人'));
                                    return (<th key={index}>{item.get('columnsName')}</th>)
                                })
                            }
                        </tr>
                    </thead>
                </table>
            </div>
        );
    }

    componentDidMount() {
        this.props.onRef(this)
        this.$el = $(this.el);
        td = this.$el.DataTable(
            {
                ordering: false,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: true,
                info: false,
                searching: true,
                dom: 'lBrtip',
                lengthChange: false,
                'ajax': {
                    url: config.CLD2API + this.props.url,
                    type: 'get',
                    // "dataSrc": "list"
                },
                columns: this.props.columns,
            }
        );

        // td2.clear();
        //console.log(td2.search('123', false, false));

        //td2.row.add({ 'DT_RowId': '0', 'clientname': '21dd23' });
        //td2.draw();
        //console.log($.DataTable.column(2));
        //this.$el.dataTable().search('123').draw();
        //dt.search('123').draw();
    }

    handleSearch(filter) {
        td.search(JSON.stringify(filter)).draw();
        // console.log(value);
    }
}

const mapStateToProps = (state) => {
    return {
    }
}

const mapDispathToProps = (dispatch) => {
    return {
    }
}


export default connect(mapStateToProps, mapDispathToProps)(dataTable);
//export default dataTable;
