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, title, subTitle, filters = [], columns = [], data = [] } = props;
  return (
    <Module style={style} className="list-table">
      <div hidden={!title && !subTitle} className="header">
        <span className="title">{title}</span>
        <span className="sub-title">{subTitle}</span>
      </div>
      <div className="filter">
        <span className="text">筛选</span>
        <div className="filter-list">
          {filters.map(filter => {
            return <div className="filter-item">{getFilter(filter)}</div>;
          })}
        </div>
      </div>
      <Table columns={columns} data={data} />
    </Module>
  );
}
ListTable.propTypes = {};
export default ListTable;
