import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import Left from '../components/item-left'
import Right from '../components/item-right'
import LeftTop from '../components/left-top'
import LeftMiddle from '../components/left-middle'
import LeftBottom from '../components/left-bottom'
import RightTop from '../components/right-top'
import RightMiddle from '../components/right-middle'
import RightBottom from '../components/right-bottom'
import Gis from './gis';
import './style.less'
import Weather from '../../water-prevention/components/weather';
import { FullScreenContainer } from '$components'
import { useFsRequest } from '$utils';

function homePage(props) {
    const { dispatch, actions } = props;
    const childStyle = { height: '32%', color: '#fff', marginBottom: 17 }
    const cardHeight = document.body.clientHeight * 0.896 * 0.32
    const cardContentHeight = cardHeight - 42 - 13
    const [tab, setTab] = useState('overview')
    const [emengencyTab, setEmengencyTab] = useState('xfyjwz');
    const [alarmInfo, setAlarmInfo] = useState({})
    const [fireDevice, setFireDevice] = useState([])
    const [fireTrend, setFireTrend] = useState([])

    const { data: emergencyList = {} } = useFsRequest({ url: 'water/emergency' });
    const endEvent = () => {
        dispatch(actions.firecontrol.modifyFireAlarm(
            alarmInfo?.alarmInfo?.id, { state: 2 }
        )).then(res => {
            setTab('overview')
        })
    }

    useEffect(() => {
        getFireData();
    }, [])

    const getFireData = () => {
        dispatch(actions.firecontrol?.getFireDevice()).then(res => {
            if (res?.payload?.data?.length) {
                const filterData = res.payload.data.filter(d => d.device_count)
                setFireDevice(filterData)
            }
        })
        dispatch(actions.firecontrol?.getFireTrend()).then(res => {
            if (res?.payload?.data) {
                setFireTrend(res.payload.data)
            }
        })
    }

    return <>
        <FullScreenContainer>
            <div className='homepage'>
                <div className='_title'>
                    <div className='_title_text'>
                        <span>智慧消防</span>
                        <div className='_title_dot'></div>
                        <span>一键护航</span>
                    </div>
                    <Weather />
                    <div onClick={() => { dispatch(push('/homepage')) }} className='_exit' >返回平台</div>
                </div>
                <div className='homepage-left homepage-left-left'>
                    <div div className="list">
                        {tab == 'overview' ?
                            <>
                                <div className='child' style={childStyle}>
                                    <LeftTop emergencyList={emergencyList} />
                                </div>
                                <div className='child' style={childStyle}>
                                    <LeftMiddle fireDevice={fireDevice} />
                                </div>
                                <div className='child' style={childStyle}>
                                    <LeftBottom cardContentHeight={cardContentHeight} fireTrend={fireTrend} />
                                </div>
                            </>
                            :
                            <div className='child' style={{ height: '100%' }} >
                                <Left
                                    info={alarmInfo}
                                    endEvent={() => { endEvent() }}
                                    cardContentHeight={document.body.clientHeight * 0.896} />
                            </div>
                        }
                    </div>
                </div>
                <div className='homepage-center'>
                    <Gis
                        emergencyList={emergencyList}
                        dispatch={dispatch}
                        actions={actions}
                        propTab={tab}
                        alarmOk={(info) => {
                            setTab('item')
                            setAlarmInfo(info);
                        }}
                        changeEmengencyTab={(e) => {
                            setEmengencyTab(e)
                        }}
                    />
                </div>
                <div className='homepage-left homepage-left-right'>
                    {tab == 'overview' ? <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 />
                        </div>
                    </div> :
                        <div className='child' style={{ height: '100%' }} >
                            <Right emergencyList={emergencyList} emengencyTab={emengencyTab} cardContentHeight={document.body.clientHeight * 0.896} />
                        </div>
                    }
                </div>

            </div >
        </FullScreenContainer>

    </>


}

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

    };
}

export default connect(mapStateToProps)(homePage);