import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router'
import { useDispatch, useSelector } from 'react-redux'
import { Drawer } from 'antd'
import './index.less'
import MapCtrl from './MapCtrl'
import HomePanelsLayoutPage from './homePanelsLayoutPage'
import LayersPage from '../Home/dlg/LayersDlg'
import Shouqi2 from './img/shouqi2.png'
import Zhankai2 from './img/zhankai2.png'
import DiQiu from './img/DiQiu.png'
import ZhongXin from './img/ZhongXin.png'
import Ysgzq from '../ysgzq/ssyq'
import Sssq from '../ysgzq/sssq'
import Yqz from '../fxzb/jczw/yqz/index.js'
import Sqz from '../fxzb/jczw/sqz/index.js'
import Ddxsfx from '../fxdd/dqxsfx'
// import Tqyb from '../fxdd/tqyb'
import Fhxs from './fhxs'
import Tqyb from './tqyb'
import Tuli from './img/tuli.png'
import ysgzqTuli from './img/ysgzqTuli.png'


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

  //收起\展开
  const collapseExpand = () => {
    setShowPanels(!showPanels)
  }

  //还原地图位置
  const reduction = () => {
    dispatch.runtime.setHome()
  }

  //图层控制
  const showLayers = () => {
    setOpen(!open)
  }

  const onClose = () => {
    setOpen(false)
  }

  useEffect(() => {
    // if (pathname !== '/mgr/home') {
    //   dispatch.map.setLayerVisible({ ShuiKuLayer: false })
    //   dispatch.map.setZhongxingSk(true)
    // } else {
      // dispatch.map.setLayerVisible({ ShuiKuLayer: true })
      // dispatch.map.setZhongxingSk(true)
    // }
  }, [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',
          }}
        >
          {/* 控制按钮 */}
          <div
            className="toolBox"
            style={{
              position: 'absolute',
              zIndex: '110',
              right: '-1rem',
              top: '-7px',
            }}
          >
            <div className="layerPanelBtn clearFloat">
              <div className="lf" title="地图展示图层控制" onClick={showLayers}>
                <img
                  src={DiQiu}
                  alt=""
                  style={{ width: '30px', marginTop: '5px' }}
                />
              </div>
              <div className="lf" title="还原地图展示位置" onClick={reduction}>
                <img
                  src={ZhongXin}
                  alt=""
                  style={{ width: '30px', marginTop: ' 5px' }}
                />
              </div>
              <div
                className="lf"
                title="收起悬浮功能块"
                onClick={collapseExpand}
              >
                {showPanels ? (
                  <img
                    src={Shouqi2}
                    alt=""
                    style={{ width: '30px', marginTop: '5px' }}
                  />
                ) : (
                  <img
                    src={Zhankai2}
                    alt=""
                    style={{ width: '30px', marginTop: '5px' }}
                  />
                )}
              </div>
              {/* <div className="lf" title="地图放大" onClick={()=>{
                dispatch.runtime.setIn();
              }}>
                <img src={Fangda} alt="" style={{ width: "18px", marginTop: "-5px" }} />
              </div>
              <div className="lf" title="地图缩小" onClick={()=>{
                dispatch.runtime.setOut();
              }}>
                <img src={Suoxiao} alt="" style={{ width: "18px", marginTop: "-5px" }} />
              </div> */}
              {/* <div className="lf" title="地图展示图层控制" onClick={showLayers}>
                <DatabaseFilled style={{ fontSize: "17px", marginTop: "2px" }} />
              </div> */}
              <div className='mapToolBoxTuCeng' style={{left:open?'-170px':'5px'}}>
                <div className='mapToolBoxTuCengItem' style={{color:!!layerVisible["SatelliteImage"]?'#1677ff':'black'}} onClick={()=>{
                  dispatch.map.setLayerVisible({ ['OfflineMap']: false });
                  dispatch.map.setLayerVisible({ ['SatelliteImage']: true });
                  //卫星图打开河流面很丑，所以关掉
                  mapObj && mapObj.getLayers().getArray().forEach((layer:any)=> {
                    if(layer.values_.name === "HLLayer"||layer.values_.name === "HL2Layer"){
                      layer.setVisible(false);
                    }
                    if(layer.values_.name === "HLLayer2"){
                      layer.setVisible(true);
                    }
                  });
                }}>
                  <img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/yingxiangtu.png`} alt=""/>
                  影像图
                </div>
                <div className='mapToolBoxTuCengItem' style={{color:!!layerVisible["OfflineMap"]?'#1677ff':'black'}}  onClick={()=>{
                  dispatch.map.setLayerVisible({ ['SatelliteImage']: false });
                  dispatch.map.setLayerVisible({ ['OfflineMap']: true });
                  mapObj && mapObj.getLayers().getArray().forEach((layer:any)=> {
                    if(layer.values_.name === "HLLayer"||layer.values_.name === "HL2Layer"){
                      layer.setVisible(true);
                    }
                    if(layer.values_.name === "HLLayer2"){
                      layer.setVisible(false);
                    }
                  });
                }}>
                  <img width={50} height={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/shiliangtu.svg`} alt=""/>
                  矢量图
                </div>
              </div>
            </div>
          </div>


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


          {/*首页面板*/}
          {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/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