import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { FormOutlined, DeleteOutlined } from '@ant-design/icons';
import { Spin, Tooltip, Button, Popconfirm, Row, Col, Tree, Card, Switch } from 'antd';
import ProTable from '@ant-design/pro-table';
import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDept, updateDept, delDept } from '../actions/user';
import Header from '../components/header';
import Basis from '../components/basis';
import Capacity from '../components/capacity';
import Electrical from '../components/electrical';
import RealTime from '../components/realTime';

const TreeNode = Tree.TreeNode;

const SystemManagement = ({ clientHeight, user, history }) => {

   const [module, setModule] = useState('basis')
   useEffect(() => {

   }, [])





   return (
      <div style={{
         width: '100vw', height: '100vh',
         backgroundImage: 'url(/assets/images/monitor/screen-bg.png)',
         backgroundSize: 'cover',
         backgroundPosition: 'center'
      }}>
         <div style={{
            width: '100%', height: '100%',
            backgroundImage: 'url(/assets/images/monitor/header-bg.png)',
            backgroundSize: 'cover',
            backgroundPosition: 'center'
         }}>
            <Header module={module} setModule={setModule} history={history} />
            {module == 'basis' ? <Basis /> : ""}
            {module == 'capacity' ? <Capacity /> : ""}
            {module == 'electrical' ? <Electrical /> : ""}
            {module == 'realTime' ? <RealTime /> : ""}
         </div>
      </div>
   )
}

function mapStateToProps (state) {
   const { auth, global } = state;
   return {
      user: auth.user,
      clientHeight: global.clientHeight,
   };
}

export default connect(mapStateToProps)(SystemManagement);