import React, { Component } from 'react';
import './index.less';
import CheckboxItem from '../CheckboxItem';
import Icon from '../Icon';

export default class UserTable extends Component {
  onChange() {
    if (this.props.onChange) this.props.onChange();
  }

  onSelect(checked, key) {
    const { selectList = [] } = this.props;
    if (checked) {
      selectList.push(key);
    } else {
      selectList.splice(selectList.indexOf(key), 1);
    }
    if (this.props.onSelect) this.props.onSelect(selectList);
  }

  render() {
    const { columns = [], rowKey = 'key', data = [], select, selectList = [] } = this.props;
    return (
      <div className="user-table">
        <table>
          <thead>
            <tr>
              {select && <th className="select" />}
              {columns.map(item => {
                return <th>{item.title}</th>;
              })}
            </tr>
          </thead>
          <tbody>
            {data.map(row => {
              const checked = selectList.indexOf(row[rowKey]) >= 0;
              return (
                <tr>
                  {select && (
                    <td className="select">
                      <CheckboxItem
                        theme="white"
                        checked={checked}
                        onClick={value => this.onSelect(value, row[rowKey])}
                      />
                    </td>
                  )}
                  {columns.map(item => {
                    return <td>{item.render ? item.render(row[item.key], row) : row[item.key]}</td>;
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
        {data.length === 0 && <div className="empty">暂无数据</div>}
        {data.length > 0 && (
          <div className="page">
            <Icon name="prev" />
            <span>
              <b>1</b>/10
            </span>
            <Icon name="next" />
          </div>
        )}
      </div>
    );
  }
}