import React, { Component } from 'react'
import lmCss from './lowerListModal.scss'
import { Modal, Load, Scroll } from 'karaui'

export default class LowerListModal extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentDidMount () {

  }

  componentWillReceiveProps (next) {

  }

  render () {
    const {data, showDetailInfoModal, getMoreLower} = this.props
    return data.length > 0 ? (<div className={`${
      data.length <= 5 ? lmCss.minHeight :
        data.length > 5 && data.length <= 10 ? lmCss.midHeight : lmCss.maxHeight } ${lmCss.lowerListDiv}`}>
      <i className={lmCss.topArrow}></i>
      <Scroll onDragEndBottom={getMoreLower} onWheelBottom={getMoreLower} autoHeight={true}>
        <ul className={`${lmCss.lowerList} clearfix`}>
          {
            data.map((v) => {
              return <li key={v.accountId} onClick={() => {showDetailInfoModal(v.accountId)}}>
                <div className={lmCss.headIcon}>
                  <img src={v.headIcon} alt="" width='50px' height='50px'/>
                </div>

                <p>{v.accountName}</p>
              </li>
            })
          }
        </ul>
      </Scroll>
    </div>) : null
  }

}
