import React, { PureComponent } from 'react';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';
import '../exchange.css';
import './plate.css'

import ExchangeRightSearch from '../ExchangeRightSearch'
import Custom from '../CustomComponent/Index';

import axios from 'axios';
class PlateRight extends PureComponent {

  // 申请版主
  applyModerator = () =>{
    this.props.confirm({
      content: '是否确认申请版主?',

      onOk: () => {
        const { plateid } = this.props.match.params;
        const url = `/forum_sections/${plateid}/user_apply`;
        axios.post(url).then(result=>{
          if(result){
            this.props.showNotification(result.data.message);
          }
        }).catch(error=>{

        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  render(){

    const { forum_sections , forum_moders , searchEvent , current_user }= this.props;

    // admin_permission:是否是版主
    const moderatorInfo = ( forum_moders && forum_moders.length > 0 &&
      <div className="bc-white mb20">
        <p className="clearfix r_part_title">
          <img src={getImageUrl("images/plate/person.png")} width="18px" className="mr10 fl mt7" alt=""/>
          <span className="color-grey3 font-16 fl">版主</span>
          {
            current_user && current_user.admin_permission === false && <a onClick={this.applyModerator} className="applyBtn fr mt3">申请版主</a>
          }
        </p>
        <div className="moderatorPanel">
          { forum_moders.map((item,key)=>{
            return(
                <Custom className="moderatorInfo" hrefUrl={`/users/${item.user_login}`} img_url={getImageUrl(`images/${item.image_url}`)} name={item.username}></Custom>
            )
          }) }
        </div>
      </div>
    )
    

    const choiceInfo = ( forum_sections && forum_sections.length > 0 &&
      <div className="bc-white mb20">
        <p className="clearfix r_part_title">
          <img src={getImageUrl("images/plate/plate.png")} width="18px" className="mr10 fl mt7" alt=""/>
          <span className="color-grey3 font-16 fl">精选版块</span>
        </p>
        <ul className="choicePlate">
        { 
          forum_sections.map((item,key) => {
            return(
              <li className="clearfix">
                <span className="fl"><a href={`/forums/theme/${item.id}`}>{item.title}</a></span>
                <span className="fr"><a href={`/forums/theme/${item.id}`} className="color-blue">{item.memo_size}</a>个话题</span>
              </li>
            )
          })
        }
        </ul>
      </div>
    )

    
    return(
      <div className="fl with24">
        <ExchangeRightSearch {...this.props} {...this.state}  searchEvent={searchEvent}></ExchangeRightSearch>

        { moderatorInfo }

        { choiceInfo }
      </div>
    )
  }
}
export default PlateRight;