import React, {Component} from 'react'
import css from './group.scss'
import Panel from '../../../common/panel/panel'
import Item from './item'

class Group extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  getItem = () => {
    const {listArr = [], lang, history, closeSearchModal} = this.props
    if (listArr.length === 0) {
      return null
    }
    const li = listArr.map((v, i) => {
      return <Item key={i} data={v} lang={lang} history={history} closeSearchModal={closeSearchModal}/>
    })
    return <ul className={`${css.list} clearfix`}>
      {li}
    </ul>
  }

  onMore = () => {

  }

  render() {
    const {data: {count = 0}, lang, onMore, isLast, isFixed} = this.props
    if (count === 0) {
      return null
    }
    return (<Panel className={css['ks-group']} title={`${lang.msgGroup}（${count > 99 ? "99+" : count}${lang.item}）`}
                   onMore={onMore} isLast={isLast ? isLast : null}
                   lang={lang} isFixed={isFixed ? isFixed : null}>
      {this.getItem()}
    </Panel>)
  }

}

export default Group;