
import React , { useEffect , useState } from 'react';
import { Dropdown, Menu , Pagination } from 'antd';
import Search from '../Component/Search';
import Item from './Team-item';
import Nodata from '../Nodata';
import axios from 'axios';
import CheckProfile from '../Component/ProfileModal/Profile';

const limit = 15;
function Team(props){
  const [ list ,setList ] = useState(undefined);
  const [ page ,setPage ] = useState(1);
  const [ total ,setTotal ] = useState(0);
  const [ sort_direction , setSort_direction ] = useState("asc");
  const [ sort_by ,setSort_by ] = useState("created_at");
  const [ search ,setSearch ] = useState(undefined);
  const { checkIfLogin , showLoginDialog , current_user } = props;
  const { username } = props.match.params;
  useEffect(()=>{
    if(username){
      getList(search);
    }
  },[username,sort_by,page,sort_direction])

  function getList(search){
    const url = `/users/${username}/organizations.json`;
    axios.get(url,{
      params:{
        search,sort_by,sort_direction,page,limit
      }
    }).then(result=>{
      if(result && result.data){
        setList(result.data.organizations);
        setTotal(result.data.total_count);
      }
    }).catch(error=>{})
  }
  // 搜索
  function onSearch(){
    getList(search);
  }
  const menu = (
    <Menu onClick={(e)=>setSort_by(e.key)}>
      <Menu.Item value="created_at" key="created_at">更新时间排序</Menu.Item>
      <Menu.Item value="num_projects" key="num_projects">项目数排序</Menu.Item>
      <Menu.Item value="num_users" key="num_users">用户数排序</Menu.Item>
    </Menu>
  )


  return(
    <div>
      <div className="headerbox">
        <div>
          <Search value={search} onChange={(e)=>setSearch(e.target.value)} placeholder="请输入组织名称关键字进行搜索" onSearch={onSearch}/>
        </div>
        <p>
          {
            current_user && current_user.login === username &&
            <CheckProfile {...props} sureFunc={()=>{props.history.push('/organize/new')}}><i className="iconfont icon-xinjian1 mr3 font-14"></i>新建组织</CheckProfile>
          }
          <Dropdown overlay={menu}>
            <a>排序<i className="iconfont icon-sanjiaoxing-down ml3 font-14"></i></a>
          </Dropdown>
        </p>
      </div>
      {
        list && list.length > 0 ? 
        <div className="contentBox">
          {
            list.map((item,key)=>{
              return(
                <Item item={item} history={props.history}/>
              )
            })
          }
        </div>
        :
        <Nodata _html="暂无数据" />
      }
      {
        total > limit &&
        <div className="mt20 pb20" style={{textAlign:"center"}}>
          <Pagination simple current={page} pageSize={limit} onChange={(page)=>setPage(page)} total={total} />
        </div>
      }
    </div>
  )
}
export default Team;