import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';

class TabBarExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hidden: false
        };
    }

    renderContent(pageText) {
        let {
            state,
            dispatch
        } = this.props

        if (pageText == '首页') {
            return (
                <Topic gotoLogin={(tab) => this.gotoLogin(tab)} actions={actions} />
            );
        } else if (pageText == '发布') {
            return (
                <PublishTopic gotoLogin={(tab) => this.gotoLogin(tab)} actions={actions} />
            )
        } else if (pageText == '消息') {
            return (
                <Message gotoLogin={(tab) => this.gotoLogin(tab)} actions={actions} />
            )
        } else if (pageText == '我的') {
            return (
                <Login gotoLogin={(tab) => this.gotoLogin(tab)} actions={actions} />
            )
        }

    }

    render() {
        <TabBar
            unselectedTintColor="#949494"
            tintColor="#33A3F4"
            barTintColor="white"
            hidden={this.state.hidden}
        > 
            <TabBar.Item
                title="首页"
                key="首页"
                icon={
                    <Icon type={require('../images/index.svg')}></Icon>
                }
                selectedIcon={
                    <Icon type={require('../images/index-fill.svg')}></Icon>
                }
                selected={this.state.selectedTab === 'index'}
                onPress={() => {
                    HashMap.put('selectedTab', 'index')
                    this.setState({
                        selectedTab: 'index',
                    });
                }}
                data-seed="logId"
            >
                {this.renderContent('首页')}
            </TabBar.Item>
        </TabBar>
    }

}

export default TabBarExample;