import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import AccessData from '../components/accessData'
import AlarmList from '../components/alarmList'
import DataShare from '../components/dataShare'
import DataTop5 from '../components/dataTop5'
import HotspotData from '../components/hotspotData'
import NodeResource from '../components/nodeResource'
import AbnormalMonitoring from '../components/abnormalMonitoring'
import CenterTop from '../components/centerTop'
import './style.less'

function homePage(props) {
    const { dispatch } = props;
    const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
    const cardHeight = document.body.clientHeight * 0.896 * 0.32
    const cardContentHeight = cardHeight - 42 - 13
    return <div className='homepage'>
        <div className='_title'>
            <div onClick={() => { dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' ><div className='_icon' />进入后台</div>
        </div>
        <div className='homepage-left homepage-left-left'>
            <div className="list">
                <div className='child' style={childStyle}>
                    <AccessData />
                </div>
                <div className='child' style={childStyle}>
                    <NodeResource />
                </div>
                <div className='child' style={childStyle}>
                    <AlarmList cardContentHeight={cardContentHeight} />
                </div>
            </div>
        </div>
        <div className='homepage-center'>
            <CenterTop />
            <div className="list">
                <div className='child-top'>
                    <AbnormalMonitoring />
                </div>
            </div>
        </div>
        <div className='homepage-left homepage-left-right'>
            <div className="list">
                <div className='child-right' style={childStyle}>
                    <DataShare />
                </div>
                <div className='child-right' style={childStyle}>
                    <DataTop5 cardContentHeight={cardContentHeight} />
                </div>
                <div className='child-right' style={childStyle}>
                    <HotspotData />
                </div>
            </div>
        </div>
    </div>

}

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

    };
}

export default connect(mapStateToProps)(homePage);