import React, { Component } from 'react';
import { SnackbarHOC } from 'educoder';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import {Tooltip,Pagination,Spin} from 'antd';
import axios from 'axios';
import NoneData from '../../courses/coursesPublic/NoneData'
import {getImageUrl} from 'educoder';
import "./usersInfo.css"
import Create from './publicCreatNew'

class InfosProject extends Component{
  constructor(props){
    super(props);
    this.state={
      category:undefined,
      status:undefined,
      page:1,
      per_page:16,

      totalCount:undefined,
      data:undefined,
      isSpin:false
    }
  }

  componentDidMount=()=>{
    this.setState({
      isSpin:true
    })
    let{category,status,page}=this.state;
    this.getCourses(category,status,page);
  }

  getCourses=(category,status,page)=>{
    let url=`/users/${this.props.match.params.username}/projects.json`;
    axios.get((url),{params:{
      category,
      status,
      page,
      per_page:this.props.is_current && category && page ==1?17:16
    }}).then((result)=>{
      if(result){
        this.setState({
          totalCount:result.data.count,
          data:result.data,
          isSpin:false
        })
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  //切换种类
  changeCategory=(cate)=>{
    this.setState({
      category:cate,
      page:1,
      isSpin:true
    })
    let{status}=this.state;
    this.getCourses(cate,status,1);
  }
  //切换状态
  changeStatus=(status)=>{
    this.setState({
      status:status,
      page:1,
      isSpin:true
    })
    let{category}=this.state;
    this.getCourses(category,status,1);
  }
  //切换页数
  changePage=(page)=>{
    this.setState({
      page,
      isSpin:true
    })
    let{category,status}=this.state;
    this.getCourses(category,status,page);
  }

  // 进入项目
  turnToCourses=(url,flag)=>{
    if(flag){
			window.location.href=url;
    }
  }

  render(){
    let{
      category,
      status,
      page,
      data,
      totalCount,
      isSpin
    } = this.state;
    let isStudent = this.props.isStudent();
    let  is_current=this.props.is_current;
    return(
      <div className="educontent">
        <Spin size="large" spinning={isSpin}>
        <div className="white-panel edu-back-white pt25 pb25 clearfix ">
          <li className={category ? "" : "active"}><a href="javascript:void(0)" onClick={()=>this.changeCategory()}>全部</a></li>
          <li className={category=="manage" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeCategory("manage")}>{is_current ? "我":"TA"}管理的</a></li>
          <li className={category=="study" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeCategory("study")}>{is_current ? "我":"TA"}学习的</a></li>
        </div>
        {
          is_current && 
          <div className="edu-back-white padding20-30 clearfix secondNav bor-top-greyE">
            <li className={status ? "" : "active"}><a href="javascript:void(0)" onClick={()=>this.changeStatus()}>全部</a></li>
            <li className={status=="publicly" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("publicly")}>公开</a></li>
            <li className={status=="personal" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("personal")}>私有</a></li>
          </div>
        }
        <p className="pl25 pr25 clearfix font-12 mb20 mt20">
          <span className="fl color-grey-9">共参与{totalCount}个{category?category=="manage"?"发布":"学习":"项目"}</span>
          <span className="fr color-grey-9">时间最新</span>
        </p>
        <div className="square-list clearfix">
          {
            page == 1 && is_current && this.props.current_user && this.props.current_user.user_identity != "学生" ? 
            <Create href={`${this.props.Headertop && this.props.Headertop.old_url}/projects/new`} name={"新建项目"} index="4"></Create>:""
          }
          {
           (!data || data.projects.length==0) && (!is_current || (this.props.current_user && this.props.current_user.user_identity === "学生" )) && <NoneData></NoneData>
          }
          {
            data && data.projects && data.projects.map((item,key)=>{
              return(
                <div className="square-Item" onClick={()=>this.turnToCourses(`/projects/${item.id}`,item.can_visited)} style={{"cursor": "pointer"}}>
                  {
                    item.is_public==1 &&
                    <React.Fragment>
                      <div className="publicpart"></div>
                      <span className="smalltrangle"></span>
                      <span className="publicword">公开</span>
                    </React.Fragment>
                  }
                  {
                    item.can_visited ==false?
                    <div className="closeSquare">
                      <img src={getImageUrl("images/educoder/icon/lockclose.svg")} className="mt80 mb25"/>
                      <p className="font-14 color-white">非成员不能访问</p>
                    </div>:""
                  }
                  <div className="substance">
                    <p className="subName font-16">
                      <span>{item.name}</span>
                    </p>
                    <span><img alt="用户" className="radius mt15" height="60" src={getImageUrl(`images/${item.owner.avatar_url}`)} width="60"/></span>
                    <p className="font-14 mt10 task-hide"><span>{item.owner.real_name}</span></p>
                    <p className="font-16 mb15 mt10 task-hide"><span className="color-grey-9">{item.owner.school_name}</span></p>
                  </div>
                  <div className="edu-txt-center course-bottom">
                    <div className="inline color-grey-6">
                      {
                        item.members_count> 0 && 
                        <span className="mr10 ml10 fl squareIconSpan">
                          <i className="iconfont icon-chengyuan fl mr3" data-tip-down="成员"></i>{item.members_count}</span>
                      }
                      {
                        item.issues_count> 0 && 
                        <span className="mr10 ml10 fl squareIconSpan">
                            <i className="iconfont icon-issue fl mr3" data-tip-down="issues数"></i>{item.issues_count}</span>
                      }
                      {
                        item.changesets_count> 0 && 
                        <span className="mr10 ml10 fl squareIconSpan">
                          <i className="iconfont icon-banbenku fl mr3" data-tip-down="版本库"></i>{item.changesets_count}</span>
                      }
                    </div>
                  </div>
                </div>
              )
            })
          }
        </div>
        {
          totalCount > 15 && 
          <div className="mt30 mb50 edu-txt-center">
            <Pagination showQuickJumper total={totalCount} onChange={this.changePage} pageSize={16} current={page}/>
          </div>
        }
        </Spin>
      </div>
    )
  }
}
export default InfosProject;