import React from 'react'

import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';

class menu extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.onPress = this.onPress.bind(this);
    }

    onPress(item) {
        this.setState({ selected: item })
    }

    render(match) {
        let { selected = 'home' } = this.state;
        return (
            <div className='tabbar'>
                <TabBar >
                    <TabBar.Item
                        title="首页"
                        key="home"
                        icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
                        selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
                        selected={selected === 'home' ? true : false}
                        onPress={() => { this.onPress('home') }}
                    />
                    <TabBar.Item
                        title="分类"
                        key="wddd"
                        icon={<Link to='/order'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>}
                        selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
                        selected={selected === 'wddd' ? true : false}
                        onPress={() => { this.onPress('wddd') }}
                    />
                    <TabBar.Item
                        title="个人中心"
                        key="grzx"
                        icon={<Link to='/userCenter'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>}
                        selectedIcon={<Link to='/buyTicket'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
                        selected={selected === 'grzx' ? true : false}
                        onPress={() => { this.onPress('grzx') }}
                    />
                </TabBar>
            </div>

        )
    }

}


export default menu;