import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router'
import { useDispatch, useSelector } from 'react-redux'
import './index.less'
import MapCtrl from './MapCtrl/index'
import HomePanelsLayoutPage from './homePanelsLayoutPage'
import Ysgzq from '../ysgzq/ssyq'
import Sssq from '../ysgzq/sssq'
import Ddxsfx from '../fxdd/dqxsfx'
// import Tqyb from '../fxdd/tqyb'
import Fhxs from './fhxs'
import Tqyb from './tqyb'
import Hsyy from './hsyy'
import Btn from './btn'


const HomePage = () => {
  const getLayerVisible = (s:any) => s.map.layerVisible;
  const mode = useSelector((s:any) => s.map.mode);
  const layerVisible = useSelector(getLayerVisible);
  const [showPanels, setShowPanels] = useState(true)
  const location = useLocation()
  const dispatch = useDispatch()
  const pathname = location.pathname





  useEffect(() => {
    // if (pathname !== '/mgr/home') {
    //   dispatch.map.setLayerVisible({ ShuiKuLayer: false })
    //   dispatch.map.setZhongxingSk(true)
    // } else {
      // dispatch.map.setLayerVisible({ ShuiKuLayer: true })
      // dispatch.map.setZhongxingSk(true)
    // }
    if(pathname === '/mgr/sy/hsyy'){
      dispatch.map.setMode('3d');
    }else{
      dispatch.map.setMode('2d');
    }
  }, [pathname])

  useEffect(() => {
    // if (pathname == '/mgr/home' && !showPanels) {
    //   dispatch.map.setZhongxingSk(true)
    //   dispatch.map.setLayerVisible({ AdcdLayer: true })
    //   dispatch.map.setLayerVisible({ ShuiKuLayer: true })
    // }
  }, [showPanels])


  return (
    <div
      style={{
        height: '100%',
        background: '#ECF2F9',
        display: 'flex',
        alignItems: 'stretch',
      }}
    >
      <div style={{ flex: 1, padding: 0 }} className="indexBox">
        <div
          style={{
            height: '100%',
            position: 'relative',
            background: '#ECF2F9',
          }}
        >
          {/* 控制按钮 */}
          <Btn showPanels={showPanels} setShowPanels={setShowPanels}/>

          {/* 地图 */}
          <MapCtrl mode={mode}/>

          {/*首页面板*/}
          {pathname === '/mgr/home' ? (
            <HomePanelsLayoutPage showPanels={showPanels} />
          ) : null}

          {/*四预-防洪形势*/}
          {pathname === '/mgr/sy/fhxzfx' ? (
            <Fhxs showPanels={showPanels}/>
          ) : null}

          {/*四预-天气预报*/}
          {pathname === '/mgr/sy/tqyb' ? (
            <Tqyb showPanels={showPanels}/>
          ) : null}

          {/*四预-洪水预演*/}
          {pathname === '/mgr/sy/hsyy' ? (
            <Hsyy showPanels={showPanels}/>
          ) : null}
          


          {/*雨水工灾情面板-雨情*/}
          {pathname === '/mgr/ysgzq/ssyq' ? (
            <div style={showPanels ? { display: 'block' } : { display: 'none' }}><Ysgzq /></div>
          ) : null}

          {/*雨水工灾情面板-水情*/}
          {pathname === '/mgr/ysgzq/sssq' ? (
            <div style={showPanels ? { display: 'block' } : { display: 'none' }}><Sssq /></div>
          ) : null}

          {/*防汛调度面板-当前形势*/}
          {pathname === '/mgr/fxdd/dqxsfx' ? (
            <div style={showPanels ? { display: 'block' } : { display: 'none' }}><Ddxsfx /></div>
          ) : null}

          {/*防汛调度-天气预报面板*/}
          {/* {pathname === '/mgr/fxdd/tqyb' ? (
            <div style={showPanels ? { display: 'block' } : { display: 'none' }}><Tqyb /></div>
          ) : null} */}
        </div>
      </div>
    </div>
  )
}

export default HomePage