import React from 'react';
import './index.less';
import Module from '../Module';
import Table from '../Table';
import Radio from '../RadioButton';
import Select from '../Select';

function getFilter(filter) {
  switch (filter.type) {
    case 'radio':
      return <Radio {...filter} />;
    case 'select':
      return <Select {...filter} />;
    default:
      return '';
  }
}

function ListTable(props) {
  const { style, position, title, rightAction, filters = [], columns = [], data = [] } = props;
  return (
    <Module style={style} className="list-table">
      {title && (
        <div className="header">
          <span className="title">{position}</span>
          <span className="sub-title">{title}</span>
        </div>
      )}
      {filters.length > 0 && (
        <div className="filter">
          <span className="text">筛选</span>
          <div className="filter-list">
            {filters.map(filter => {
              return <div className="filter-item">{getFilter(filter)}</div>;
            })}
          </div>
          <div className="right-action">{rightAction}</div>
        </div>
      )}
      {data && data.length > 0 && <Table columns={columns} data={data} />}
    </Module>
  );
}
ListTable.propTypes = {};
export default ListTable;