import React, { useEffect, useState, useRef } from 'react'
import { useLocation } from 'react-router'
import { useDispatch, useSelector } from 'react-redux'
import { Collapse, DatePicker, Input, Modal, message } from 'antd';
import './index.less'
import Ybfa from './ybfa'
import Ymtj from './ymtj'
import Demo3D from '../../Home/MapCtrl/Map3D/demo'
const { Cesium } = window;


const Page = ({ showPanels }) => {
  const dispatch = useDispatch();
  let mapObj = useSelector(s => s.map.map)
  const [ map, setMap ] = useState(null)
  const [ ctx, setCtx ] = useState({mode:'预报方案',data:{}})
  useEffect(()=>{
  },[])
  
  useEffect(() => { 
    dispatch.map.setLayerVisible({
      RealDrpLayer: true,
      PicStLayer: true,
      ShuiKuLayer: true,
      GongShuiLayer: true,
      AZDLayer: true,
      QSYDWLayer: true,
      YHJMHLayer: true
    });
    const { mode } = ctx
    //当前map对象是cesium
    if(!mapObj?._cesiumWidget){
      return
    }

    if(mode==='淹没统计'){
      mapObj.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(114.786546000,31.496518000,1500),
        orientation: {
          heading: Cesium.Math.toRadians(-90),
          pitch: Cesium.Math.toRadians(-35.0),
          roll: 0.0
        }
      });

      const demo = new Demo3D()    
      demo.getCzml2(mapObj)
    }else{
      mapObj.dataSources._dataSources.forEach(dataSource => {
          if (dataSource.name === 'CZML1111') { // 确保你知道你想要移除的数据源名称
            mapObj.dataSources.remove(dataSource);
          }
      });
    
      mapObj.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(114.771546000,31.497518000,650),
        orientation: {
          heading: Cesium.Math.toRadians(-90),
          pitch: Cesium.Math.toRadians(-45.0),
          roll: 0.0
        }
      });
    }
    



    // demo.getCzml2(mapObj)//demo
    // const tm = {
    //     "dayNumber": 2460957,
    //     "secondsOfDay": 75115.485
    // } 
    // debugger
    // setTimeout(() => {
    //   mapObj.clock.currentTime = tm;
    // }, 10000);
    // this.demo.getDem(viewer) //地形图
    // this.demo.getGltf(viewer) //模型
    // this.demo.getWater(viewer)//简单淹没分析
    // this.demo.getWater2(viewer)
    // this.demo.getRlt2(viewer)  
    // this.demo.getRlt3(viewer)  //热力图
    // this.demo.getCzml(viewer)  //czml模型

    return ()=>{
      dispatch.map.setLayerVisible({
        RealDrpLayer: false,
        PicStLayer: false,
        ShuiKuLayer: false,
        GongShuiLayer: false,
        AZDLayer: false,
        QSYDWLayer: false,
        YHJMHLayer: false
      });
    }
  }, [mapObj,ctx])

  


  return (
    <div className='homePage' style={{ display: !showPanels ? 'none' : 'block' }}>
      <div className='homePage_rightBox' style={{ display: !showPanels ? 'none' : 'block', padding: '0px' }}>
        { ctx.mode==='预报方案'?<Ybfa setCtx={setCtx}/>:null }
        { ctx.mode==='淹没统计'?<Ymtj setCtx={setCtx} ctx={ctx}/>:null}
      </div>
    </div>
  )
}

export default Page