import React from 'react'
import _ from 'lodash'
import css from './tab.scss'
import {Scroll} from "karaui"

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

  getNav = () => {
    const {data, active, onClick} = this.props;
    const li = data.map((v) => {
      return <li
        key={v.type}
        className={v.type === active ? 's-b-primary' : css.normal}
        onClick={() => {
          onClick(v.type)
        }}
      >
        {v.title}
        {/*超过99条显示99+*/}
        {v.count > 0 ? v.count > 99 ? <em className={`${v.title.length === 3 ? css.lang : ''} s-hint`}>99+</em> :
          <em className={`${v.title.length === 3 ? css.lang : ''} s-hint`}>{v.count}</em> : null}
      </li>
    })

    return <div className={`${css.nav} s-bg-panel-title s-b-default`}>
      <ul className="clearfix">
        {li}
      </ul>
    </div>
  }


  getPanel = () => {
    const {data, active, getMoreData, clickTime, msgType} = this.props;
    //在data中找到type与active相等的数据，取它的child显示到页面
    const find = _.find(data, ['type', active]);
    return <div className={`${css.panel} clearfix`}>
      <Scroll onDragEndBottom={() => {
        getMoreData(active)
      }} onWheelBottom={() => {
        getMoreData(active);
      }}>
        {/**/}
        {find ? find.child : null}
      </Scroll>
    </div>
  }

  render() {
    return (
      <div className={css["ks-tab"]}>
        {this.getNav()}
        {this.getPanel()}
      </div>
    )
  }
}