import React, { Component } from 'react';

import ExchangeRight from '../ExchangeRight'

import '../exchange.css';
import './myExchange.css';

import Nav from '../NavComponent/Index'

import MyTopic from './MyTopic';
import MyInteresting from './MyInteresting';
import MyEnshrine from './MyEnshrine';
import MenuWraps from '../MenuComponent/Menu'

import axios from 'axios';

const menu_nav = [
  {
    name:"我的话题",
    key:`MyTopic`,
    content:MyTopic
  },
  {
    name:"我的收藏",
    key:`MyEnshrine`,
    content:MyEnshrine
  },
  {
    name:"我感兴趣的论坛",
    key:`MyInteresting`,
    content:MyInteresting
  }
]
class Index extends Component {
  constructor(props){
    super(props);
    this.state={
      activeKey:"MyTopic",
      data:undefined
    }
  }

  componentDidMount=()=>{
    this.getMain();
  }

  getMain=()=>{
    const url =`/my_memos/recommend_memos`;
    axios.get(url).then(result=>{
      if(result){
        this.setState({
          data:result.data
        })
      }
    }).catch(error=>{
      
    })
  }

  // 切换第一个nav
  changeTab=(activeKey)=>{
    // console.log('1--',activeKey);
    this.setState({
      activeKey
    })
  }
  render(){
    let pathname = this.props.location.pathname;
    let urllength = pathname.split("/").length;
    let urlLast = pathname.split("/")[urllength-1];

    const { current_user } = this.props;
    const { activeKey , data } = this.state;

    const NavMap=[
      {
        url:current_user && current_user.user_url,
        name:current_user && current_user.username
      },
      {
        url:"/forums",
        name:"论坛交流"
      },
      {
        name:activeKey === "MyTopic" ? "我的话题" :activeKey === "MyEnshrine" ? "我的收藏" : "我感兴趣的论坛"
      }
    ]

    return(
      <div className="educontent">
        <Nav className="mt30" NavMap = {NavMap}></Nav>
        <div className="clearfix F_panel" style={{marginTop:"10px"}}>
          <div className="fl with76 pr20">
            <div>
              <MenuWraps 
              className="plate-left-Menu mainNav-style" 
              {...this.props} 
              {...this.state} 
              menu_nav={menu_nav} 
              defaultUrlKey={urlLast}
              changeTab={this.changeTab}/>
            </div>
          </div>
          <ExchangeRight 
          hideSearchPanel={true}
          hottest_memos={data && data.hottest_memos}
          recommend_memos={data && data.recommend_memos}
          ></ExchangeRight>
        </div>
      </div>
      
    )
  }
}
export default Index;