import React, { Component } from 'react';
import { Tabs } from 'antd';
import './Menu.css';


const { TabPane } = Tabs;

class MenuCom extends Component{
  constructor(props){
    super(props);
    this.state={
      activeKey: ''
    }
  }

  componentDidMount () {
    const { defaultUrlKey } = this.props;
    this.setState({
      activeKey: defaultUrlKey
    })
  }
  changeTabs=(activeKey)=>{
    this.setState({
      activeKey:activeKey
    })
    const { changeTab } = this.props;
    changeTab(activeKey);
  }

  render(){
    const {  menu_nav , btn , ...props } = this.props;

    const tabs = menu_nav.map((tab)=>{
      const Content = tab.content;
      return(
        <TabPane tab={tab.name} key={tab.key}>
          <Content condition={tab.key} {...this.props} {...this.state}/>
        </TabPane>
      )
    })

    let { activeKey } = this.state;

    return(
      <Tabs { ...props } onChange={ this.changeTabs } activeKey={ activeKey } animated={false} tabBarExtraContent={ btn }>
        { tabs }
      </Tabs>
    )
  }
}
export default MenuCom;