import React, { useEffect, useState } from 'react'
import { Collapse, DatePicker } from 'antd';
import {useDispatch, useSelector} from "react-redux";
import Jyxx from './jyxx'
import Sksw from './sksw'
import TuLi from '../TuLi/Tuli.js';
import moment from 'moment';
import { SkRealPromiseWX } from "../../../models/_/real";
import './index.less'
const { Panel } = Collapse;
const { RangePicker } = DatePicker

const Page = ({showPanels}) => {  
    const dispatch = useDispatch();
    let mapObj = useSelector(s => s.map.map)
    const [tms, setTms] = useState([moment(moment().add(-1,'days').format('YYYY-MM-DD 08:00')),moment(moment().format('YYYY-MM-DD 08:00'))])
    const [myKey, setMyKey] = useState('')
    const [data,setData] = useState({})//水库

    useEffect(()=>{
        dispatch.map.setLayerVisible({ ShuiKuLayer: true })
        getData()
        return ()=>{
            dispatch.map.setLayerVisible({ ShuiKuLayer: false })
        }
    },[])

    useEffect(()=>{
      if(mapObj){
        setMyKey('1')
      }
    },[mapObj])

  const getData = async (params) => {
    SkRealPromiseWX.get().then((res) => {
      const list = res.map((i)=>{
        return {
          id : i.stcd,
          name: i.stnm,
          ...i
        }
      })
      const data = list[0]
      setData(data)
    });
  }

  const getShuiKu = (e)=>{
    e.stopPropagation()
    dispatch.runtime.setFeaturePop({
      id: data.id,
      type: 'shuiku',
      data,
      lgtd: data.lgtd,
      lttd: data.lttd,
      elev: data.elev,
    })
  }

  return (
    <div className='fxdd_fhxs' style={{display:!showPanels?'none':'block'}}>
        <div className='homePage_leftBox'>
            <Collapse ghost onChange={(e)=>setMyKey(e)} defaultActiveKey={['1']} expandIconPosition="end" accordion={true} bordered={false}>
                <Panel  
                    key={'1'}
                    header={<div className='homePage_Panel'><img src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} alt=""/>降雨信息</div>}
                >
                    { myKey==='1'||myKey==='2'?<Jyxx setTms2={setTms}/>:null } 
                </Panel>
                <Panel
                    key={'2'}
                    header={<div className='homePage_Panel'><img src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} alt=""/>水库水位（近七日）
                    {
                      data.resCode?<div onClick={getShuiKu} className='fxdd_fhxs_xq'>详情</div>:null
                    }
                    </div>}
                >
                    { myKey==='2'?<Sksw data={data}/>:null }
                </Panel>
            </Collapse>
        </div>
        <div style={{position:'absolute',left:'calc( 40% + 50px)',top:'10px'}} className='homePage_centerBox2'><RangePicker showTime value={tms} disabled/></div> 
        <div style={{position:'absolute',left:'20px',top:'calc( 100vh - 400px )'}}><TuLi/></div>
    </div>
  );
}

export default Page;