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
        })
        const otherData = [
            { name: '首页', url: '/pages/home/home' },
            { name: '商品发布', url: '/pages/goodsPublish/goodsPublish' },
            { name: '供求发布', url: '/pages/supplyDemandPubish/supplyDemandPubish' },
            { name: '我的供求', url: '/pages/mySupplyDemand/mySupplyDemand' },
            { name: '更多', url: '' },
        ]
        let path=otherData[value].url
        Taro.navigateTo({
            url: path,
        })

    }

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

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        const otherData=[
            { name: '首页', url:'pages/home/home'},
            { name: '商品发布', url:'pages/shop/shop'},
            { name: '供求发布', url:'pages/supplyDemandPubish/supplyDemandPubish'},
            {name:'我的供求',url:''},
            {name:'更多',url:''},
        ]
        // const otherDataElementsArray = this.props.otherData? this.props.otherData.menu.map((item, index) => {
        const otherDataElementsArray = otherData.map((item, index) => {
            return { title: item.name, iconType: 'clock' }
        })
        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