import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Card } from 'antd';
import Build from './footer/build'
import '../style.less';
import Header from './heand';
import Footer from './footer';
import ProTable, { TableDropdown } from '@ant-design/pro-table';

const Example = (props) => {
    const { dispatch, actions, user, loading } = props
    const [tabKey, setTabKey] = useState('leadership')

    // useEffect(() => {
    //     dispatch(actions.example.getMembers(user.orgId))
    // }, [])
    const tabChange = (tab) => {
        //leader 领导驾驶舱 site 工地 toilet 公厕 light 照明  water水质  encomic经济 environment 生态环境  security 智慧安监
        // setCurrentTab(tab);
        setTabKey(tab)
        // dispatch({ type: 'TAB-CHANGE', data: tab })
    }

    return (
        <Spin tip="biubiubiu~" spinning={loading}>
            <div id='example2' style={{
                backgroundColor: "#031839", width: "100vw", height: "100vh", /* transform: `scale(${Math.min(
                    document.body.clientWidth / 1920,
                    document.body.clientHeight / 1080
                )})`, */
            }}>
                <div style={{ width: "100%", height: "10%" }}>
                    <Header tabChange={tabChange} tabKey={tabKey} dispatch={dispatch} />
                </div>
                <div style={{ width: "100%", height: "90%" }}>
                    <Footer tabKey={tabKey} />
                </div>
            </div>
        </Spin>
    )
}

function mapStateToProps(state) {
    const { auth, global, members } = state;
    return {
        loading: members.isRequesting,
        user: auth.user,
        actions: global.actions,
        members: members.data
    };
}

export default connect(mapStateToProps)(Example);