import React, { useEffect, useState } from 'react'
import { Collapse } from 'antd';
import {useDispatch, useSelector} from "react-redux";
import H24 from './h24'
import H2 from './h2'
import moment from 'moment';
import RadarPage from '../../Home/panels/forecastPanels/meteorology/radar/player'
import SateCloudPage from '../../Home/panels/forecastPanels/meteorology/sateCloud/player'
import './index.less'
const { Panel } = Collapse;

const Page = ({showPanels}) => {  
    const dispatch = useDispatch();
    const [myKey, setMyKey] = useState('1')
    const [badgeType, setBadgeType] = useState('')
    const [tmObj,setTmObj] = useState({
        tm:moment(),
        hours:'08'
    }) 
    useEffect(()=>{
      setBadgeType('雷达回波')
      dispatch.runtime.setCameraTarget({
        center: [115.2, 31.18],
        zoom: 9,
        pitch: 60
      })
      dispatch.map.setLayerVisible({ ShuiKuLayer: true })
      return ()=>{
          dispatch.map.setLayerVisible({ ShuiKuLayer: false })
      }
    },[])

  return (
    <div className='fxdd_fhxs' style={{display:!showPanels?'none':'block'}}>
        <div className='homePage_leftBox'>
            <Collapse 
                // ghost 
                // onChange={(e)=>setMyKey(e)} 
                // expandIconPosition="end" 
                // accordion={true} 
                // bordered={false}
                // defaultActiveKey={['1']}
                // destrInactivePanel
                defaultActiveKey={['1']}
                expandIconPosition='end'
                destrInactivePanel
                accordion
                onChange={e => {
                    setMyKey(e)
                  }}
                >
                <Panel  
                    key={'1'}
                    header={<div className='homePage_Panel'><img src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} alt=""/>未来24小时</div>}
                >
                    {/* { myKey==='1'?<H24 setBadgeType={setBadgeType} setTmObj={setTmObj}/>:null } */}
                    <H24 setBadgeType={setBadgeType} setTmObj={setTmObj}/>
                </Panel>
                <Panel  
                    key={'2'}
                    header={<div className='homePage_Panel'><img src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} alt=""/>短临预报</div>}
                >
                    {/* { myKey==='2'?<H2/>:null } */}
                    <H2/>
                </Panel>
            </Collapse>
        </div>

        {
        (badgeType === '雷达回波'&&myKey==='1') ? (
          <div className='radarPageBox'>
            <RadarPage
              activeKey={'0'}
              badgeType={1}
              tm={tmObj.tm}
              ts={tmObj.hours}
            />
          </div>
        ) : null}

        {(badgeType === '卫星云图'&&myKey==='1') ? (
          <div className='sateCloudPageBox'>
            <SateCloudPage
              activeKey={'0'}
              badgeType={0}
              tm={tmObj.tm}
            />
          </div>
        ) : null}
    </div>
  );
}

export default Page;