import React, { Component } from 'react';

import { Pagination , Spin } from 'antd';

import NoneData from '../../courses/coursesPublic/NoneData'
import axios from 'axios';
import { setImagesUrl } from 'educoder';

import "./usersInfo.css"

import Create from './publicCreatNew'

class InfosShixun extends Component{
  constructor(props){
    super(props);
    this.state={
      category:undefined,
      page:1,
      sort_by:'time',
      status:undefined,
      per_page:16,
      isSpin:false,

      totalCount:undefined,
      data:undefined
    }
  }

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

  getCourses=(category,status,sort_by,page)=>{
    let url=`/users/${this.props.match.params.username}/shixuns.json`;
    axios.get((url),{params:{
      category,
      status,
      sort_by,
      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,
      status:undefined,
      page:1,
      isSpin:true
    })
    let{sort_by}=this.state;
    this.getCourses(cate,undefined,sort_by,1);
  }
  // 切换状态
  changeStatus=(status)=>{
    this.setState({
      status,
      page:1,
      isSpin:true
    })
    let{category,sort_by}=this.state;
    this.getCourses(category,status,sort_by,1);
  }
  //切换页数
  changePage=(page)=>{
    this.setState({
      page,
      isSpin:true
    })
    let{category,sort_by,status}=this.state;
    this.getCourses(category,status,sort_by,page);
  }

  // 进入课堂
  turnToCourses=(url)=>{
    this.props.history.push(url);
  }


  // 切换排序方式
  changeOrder= (sort)=>{
    this.setState({
      sort_by:sort,
      isSpin:true
    })
    let{category,status,page}=this.state;
    this.getCourses(category,status,sort,page);
  }

  render(){
    let{
      category,
      status,
      sort_by,
      page,
      data,
      totalCount,
      isSpin
    } = this.state;
    
    let  is_current=this.props.is_current;
    return(
      <div className="educontent">
        <Spin size="large" spinning={isSpin}>
        <div className="white-panel edu-back-white pt20 pb20 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>
        {
          category && category == "manage" && 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=="editing" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("editing")}>编辑中</a></li>
            <li className={status=="applying" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("applying")}>待审核</a></li>
            <li className={status=="published" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("published")}>已发布</a></li>
            <li className={status=="closed" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("closed")}>已关闭</a></li>
          </div>
        }
        {
          category && category == "study" && 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=="processing" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("processing")}>未通关</a></li>
            <li className={status=="passed" ? "active" : ""}><a href="javascript:void(0)" onClick={()=>this.changeStatus("passed")}>已通关</a></li>
          </div>
        }
        <div className="pl25 pr25 clearfix font-12 mb20 mt20">
          <span className="fl color-grey-9">共参与{totalCount}个{category?category=="manage"?"发布":"学习":"实训"}</span>
          <div className="fr">
            <li className="drop_down">
              <span className="color-grey-9 font-12">{sort_by=="time"?"时间最新":"语言类别"}</span><i className="iconfont icon-xiajiantou font-12 ml2 color-grey-6"></i>
              <ul className="drop_down_normal">
                <li onClick={()=>this.changeOrder("time")}>时间最新</li>
                <li onClick={()=>this.changeOrder("language")}>语言类别</li>
              </ul>
            </li>
          </div>
        </div>
        <div className="square-list clearfix">
          {
            page == 1 && is_current && !category && this.props.current_user && this.props.current_user.user_identity != "学生" ? 
            <Create href={"/shixuns/new"} name={"新建实训"} index="2"></Create>:""
          }
          {
            (!data || (data && data.shixuns.length==0)) && category && <NoneData></NoneData>
          }
          {
            data && data.shixuns && data.shixuns.map((item,key)=>{
              return(
                <div className="square-Item" onClick={()=>this.turnToCourses(`/shixuns/${item.identifier}/challenges`)}>
                  {
                    item.tag && <div className="tag-green"><span className="tag-name">{item.tag}</span><img className="fl" src={setImagesUrl("images/educoder/tag2.png")}/></div>
                  }
                  <a href="javascript:void(0)" className="square-img">
                    <img src={setImagesUrl(`${item.image_url}`)}/>
                  </a>
                  <div className="square-main">
                    <p className="task-hide">
                      <a href="javascript:void(0)" className="justify color-grey-name">{item.name}</a>
                    </p>
                    <div className="user-bar mt10">
                      <p style={{'width': `${parseFloat(parseInt(item.finished_challenges_count)/parseInt(item.challenges_count)).toFixed(2)*100}%`}}></p>
                    </div>
                    <p className="color-blue font-14 clearfix">
                        已完成 {item.finished_challenges_count} / {item.challenges_count}
                    </p>
                  </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 InfosShixun;