import React, { Component } from 'react';
import { Pagination , Spin } from 'antd'
import {Link} from 'react-router-dom'
import '../exchange.css';
import './plate.css'

import Nav from '../NavComponent/Index';
import MenuWraps from '../MenuComponent/Menu';



import PlateRight from './PlateRight'

import axios from 'axios';
import All from './All'

const menu_nav = [
  {
    name:"全部",
    key:`all`,
    content:All
  },
  {
    name:"推荐精华",
    key:`is_fine`,
    content:All
  },
  {
    name:"我的话题",
    key:`my_memos`,
    content:All
  },
  {
    name:"我参与的话题",
    key:`my_topics`,
    content:All
  }
]
class Index extends Component {
  constructor(props){
    super(props);
    this.state = {
      collectFlag:false,

      // 列表搜索相关
      page:1,
      search:undefined,
      pageSize:10,
      select_type:"all",

      memos:undefined,
      memos_count:0,
      // 接口返回的所有数据
      data:undefined,
      forum_tag :undefined,
      forum_moders:undefined,
      forum_sections:undefined, 
      bread_crumb:undefined,
      current_user:undefined,
      isSpin:true
    }
  }

  componentDidMount () {
    this.InitData();
  }

  InitData=()=>{
    this.setState({
      isSpin:true
    })
    const { plateid } = this.props.match.params;
    const { page , search , select_type} = this.state;
    this.getInfos(plateid , page , search , select_type);
  }

  getInfos = (plateid , page , search , select_type) =>{
    const url= `/memos/forum_memos/${plateid}.json`;
    axios.get(url,{params:{
      page,
      search,
      select_type
    }}).then(result=>{
      if(result){
        this.setState({
          data:result.data,
          memos:result.data.memos,
          memos_count:result.data.memos_count,
          collectFlag:result.data.watched,
          forum_tag :result.data.bread_crumb && result.data.bread_crumb.forum_tag,
          forum_moders:result.data.forum_moders,
          forum_sections:result.data.forum_sections, 
          bread_crumb:result.data.bread_crumb,
          current_user:result.data.current_user,
          isSpin:false
        })
      }
    }).catch(error=>{
      
    })
  }


  // 点击收藏
  colectPlate = () =>{ 
    const { collectFlag } = this.state;
    const { plateid } = this.props.match.params;
    const url = `/memos/forum_memos/${plateid}/is_watch.json`;
    // is_watch:1为添加关注
    axios.post(url,{
      is_watch: collectFlag ? 0 : 1
    }).then((result)=>{
      if(result){
        if(result.data.status === 0){
          this.setState({
            collectFlag:!collectFlag
          })
          this.props.showNotification(result.data.message);
        }
      }
    }).catch((error)=>{

    })
  }

  // 搜索
  searchEvent=(e)=>{
    this.setState({
      search:e
    })
    const { plateid } = this.props.match.params;
    const { select_type } = this.state;
    this.getInfos(plateid , 1 , e , select_type);
  }

  // 切换菜单项
  changeTabEvent = (key) =>{
    this.setState({
      select_type:key,
      isSpin:true
    })
    const { plateid } = this.props.match.params;

    const { search}  = this.state;
    this.getInfos(plateid , 1 , search , key);
  }

  // 切换分页
  changePageEvent=(pageNum)=>{
    this.setState({
      page:pageNum
    })
    const { plateid } = this.props.match.params;

    const { search , select_type} = this.state;
    this.getInfos(plateid , pageNum , search , select_type);
  }

  render(){
    let { 
      title,
      collectFlag , 
      memos , 
      forum_tag , 
      select_type,
      forum_moders , 
      forum_sections , 
      page,
      data,
      pageSize,
      bread_crumb , 
      current_user,
      isSpin } = this.state;

    const { plateid } = this.props.match.params;
    let pathname = this.props.location.pathname;
    let urlLastLength = pathname.split("/").length;
    let urlLast = pathname.split("/")[urlLastLength-1];

    const children_bread_crumb = forum_tag && forum_tag.children_bread_crumb;
    //获取当前版块标题
    const title_post=forum_tag && ((children_bread_crumb && children_bread_crumb.title) || forum_tag.title);

    // 顶部导航栏
    const routerMap = [
      {
        name:current_user && current_user.username,
        url:current_user && current_user.user_url
      },
      {
        name:bread_crumb && bread_crumb.forum && bread_crumb.forum.title,
        url:"/forums"
      },
      {
        name:forum_tag && ((children_bread_crumb && children_bread_crumb.title) || forum_tag.title)
      }
    ];

    let collectMap = current_user? <span className="mt2 collecting" onClick={() => this.colectPlate()}>{collectFlag ?'取消收藏':'收藏'}</span>:<span className="mt2 collecting" ><a href={`/login`}> 收藏</a> </span>;

    // 菜单行右侧按钮
    //只有登录管理员可见
   
    const btn = (current_user && current_user.admin_permission) ?<Link to={`/forums/manage/${plateid}`} className={"color-grey-6"}>版块管理</Link> : undefined;
    console.log(btn);
   
    
    // 操作列表item需要刷新页面以及切换菜单项需要重新调用参数
    const commonEvent = {
      refresh:this.InitData,
      changeTab:this.changeTabEvent
    }

    // 列表分页
    const pageination = (
      data && data.memos_count > pageSize &&
      <div className="mb50 edu-txt-center">
        <Pagination showQuickJumper current={page} total={data && data.memos_count} pageSize={pageSize} onChange={this.changePageEvent}/>
      </div>
    )
   

    return(
      <div className="clearfix educontent pt20">
        <Spin spinning={isSpin}>
          <Nav NavMap = {routerMap} ></Nav>

          <p className="mt30 mb10 clearfix">
            <span className="font-22 color-grey3 mr20 fl lineh-25 task-hide" style = {{ maxWidth : "900px"}}>{title_post}</span>
            { collectMap }
          </p>

          <div className="clearfix">
            <div className="fl with76 pr20">
              <div className={"edu-back-white mb30"}>
                
                <MenuWraps 
                  {...this.props} 
                  {...this.state} 
                  {...commonEvent}
                  className="plate-left-Menu" 
                  menu_nav={menu_nav} 
                  btn={btn} 
                  defaultUrlKey={urlLast} 
                  {...this.state}/>
                
              </div>
              { pageination }
            </div>
            <PlateRight 
            forum_sections={forum_sections} 
            forum_moders={forum_moders}
            searchEvent={this.searchEvent}
            {...this.props}
            {...this.state}
            ></PlateRight>
          </div>
        </Spin>
      </div>
    )
  }
}
export default Index;