/**

 * TabBar 组件

 */

import React ,{ PureComponent } from 'react';

import classNames from 'classnames';

import { Link } from 'react-router-dom';

import {menuData} from '../../common/menu';

import 'antd-mobile/lib/tab-bar/style/index.css';

import 'antd-mobile/lib/badge/style/index.css';

import Styles from './index.less';

class WxTabBar extends PureComponent {

  state = {

    selectedTab: 'home',

    hidden: false

  }

  changeTab = (tab) => {

    this.setState({

      selectedTab: tab

    })

  }

  // 监听 props 的变化

  componentWillReceiveProps(nextProps){

    let pathName = nextProps.location.pathname;

    if(pathName === '/home' || pathName === '/classify' || pathName === '/shopcar' || pathName === '/me'){

      this.setState({

        hidden:false,

        selectedTab:pathName.substring(1)

      });

    }else{

      this.setState({

        hidden:true

      });

    }

  }

  render(){

    return (

      <div style={{'display': this.state.hidden ? 'none' : 'block'}} className={classNames({

        'am-tabs-tab-bar-wrap':true,

      },Styles.container)}>

        <div className="am-tab-bar-bar" style={{backgroundColor:"white"}}>

          {

            menuData.map(item => (

              <div key={item.key} className="am-tab-bar-tab">

                <Link to={item.path} onClick={this.changeTab.bind(this,item.key)}>

                  <div className="am-tab-bar-tab-icon">

                    <span className="am-badge am-tab-bar-tab-badge tab-badge">

                      {

                        this.state.selectedTab === item.key?

                        <div style={{width: "22px", height: "22px", background: `url(${item.selectedIcon}) center center / 21px 21px no-repeat`}}></div>

                        :

                        <div style={{width: "22px", height: "22px", background: `url(${item.icon}) center center / 21px 21px no-repeat`}}></div>

                      }

                      {/* <sup className="am-badge-text">1</sup> */}

                    </span>

                  </div>

                  <p className="am-tab-bar-tab-title" style={{color: this.state.selectedTab === item.key?item.tintColor:item.unselectedTintColor}}>{item.name}</p>

                </Link>

              </div>

            ))

          }

        </div>

      </div>

    )

  }

}

export default WxTabBar;

.container{

  position: fixed;

  left: 0px;

  bottom: 0px;

  width: 100%;

  background-color: #fff;

  box-sizing: border-box;

}

/**

 * 菜单栏 数据

 */

// 主页

import home1 from '../assets/home1.png'

import home2 from '../assets/home2.png'

// 分类

import sort1 from '../assets/sort1.png'

import sort2 from '../assets/sort2.png'

// 购物车

import shopcar1 from '../assets/shopcar1.png'

import shopcar2 from '../assets/shopcar2.png'

// 我的

import me1 from '../assets/me1.png'

import me2 from '../assets/me2.png'

/**

 * tabbar菜单

 */

const menuData = [

  {

    name:'主页',

    key:'home',

    path:'/home',

    icon: home1,

    selectedIcon:home2,

    unselectedTintColor:"#949494",

    tintColor:"#33A3F4",

  },

  {

    name:'分类',

    key:'classify',

    path:'/classify',

    icon: sort1,

    selectedIcon:sort2,

    unselectedTintColor:"#949494",

    tintColor:"#33A3F4",

  },

  {

    name:'购物车',

    key:'shopcar',

    path:'/shopcar',

    icon: shopcar1,

    selectedIcon:shopcar2,

    unselectedTintColor:"#949494",

    tintColor:"#33A3F4",

  },

  {

    name:'我的',

    key:'me',

    path:'/me',

    icon: me1,

    selectedIcon:me2,

    unselectedTintColor:"#949494",

    tintColor:"#33A3F4",

  },

]

export {

  menuData

} 

<WxTabBar {...this.props} />