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



import './TabBarBottom.css'

class TabBarBottom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'index',
      hidden: false,
      fullScreen: true
    };

    this.handleChange=this.handleChange.bind(this)

  }


  //要保留，勿动
  renderContent(page){}

  handleChange(page){
    this.props.changePage(page)
  }

  render() {
    //这里渲染一次
    const handleChange=this.handleChange
    return (
      <div style={this.state.fullScreen ? { position: 'absolute', height: '100%', width: '100%', bottom: 0 } : { height: 400 }} className="TabBarBottom">
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="Life"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/home.svg) center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/home_s.svg) center center /  21px 21px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === 'index'}
         
            onPress={() => {
              handleChange('home')
              this.setState({
                selectedTab: 'index',
              });
            }}
            data-seed="logId"
          >
            {this.renderContent('index')}
          </TabBar.Item>

          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user.svg) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user_s.svg) center center /  21px 21px no-repeat' }}
              />
            }
            title="我的"
            key="user"
  
            selected={this.state.selectedTab === 'user'}
            onPress={() => {
              handleChange('user')
              this.setState({
                selectedTab: 'user',
              });
            }}
          >
            {this.renderContent('user')}
          </TabBar.Item>

        </TabBar>
      </div>
    );
  }
}


export default TabBarBottom