import React from 'react';
import { Route, Switch , Link } from "react-router-dom";
import Loadable from "react-loadable";
import Loading from "../../../Loading";
import '../Index.scss';

import Cards from '../../Component/Cards';

const GroupNew = Loadable({
  loader: () => import("../Group/GroupNew"),
  loading: Loading,
});
const Group = Loadable({
  loader: () => import("../TeamGroup"),
  loading: Loading,
});
const Member = Loadable({
  loader: () => import("../TeamMember"),
  loading: Loading,
});
const GroupDetails = Loadable({
  loader: () => import("../Group/GroupDetails"),
  loading: Loading,
});

export default ((props)=>{
  return(
    <div className="teamDetail">
      <Cards
        title="组织名称"
        rightBtn={
          <span className="subNavs">
            <Link to={``} className="active"><span>组织成员</span><lable>13</lable></Link>
            <Link to={``}><span>组织团队</span><lable>13</lable></Link>
          </span>
        }
        img={`https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4193840146,2109186388&fm=26&gp=0.jpg`}
      />
      <Switch {...props}>
        <Route
          path="/organize/:organizeId/member/:memberId"
          render={(props) => {
            return <GroupDetails {...props} />
          }}
        ></Route>
        <Route
          path="/organize/:organizeId/member"
          render={(props) => {
            return <Member {...props} />
          }}
        ></Route>
        <Route
          path="/organize/:organizeId/group/new"
          render={(props) => {
            return <GroupNew {...props} />
          }}
        ></Route>
        <Route
          path="/organize/:organizeId/group"
          render={(props) => {
            return <Group {...props} />
          }}
        ></Route>
      </Switch>
    </div>
  )
})