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

        }
    }, [])


    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={{ position: 'absolute', width: "100%", height: "90%" }}>
                    <Footer tabKey={tabKey} />
                </div>
                {/* </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);