import React from 'react'
import { Link } from 'react-router-dom'
import { Route, Switch, Redirect } from 'dva/router'
import { Layout, Button } from 'antd'
import { connect } from 'dva'
import Admin from '../admin/admin'
import Authority from '../authority/index'
import Logs from '../logs/logs'
import CusIcon from '../common/cusIcon/index'
import './index.less'
const { Sider, Content } = Layout

class Setting extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        const { main } = this.props;
        const { currentPage } = main;

        let paths = currentPage.match(/\/(\w+)/g).map(p => p.replace('/', ''));

        return <Layout className='layout-setting'>
            <Sider
                width={160}
                collapsible
                collapsedWidth={0}
                trigger={null}
                theme='light'
                className='sider-setting'
            >
                <Link to='/setting/admin'><div className={`link-btn${(paths[1] === 'admin' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={(paths[1] === 'admin' || !paths[1]) ? 'primary' : 'default'} ><CusIcon type='bi-nav-admin'/>用户管理</Button></div></Link>
                <Link to='/setting/authority'><div className={`link-btn${(paths[1] === 'authority' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'authority' ? 'primary' : 'default'} ><CusIcon type='bi-nav-authority'/>权限管理</Button></div></Link>
                <Link to='/setting/logs'><div className={`link-btn${(paths[1] === 'logs' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'logs' ? 'primary' : 'default'} ><CusIcon type='bi-nav-logs'/>操作日志</Button></div></Link>
            </Sider>
            <Content className='content-setting'>
                <Switch>
                    <Route sensitive path='/setting/admin' component={Admin}/>
                    <Route sensitive path='/setting/authority' component={Authority}/>
                    <Route sensitive path='/setting/logs' component={Logs}/>
                    <Route path='/' component={() => (<Redirect to={{ pathname: '/setting/admin' }} ></Redirect>)}/>
                </Switch>
            </Content>
        </Layout>
    }
}

export default connect(({ main }) => ({ main }))(Setting)