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';
import Gis from './footer/gis/gis';

const MAPID = 'screenGis'

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

   const tabChange = (tab) => {
      setTabKey(tab)
      // dispatch({ type: 'TAB-CHANGE', data: tab })
   }



   return (
      <Spin tip="biubiubiu~" spinning={loading}>
         <div 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={{ position: 'absolute', width: "100%", height: "90%" }}>
               <Gis tabKey={tabKey}/>
               <Footer tabKey={tabKey} dispatch={dispatch} />

            </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);