import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router'
import { useDispatch, useSelector } from 'react-redux'
import { Collapse, DatePicker } from 'antd';
import './index.less'
import Yujing from './item_yujing/index.js'
import Yuqing from './item_yuqing'
import ShuiKu from './item_shuiku'
import GongShui from './item_gongshui'
import GongCheng from './item_gongcheng'
import JianCe from './item_jiance'
import ShuiZhi from './item_shuizhi'
import ShiPinDian from './item_shipindian'
import XunChaXunJian from './item_xunchaxunjian'

import GCShuiKu from './item_gongchengshuiku'
import DaBa from './item_daba'
import YiHongDao from './item_yihongdao'

import WeiXianQx from './item_weixianqu'
import AnZhiDian from './item_anzhidian'
import QSYDW from './item_qishiyedanwei'
import YHJMH from './item_yanhejuminhu'
import SetWxqStation from '../setMapStation/wxq'
import Bzt from '../../gcaqjc/bzt'

import Tuli from '../TuLi/Tuli.js'
import Tuli2 from '../TuLi/Tuli2.js';
import Tuli3 from '../TuLi/Tuli3.js'
import Tuli4 from '../TuLi/Tuli4.js'
import Tuli5 from '../TuLi/Tuli5.js'



import moment from 'moment';

const { Panel } = Collapse;
const { RangePicker } = DatePicker;

const items = [
    { key:'1', label:'综合监视', children:[
        { key:'11', label:'预警', labelRight:'预警', icon:'yujing' },
        { key:'12', label:'雨情', labelRight:'统计', icon:'yuqing' },
        { key:'13', label:'水情', labelRight:'实时水情', icon:'shuikushuiqing' },
        { key:'15', label:'工程安全', labelRight:'工程安全监测', icon:'gongchenganquan' },
        { key:'16', label:'监测设备状态', labelRight:'监测设备运行', icon:'jianceshebeizhuangtai' },
        { key:'17', label:'水质', labelRight:'水质', icon:'shuizhi' },
        { key:'18', label:'视频点', labelRight:'视频点', icon:'shipindian' },
    ] },
    // { key:'2', label:'水库工程', children:[
    //     { key:'21', label:'水库', labelRight:'基本信息', icon:'shuiku' },
    //     { key:'22', label:'大坝', labelRight:'基本信息', icon:'daba' },
    //     { key:'23', label:'溢洪道', labelRight:'基本信息', icon:'yihongdao' },
    // ] },
    { key:'2', label:'巡查巡检', children:[
        { key:'21', label:'巡查巡检', labelRight:'工程巡检', icon:'shuiku' },
        // { key:'22', label:'大坝', labelRight:'基本信息', icon:'daba' },
        // { key:'23', label:'溢洪道', labelRight:'基本信息', icon:'yihongdao' },
    ] },
    { key:'3', label:'洪水防御', children:[
        { key:'31', label:'危险区', labelRight:'危险区列表', icon:'weixianqu' },
        { key:'32', label:'安置点', labelRight:'安置点列表', icon:'anzhidian' },
        { key:'33', label:'企事业单位', labelRight:'企事业单位列表', icon:'qishiyedanwei' },
        { key:'34', label:'沿河居民户', labelRight:'沿河居民户列表', icon:'yanhejuminhu' },
    ] },
    { key:'4', label:'水资源调度', children:[
        { key:'41', label:'供水', labelRight:'今日供水实况', icon:'gongshui' },
    ] },

]

const HomePage = ({showPanels}) => {

    const dispatch = useDispatch();
    const [ checkedObj, setCheckedObj ] = useState({})
    const [ showTable, setShowTable ] = useState(false)
    const [ tms , setTms ] = useState([
        moment(moment().add(-1,'days').format('YYYY-MM-DD 08:00:00')),
        moment(moment().format('YYYY-MM-DD 08:00:00')),
    ])


    useEffect(()=>{
        dispatch.runtime.closeFeaturePopAll()
        if(checkedObj.label==='水库'||checkedObj.label==='大坝'||checkedObj.label==='溢洪道'||checkedObj.label==='视频点'){
            dispatch.map.setLayerVisible({ PicStLayer: true })
        }else{
            dispatch.map.setLayerVisible({ PicStLayer: false })
        }

        if(checkedObj.label==='危险区'||checkedObj.label==='安置点'||checkedObj.label==='企事业单位'||checkedObj.label==='沿河居民户'){
            dispatch.map.setLayerVisible({ AZDLayer: true })
            dispatch.map.setLayerVisible({ QSYDWLayer: true })
            dispatch.map.setLayerVisible({ YHJMHLayer: true })
        }else{
            dispatch.map.setLayerVisible({ AZDLayer: false })
            dispatch.map.setLayerVisible({ QSYDWLayer: false })
            dispatch.map.setLayerVisible({ YHJMHLayer: false })
        }

        return ()=>{
            dispatch.runtime.closeFeaturePopAll()
            dispatch.map.setLayerVisible({ PicStLayer: false })
            dispatch.map.setLayerVisible({ AZDLayer: false })
            dispatch.map.setLayerVisible({ QSYDWLayer: false })
            dispatch.map.setLayerVisible({ YHJMHLayer: false })
        }
    },[checkedObj])

    useEffect(()=>{
        setCheckedObj({ key:'12', label:'雨情', labelRight:'统计', icon:'yuqing' })
    },[])
  

    return (
        <div className='homePage' style={{display:!showPanels?'none':'block'}}>
            <div className='homePage_leftBox'>
                <div className='homePage_head'>综合展示</div>
                <Collapse ghost onChange={(a)=>{
                    dispatch.runtime.closeFeaturePopAll()
                    if(a===undefined){
                        setCheckedObj({ key:'12', label:'雨情', labelRight:'统计', icon:'yuqing' })
                        setShowTable(false)
                    }else if(a==='1'){
                        setShowTable(true)
                        dispatch.runtime.setHome()
                        setCheckedObj({ key:'11', label:'预警', labelRight:'预警', icon:'yujing' })
                    }else if(a==='2'){
                        // setShowTable(true)
                        // dispatch.runtime.setHome()
                        setCheckedObj({ key:'21', label:'巡查巡检', labelRight:'工程巡检', icon:'shuiku' })
                    }else if(a==='3'){
                        dispatch.runtime.setCameraTarget({
                            center: [114.75, 31.493],  
                            zoom: 13.5,
                            pitch: 60
                          })
                        setShowTable(true)
                        setCheckedObj({ key:'31', label:'危险区', labelRight:'危险区列表', icon:'weixianqu' })
                    }else if(a==='4'){
                        setCheckedObj({ key:'41', label:'供水', labelRight:'今日供水实况', icon:'gongshui' })
                    }else{
                    }
                }} expandIconPosition="end" accordion={true} bordered={false}>
                    {
                        items.map((item,index)=>
                            <Panel  
                                key={item.key}
                                header={
                                    <>
                                        <div className='homePage_Panel'>
                                            <div className='homePage_Panel_icon'></div>
                                            {item.label}
                                        </div>
                                    </>
                                }
                            >
                                {
                                    item.children.map((item)=>
                                        <dit className='homePage_Panel_item' style={(checkedObj.key===item.key&&showTable)?{color:'#409eff'}:{}} onClick={()=>{
                                            setCheckedObj(item)
                                            setShowTable(true)
                                            }}>
                                            <img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/${item.icon}.png`} width="20" height="20" alt="" style={{marginRight:'10px'}} />
                                            {item.label}
                                            {
                                                (checkedObj.key===item.key&&showTable)?
                                                <div style={{flex:1,display:'flex',flexDirection:'row-reverse'}}>
                                                    <div style={{width:"3px",height:'40px',background:'rgba(64, 158, 255, 1)'}}></div>
                                                </div>
                                                :null
                                            }
                                        </dit>
                                    )
                                }
                            </Panel>
                        )
                    }
                </Collapse>
            </div>
            {
                (checkedObj.label === '预警'||checkedObj.label === '雨情')?
                <div className='homePage_centerBox'><RangePicker showTime value={tms} disabled/></div>
                :null
            }
            {
                checkedObj.labelRight?
                <div className='homePage_rightBox' style={{display:!showPanels?'none':'block',padding:showTable?'10px':'0px'}}>
                    {
                        showTable?
                        <div className='homePage_head2'>
                            <div className='homePage_head2_Bg'>
                                <img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{margin:'0 10px'}} />
                                {checkedObj.labelRight}
                            </div>
                            <div style={{display:'flex',alignItems:'center'}}>
                                {/* <img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/x.svg`} width="12" height="12" alt="" style={{margin:'0 10px'}} /> */}
                            </div>
                        </div>:null
                    }
                    { checkedObj.label === '预警' ? <><Yujing mySetTms={setTms}/><Yuqing mySetTms={setTms} show={false}/></>:null }
                    { checkedObj.label === '雨情' ? <Yuqing mySetTms={setTms} show={showTable}/>:null }
                    { checkedObj.label === '水情' ? <ShuiKu/>:null }
                    { checkedObj.label === '供水' ? <GongShui/>:null }
                    { checkedObj.label === '工程安全' ? <GongCheng/>:null }
                    { checkedObj.label === '监测设备状态' ? <JianCe/>:null }
                    { checkedObj.label === '水质' ? <ShuiZhi/>:null }
                    { checkedObj.label === '视频点' ? <ShiPinDian/>:null }

                    { checkedObj.label === '巡查巡检' ? <XunChaXunJian/>:null }

                    { checkedObj.label === '水库' ? <GCShuiKu/>:null }
                    { checkedObj.label === '大坝' ? <DaBa/>:null }
                    { checkedObj.label === '溢洪道' ? <YiHongDao/>:null }

                    { checkedObj.label === '危险区' ? <WeiXianQx/>:null }
                    { checkedObj.label === '安置点' ? <AnZhiDian/>:null }
                    { checkedObj.label === '企事业单位' ? <QSYDW/>:null }
                    { checkedObj.label === '沿河居民户' ? <YHJMH/>:null }

                    { checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户'?<SetWxqStation/>:null }
                </div>
                :null
            }

            {
                checkedObj.label === '工程安全' ?<div className='homePage_bztBox'>
                    <Bzt isHome={true}/>
                </div>:null
            }

            <div className='homePage_leftBottomBox'>
                { checkedObj.label==='雨情'?<Tuli/>:null }
                { checkedObj.label==='水情'?<Tuli2/>:null }
                { checkedObj.label==='供水'?<Tuli3/>:null }
                { (checkedObj.label==='水库'||checkedObj.label==='大坝'||checkedObj.label==='溢洪道'||checkedObj.label==='视频点')?<Tuli4/>:null }
                { (checkedObj.label==='危险区'||checkedObj.label==='安置点'||checkedObj.label==='企事业单位'||checkedObj.label==='沿河居民户')?<Tuli5/>:null }
            </div>
            
        </div>
    )
}

export default HomePage