import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import LeftTop from '../components/basic-info'
import LeftMiddle from '../components/population-dynamics'
import RightTop from '../components/infrastructure'
import RightBottom from '../components/city-safty'
import RightMiddle from '../components/special-person'
import LeftBottom from '../components/traffic-ranking'
import { useFsRequest } from '$utils';
import Weather from '../../water-prevention/components/weather';
import { FullScreenContainer } from '$components'
import './style.less'

function homePage(props) {
    const { dispatch, actions } = props;
    const { waterLogin, getWaterStructures, getWaterAlarms } = actions.waterprevention;
    const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
    const cardHeight = document.body.clientHeight * 0.896 * 0.32
    const cardContentHeight = cardHeight - 42 - 13
    const [waterLevelAlarms, setWaterLevelAlarms] = useState([]);

    const { data: communtityInfo = {} } = useFsRequest({ url: 'community/info' });
    useEffect(() => {
        getData();
    }, [])

    const getData = () => {
        // 水务
        dispatch(waterLogin({ username: "123456", password: "123456", pcode: 'fce4afe2-5b6a-408a-ab18-a2afa7fa027c' })).then(loginRes => {
            if (loginRes.success) {
                const { token } = loginRes.payload.data;
                sessionStorage.setItem('waterUser', JSON.stringify(loginRes.payload.data));
                // 结构物
                dispatch(getWaterStructures({ token })).then(structRes => {
                    if (structRes.success) {
                        // 告警
                        dispatch(getWaterAlarms({ token })).then(alarmRes => {
                            if (alarmRes.success) {
                                let levelAlarms = [];
                                alarmRes.payload.data.alarms.forEach(a => {
                                    let alarm = { ...a }
                                    for (const struct of structRes.payload.data) {
                                        if (struct.id === a.structureId && struct.type.name === '河流') {
                                            alarm.lng = struct.longitude;
                                            alarm.lat = struct.latitude;
                                            levelAlarms.push(alarm);
                                        }
                                    };
                                })
                                setWaterLevelAlarms(levelAlarms);
                            }
                        })
                    }
                })
            }
        })
    }

    return <>
        <FullScreenContainer>
            <div className='homepage'>
                <div className='_title'>
                    <div className='_title_text'>
                        <span>房屋租赁安全</span>
                    </div>
                    <Weather />
                    <div onClick={() => { dispatch(push('/homepage')) }} className='_exit' >返回平台</div>
                </div>
                <div className='homepage-left homepage-left-left'>
                    <div className="list">
                        <div className='child' style={childStyle}>
                            <LeftTop communtityInfo={communtityInfo} />
                        </div>
                        <div className='child' style={childStyle}>
                            <LeftMiddle />
                        </div>
                        <div className='child' style={childStyle}>
                            <LeftBottom cardContentHeight={cardContentHeight} communtityInfo={communtityInfo} />
                        </div>
                    </div>
                </div>
                <div className='community-homepage-center'>
                    {/* <Gis /> */}
                    <div className='homeTextLeft'>房屋分布</div>
                    <div className='homeTextRight'>基础设施</div>
                    <iframe src='/watergis' style={{ width: '100%', height: '100%' }} scrolling='no'
                        frameborder="no"
                        border="0" />
                </div>
                <div className='homepage-left homepage-left-right'>
                    <div className="list">
                        <div className='child-right' style={childStyle}>
                            <RightTop />
                        </div>
                        <div className='child-right' style={childStyle}>
                            <RightMiddle cardContentHeight={cardContentHeight} />
                        </div>
                        <div className='child-right' style={childStyle}>
                            <RightBottom waterLevelAlarms={waterLevelAlarms} />
                        </div>
                    </div>
                </div>

            </div>
        </FullScreenContainer>

    </>


}

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

    };
}

export default connect(mapStateToProps)(homePage);