import React, { Component } from 'react';
import { getImageUrl } from 'educoder';

import axios from 'axios';
import './manage.css'
import { Link } from 'react-router-dom';

class PreApplyPlate extends Component {
  constructor(props){
    super(props);
    this.state={
      applylist:undefined
    }
  }

  componentDidMount=()=>{
    const { plateId } = this.props.match.params;
    this.getApplyInfo(plateId);
  }

  getApplyInfo=(id)=>{
    const url=`/forum_sections/${id}/applied_forums`;
    axios.get(url).then((result)=>{
      if(result){
        this.setState({
          applylist:result.data.applied_moderators
        })
      }
    }).catch(error=>{

    })
  }

  // 通过,拒绝
  passApplyEvent=(flag,applyId)=>{
    this.props.confirm({
      content: `确认${flag?"通过":"拒绝"}版主申请？`,

      onOk: () => {
        const { plateId } = this.props.match.params;

        const url = `/forum_sections/${plateId}/deal_applies/${applyId}`
        axios.post(url,{
          deal_type:flag?1:2
        }).then((result)=>{
          if(result){
            this.props.showNotification(result.data.message);
            this.getApplyInfo(plateId);
          }
        }).catch((error)=>{

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

  render(){
    const { applylist } = this.state;
    // const applylist = [
    //   {
    //     apply_id: 5,
    //     username: "OpenGCC",
    //     login: "innov",
    //     image_url: "avatars/User/girl.jpg",
    //     user_url: "/users/innov",
    //     user_ip: null,
    //     user_ip_address: "--",
    //     time: "14小时前",
    //     forum_title: "MAC安全",
    //     forum_id: 9,
    //     forum_url: "/memos/forum_memos/9",
    //     parent_forum: {
    //       forum_title: "网络安全网络安全333",
    //       forum_id: 6,
    //       forum_url: "/memos/forum_memos/6"
    //     }
    //   }
    // ]
    const listItem= () => {
      if(applylist && applylist.length > 0){
        return(
          <div className="mt20">
            <p className="font-16 mb15 color-grey3">版主申请</p>
            <div className="applyList">
              { applylist.map((item,key)=>{
                return(
                  <div>
                    <a href={`/users/${item.login}`} > <img alt="用户头像" src={getImageUrl(`images/${item.image_url}`)} width="36" height="36" className="radius mr15"></img></a>
                    <div className="flex1">
                      <p className="mb10">
                      <a href={`/users/${item.login}`} > <span className="color-blue mr15">{item.username}</span></a>
                        { item.user_ip && <span className="color-grey9">IP：{item.user_ip}（{item.user_ip_address}）</span> }
                      </p>
                       <p>申请成为”<Link to={`/forums/theme/${item.forum_id}`}><span className="color-blue">{item.forum_title}</span></Link>“的版主</p>
                    </div>
                    <div className="edu-txt-right">
                      <p className="color-grey9 mb10">{item.time}</p>
                      <p>
                        <span className="middle-default-btn small-blue-btn c_point" onClick={()=>this.passApplyEvent(true,item.apply_id)}>通过</span>
                        <span className="middle-default-btn ml20 c_point" onClick={()=>this.passApplyEvent(false,item.apply_id)}>拒绝</span>
                      </p>
                    </div>
                  </div>
                )
              })
              }
            </div>
          </div>
        )
      }
    }
    return(
      <React.Fragment>
        {listItem()}
      </React.Fragment>
    )
  }
}
export default PreApplyPlate;