import React , { useEffect , useState } from 'react';
import { Route, Switch , Link } from "react-router-dom";
import Loadable from "react-loadable";
import Loading from "../../../Loading";
import {AlignCenter} from '../../Component/layout';
import Cards from '../../Component/Cards';
import axios from 'axios';
import '../Index.scss';

const DetailIndex = Loadable({
  loader: () => import("../List"),
  loading: Loading,
});
const Setting = Loadable({
  loader: () => import("../Setting/TeamSettingIndex"),
  loading: Loading,
});
function Detail(props){
  const OIdentifier = props.match.params.OIdentifier;
  const pathname = props.location.pathname;

  const [ detail , setDetail ] = useState(undefined);
  const [ flag , setFlag ] = useState(true);

  // 设置页面：顶部不需要设置按钮了
  useEffect(()=>{
    if(pathname){
      if(pathname.indexOf("/setting") && pathname.indexOf("/organize")){
        setFlag(false);
      }
    }
  },[pathname])

  useEffect(()=>{
    if(OIdentifier){
      getDetail(OIdentifier);
    }
  },[OIdentifier]);

  function getDetail(id) {
    const url = `/organizations/${id}.json`;
    axios.get(url).then(result=>{
      if(result && result.data){
        setDetail(result.data);
      }
    }).catch(error=>{})
  }
  return(
    <div className="teamDetail">
      <Cards
        title={detail && detail.name}
        desc={detail && detail.description}
        img={detail && detail.avatar_url}
        rightBtn={flag && <AlignCenter className="color-blue"><Link to={`/organize/${OIdentifier}/setting`} className="color-blue">设置</Link><i className="iconfont icon-shezhi2 ml3"></i></AlignCenter>}
      />
      <Switch {...props}>
        <Route
          path="/organize/:OIdentifier/setting"
          render={(p) => {
            return <Setting {...props} {...p} organizeDetail={detail} />
          }}
        ></Route>
        <Route
          path="/organize/:OIdentifier"
          render={(p) => {
            return <DetailIndex {...props} {...p}/>
          }}
        ></Route>
      </Switch>
    </div>
  )
}
export default Detail;