import React , { useState } from 'react';
import { Box , Long , Short , Gap , WhiteBack } from '../../Component/layout';
import Title from '../../Component/Title';
import Setnav from '../../Component/Setnav';

import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Loading from "../../../Loading";

const Common = Loadable({
  loader: () => import("./SettingCommon"),
  loading: Loading,
});
export default (props)=>{
  const pathname = props.location.pathname;
  const organizeId = props.match.params.organizeId;
  const memberId = props.match.params.memberId;
  
  function returnActive (pathname){
    let a = 0;
    if(pathname === `/organize/${organizeId}/member/${memberId}/setting/member`){
      a = 1;
    }else if(pathname === `/organize/${organizeId}/member/${memberId}/setting/project`){
      a = 2;
    }
    return a;
  }
  const active = returnActive(pathname);
  const array = {list:[
    {name:'基本设置',icon:"icon-base",href:`/organize/${organizeId}/member/${memberId}/setting`},
    {name:'团队成员管理',icon:"icon-zuzhichengyuan",href:`/organize/${organizeId}/member/${memberId}/setting/member`},
    {name:'团队项目管理',icon:"icon-zuzhixiangmu",href:`/organize/${organizeId}/member/${memberId}/setting/project`},
  ],
    active
  }
  return(
    <Box>
      <Short>
        <Setnav header={<Title>团队设置</Title>} nav={array}></Setnav>
      </Short>
      <Long>
        <Gap>
          <WhiteBack>
            <Switch>
              <Route
                path="/organize/:organizeId/member/:memberId/setting"
                render={() => (
                  <Common {...props} />
                )}
              ></Route>
            </Switch>
          </WhiteBack>
        </Gap>
      </Long>
    </Box>
  )
}