import React ,{ useState , useEffect } from 'react';
import { Modal , Spin } from 'antd';
import axios from 'axios';

function AddMemberBox({className,orzId,history,OIdentifier}){
  const [ visible , setVisible ] = useState(false);
  const [ isSpin , setIsSpin ] = useState(true);
  const [ list , setList ] = useState(undefined);

  useEffect(()=>{
    if(visible && orzId){
      InitData();
    }
  },[orzId,visible])

  function InitData(){
    const url = `/organizations/${orzId}/teams.json`;
    axios.get(url,{
      params:{
        is_full:true
      }
    }).then(result=>{
      if(result){
        setList(result.data.teams);
        setIsSpin(false);
      }
    }).catch(error=>{})
  }

  function chooseGroup(id){
    history.push(`/${OIdentifier}/teams/${id}/setting/member`);
  }
  return(
    <div>
      <Modal
        visible={visible}
        width="600px"
        centered
        title="添加成员"
        onCancel={()=>setVisible(false)}
        footer={null}
        className="addMemberBody"
      >
        <div>
          <p className="font-16 pt40 pb20 edu-txt-center">请选择想要添加成员的组织团队</p>
          <Spin spinning={isSpin}>
            <div className="addForGroupList">
              {
                list && list.length > 0 ? 
                <ul>
                  {
                    list.map((i,k)=>{
                      return(
                        <li onClick={()=>chooseGroup(i.id)}>{i.nickname}</li>
                      )
                    })
                  }
                </ul>
                :""
              }
            </div>
          </Spin>
        </div>
      </Modal>
      <a className={className} onClick={()=>setVisible(true)}>+ 添加成员</a>
    </div>
  )
}
export default AddMemberBox;