import React, { Component } from 'react';
import { Spin , Pagination } from 'antd';
import '../exchange.css';
import './manage.css';
import Empty from '../Empty'
import ItemLeft from './ItemLeft';
import PassItem from './PassItem';
import axios from 'axios'

class SubCheckItem extends Component {
  constructor(props){
    super(props);
    this.state={
      page:1,
      data:undefined,
      isSpin:true,
      limit:10
    }
  }

  componentDidMount=()=>{
    this.getList(1);
  }

  getList = (page) =>{
    this.setState({
      isSpin:true
    })
    const { plateId } = this.props.match.params;
    const url =  `/forum_sections/${plateId}/unchecked_memos.json`;
    axios.get(url,{params:{
      page
    }}).then((result)=>{
      if(result){
        this.setState({
          data:result.data,
          isSpin:false
        })
      }
    }).catch((error)=>{

    })
  }

  // 禁言
  stopEvent=(id,banned,user_id)=>{
    const { current_user } = this.props;
    const url =`/memos/${id}/banned_user.json`
    axios.post((url),{
      user_id:user_id,
      banned
    }).then((result)=>{
      if(result){
        const { page } = this.state;
        this.props.showNotification(result.data.message);
        this.getList(page);
      }
    }).catch((error)=>{

    })
    console.log("banned",banned);
  }

  // 分页
  changePageEvent=(page)=>{
    this.setState({
      page
    })
    this.getList(page);
  }

  render(){
    const { data , page , isSpin , limit } = this.state;
    const { current_user } = this.props;
    
    const pageCom = (
      data && data.memos_count > limit &&
      <div className="edu-txt-center pt30 pb30">
        <Pagination showQuickJumper current={page} total={data.memos_count} pageSize={limit} onChange={this.changePageEvent}/>
      </div>
    )
    
    const dataList = (
      
       data && data.memos_lists && data.memos_lists.length > 0  ?
        <div className="pl30 pr30">
          {
            data.memos_lists.map((item,key)=>{
              const userInfo = {
                forum_id:item.forum_id,
                memo_id:item.memo_id,
                user_url:item.user_url,
                username:item.username,
                time:item.time,
                image_url:item.image_url,
                memo_title:item.memo_title,
                forum_title:item.forum_title,
                user_id:item.user_id
              }
              const passItem = {
                refresh:this.getList,
                page,
                id:item.memo_id
              }
              

              return(
                <div className="moderatorItems">
                  <div className="df">
                   <ItemLeft {...userInfo}/>
                    <div className="flex-align-bottom between_">
                      {
                        current_user && current_user.admin && 
                        ( item.is_banned ? 
                          <p className="edu-txt-right color-red mb15 mt12 c_point" onClick={()=>this.stopEvent(item.memo_id,0,item.user_id)}><i className="iconfont icon-jinzhi font-16 mr10"></i>已禁言</p>
                          :
                          <p className="edu-txt-right color-grey-9 mb15 mt12 c_point" onClick={()=>this.stopEvent(item.memo_id,1,item.user_id)}><i className="iconfont icon-jinzhi font-16 mr10"></i>禁言</p>
                        )
                      }
                      <PassItem {...this.props} {...this.state} {...passItem} ></PassItem>
                    
                    </div>
                    
                  </div>
                  
                </div>
              )
            })
          }
          { pageCom }
        </div>
        :
        <div className="edu-back-white pt50 pb50">
          <Empty></Empty>
        </div>
    )

    return(
      <Spin spinning={isSpin}>
      { dataList }
      </Spin>
    )
  }
}

export default SubCheckItem;