
import React from 'react'
import './style.less'

export default (props) => {
  const { extClass = '', current, onChange, children } = props

  const handleTabChange = (e, index) => {
    if (e) {
      e.detail = {
        ...e.detail || {},
        index,
      }
      // Object.assign(e.detail, { index })
    }

    if (onChange) {
      onChange(e)
    }
  }

  const className = `weui-tabbar cust-tabbar ${extClass}`

  return (
    <view className={className}>
      {
        React.Children.toArray(children).map((child, index) => {
          const itemClass = `weui-tabbar__item cust-tabbar-item`

          return (
            <view className={itemClass} onClick={(e) => handleTabChange(e, index)}>
              {child}
            </view>
          )
        })
      }
    </view>
  )
}
