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 MAPID = 'screenGis'

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 })
    }


    // useEffect(() => {

    //     const map = new AMap.Map(MAPID, {
    //         //resizeEnable: true,
    //         center: [115.912663, 28.543149],//地图中心点，初始定位加载显示楼块
    //         // center: [115.857952, 28.683003],//地图中心点
    //         zoom: 13,//地图显示的缩放级别
    //         zooms: [8, 18],
    //         pitch: 65, // 地图俯仰角度，有效范围 0 度- 83 度
    //         viewMode: '3D', // 地图模式
    //         // rotation: 60
    //         // showLabel: false
    //     });
    //     let styleName = 'amap://styles/fb26776387242721c2fc32e2cb1daccc';
    //     map.setMapStyle(styleName);

    //     let mapComplete = false;
    //     let windowOnload = false;
    //     window.onload = function () {
    //         windowOnload = true;
    //     }





    //     //主题样式


    //     //主题样式


    //     return () => {
    //         const amapKeys = Object.keys(localStorage).filter(key => key.match(/^_AMap_/))  // 销毁地图
    //         amapKeys.forEach(key => {
    //             localStorage.removeItem(key)
    //         })
    //         map.clearMap();
    //         if (map) map.destroy();



    //         clearTimeout(timer)

    //     }
    // }, [])


    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 id={MAPID} style={{ position: 'absolute', width: "100%", height: "100%" }}></div> */}
                <div style={{ width: "100%", height: "10%" }}>
                    <Header tabChange={tabChange} tabKey={tabKey} dispatch={dispatch} />
                </div>
                <div style={{ width: "100%", height: "90%" }}>
                    <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);