import React, { Component } from 'react';

import "./index.css";

const tabbarArr = [

  {

    className: 'icon-gouwuche',

    text: '购物车',

    path: '/catetory'

  },

  {

    className: 'icon-HOMEMESSAGE',

    text: '首页',

    path: '/'

  },

  {

    className: 'icon-yonghu',

    text: '用户',

    path: '/user'

  },

  {

    className: 'icon-lanlvtubiaozhizuomoban-01',

    text: '分类',

    path: '/classify'

  },

]

const TabBar  = (WarppedComponent)=> class Tabbar extends Component {

  static displayName = `Tabbar(${WarppedComponent.displayName || WarppedComponent.name })`;

  tabbarChange(i){

    const  { path } = tabbarArr[i]

    this.props.history.push(path)

  }

  render () {

    const { path } = this.props.match;

    return (

      <div>

        <div className="showContent"> 

          <WarppedComponent {...this.porps}/>

        </div>

        <div className={ 'Tablebar' }>

          {

            tabbarArr.map((item,i)=> (

              <div className={"taber-item"  + (path === item.path ? ' active-tabar' : '')} key={i}>

                <div className={ 'iconfont ' + item.className} style={{"fontSize":"20px"}} onClick={()=> this.tabbarChange(i)}></div>

                <div>{item.text}</div>

              </div>

            ))

          }

        </div>

      </div>

    )

  }

}

export default TabBar