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 DataConnect from '../dataConnect/list'
import DataSource from '../dataSource/list'
import Dashboard from '../dashboard/layout'
import Chart from '../chart/list'
import DataSourceDetail from '../dataSourceDetail/layout'
import CusIcon from '../common/cusIcon/index'
import './index.less'
const { Sider, Content } = Layout

class Workshop 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-workshop'>
            <Sider
                width={160}
                collapsible
                collapsedWidth={0}
                trigger={null}
                theme='light'
                className='sider-workshop'
            >
                <Link to='/workshop/dataconnect'><div className={`link-btn${(paths[1] === 'dataconnect' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={(paths[1] === 'dataconnect' || !paths[1]) ? 'primary' : 'default'} ><CusIcon type='bi-nav-dataconnect'/>数据链接</Button></div></Link>
                <Link to='/workshop/datasource'><div className={`link-btn${(paths[1] === 'datasource' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'datasource' ? 'primary' : 'default'} ><CusIcon type='bi-nav-datasource'/>数据源</Button></div></Link>
                <Link to='/workshop/chart'><div className={`link-btn${(paths[1] === 'chart' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'chart' ? 'primary' : 'default'} ><CusIcon type='bi-nav-chart'/>图表</Button></div></Link>
                <Link to='/workshop/dashboard'><div className={`link-btn${(paths[1] === 'dashboard' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'dashboard' ? 'primary' : 'default'} ><CusIcon type='bi-nav-dashboard'/>报表</Button></div></Link>
            </Sider>
            <Content className='content-workshop'>
                <Switch>
                    <Route sensitive path='/workshop/dataconnect' component={DataConnect}/>
                    <Route sensitive path='/workshop/datasource/:type/:code/:tab' component={DataSourceDetail}/>
                    <Route sensitive path='/workshop/datasource' component={DataSource}/>
                    <Route sensitive path='/workshop/chart' component={Chart} />
                    <Route sensitive path='/workshop/dashboard' component={Dashboard} />
                    <Route path='/' component={() => (<Redirect to={{ pathname: '/workshop/dataconnect' }} ></Redirect>)}/>
                </Switch>
            </Content>
        </Layout>
    }
}

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