import Taro, { Component } from '@tarojs/taro'
import { View} from '@tarojs/components'

import { AtTabBar } from 'taro-ui'

import './bottomNav.scss'

class bottomNav extends Component {

    config = {
        navigationBarTitleText: 'bottomNav'
    }
    constructor(){
        super(...arguments);

        this.state={
            current:0
        }

    }
    handleClick(value){
        this.setState({
            current: value
        })
        let path=this.props.otherData.menu[value].url
        Taro.navigateTo({
            url: path,
        })

    }

    componentWillReceiveProps(nextProps) {
        //console.log(this.props, nextProps)
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {

        const otherDataElementsArray = this.props.otherData? this.props.otherData.menu.map((item, index) => {
            return { title: item.name, iconType: 'clock' }
        }):null
        return (
            <View >
                <AtTabBar className='bottom-nav'
                  fixed
                  fontSize='10'
                  iconSize='18'
                  selectedColor='#FF7142'
                  tabList={
                        otherDataElementsArray
                    }
                  onClick={this.handleClick.bind(this)}
                  current={this.state.current}
                />
            </View>
           
        )
}
}

export default bottomNav