import React from 'react';
import { Row, Col } from '@easyv/antd';
import { Checkbox } from '@easyv/react-gui';
import classNames from 'classnames';
import styles from './filter-list.less';

const FilterList = ({ data, onClick, onChange }) => {
  const newData = data.splice(0, 4).reduce((pre, cur, index) => {
    if (index < 3) {
      return [...pre, cur];
    }
    return [...pre, { name: '查看更多', id: cur.id }];
  }, []);
  return (
    <div>
      <Row gutter={5}>
        {newData.map((e, i) => (
          <Col key={e.id} className={styles.colItem} span={12}>
            <div
              title={e.name}
              className={styles.tag}
              onClick={(event) => {
                onClick(event, i, e);
              }}>
              {i < 3 && <Checkbox checked={e.enable} onChange={(event) => onChange(event, e)} />}
              <p className={classNames(styles.name, !e.enable && styles.selectName)}>{e.name}</p>
            </div>
          </Col>
        ))}
      </Row>
    </div>
  );
};
export default FilterList;
