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 = 'index' } = this.state;
        return (
            <div className='tabbar' style={{ position: "fixed", width: "100%", bottom: 0 }}>
                <TabBar>
                    <TabBar.Item
                        title="首页"
                        key="home"
                        icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' >121212</i> </Link>}
                        selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
                        selected={selected === 'index' ? true : false}
                        onPress={() => { this.onPress('index') }}
                    />
                    <TabBar.Item
                        title="分类"
                        key="classify"
                        icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' >121212</i></Link>}
                        selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
                        selected={selected === 'classify' ? true : false}
                        onPress={() => { this.onPress('classify') }}
                    />
                    <TabBar.Item
                        title="学习"
                        key="study"
                        icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' >121212</i></Link>}
                        selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
                        selected={selected === 'study' ? true : false}
                        onPress={() => { this.onPress('study') }}
                    />
                    <TabBar.Item
                        title="我的"
                        key="my"
                        icon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing tabbarIcon' >121212</i></Link>}
                        selectedIcon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
                        selected={selected === 'my' ? true : false}
                        onPress={() => { this.onPress('my') }}
                    />
                </TabBar>
            </div>

        )
    }

}


export default menu;