import React, { useEffect, useState, useRef } from 'react'
import { useLocation } from 'react-router'
import { useDispatch, useSelector } from 'react-redux'
import {Form, Input, DatePicker, Popover, Collapse , Button, message, Table, Col, Modal} from 'antd';
import { createCrudService } from '../../../components/crud/_';
import apiurl from '../../../service/apiurl';
import ModalForm from './information';
import { httppost2 } from '../../../utils/request';


const { RangePicker } = DatePicker


const Page = ({ showPanels }) => {
  const dispatch = useDispatch();
  let mapObj = useSelector(s => s.map.map)
  const [index,setIndex] = useState(0)
  const [data,setData] = useState([])
  const [projectId, setProjectId] = useState('')
  const [open, setOpen] = useState(false)
  const [mode,setMode] = useState(0)



  
  
  useEffect(() => {
    getData()
  }, [])
  
  const getData = async()=>{
    const { code, data } = await httppost2(apiurl.fxdd_xyt.hsyb.ybfagl.page, {
      "pageSo": {
          "pageSize": 99999,
          "pageNumber": 1
      },
      "orderField": "chtm",
      "isAsc": false
    });
    if(code!==200){
      return
    }
    setData(data?.records||[])
  }

  const show = (data)=>{
    setOpen(false)
    setMode(1)
  }


  return (
    <>
    <div className='hsyyBox'>
      {
        mode===0?<>
        <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' }} />
                预报方案
            </div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
            </div>
        </div>
        <Form className='toolbarBox'>
          <Form.Item label="队伍名称" name='name' style={{ margin: '0 0 0 5px' }}>
            <Input style={{width:'90%',height:'28px',lineHeight:'28px'}} />
          </Form.Item>
          <Form.Item label='时段选择' name='tm' style={{ margin: '0 0 4px 5px' }}>
            <RangePicker
              style={{ width: '90%',height:'28px',lineHeight:'28px' }}
              // onChange={(v)=>setTms(v)}
              // value={tms}
              format='YYYY-MM-DD HH:mm'
            />
          </Form.Item>
        </Form>
        {
          data?.map((item,listIndex)=>(
            <>
            <div 
              style={{height:listIndex===index?'200px':'45px',cursor:'pointer'}}
              className='hsyylistBox' 
              onClick={()=>setIndex(listIndex)}
            >
              <div className='hsyylistBoxTitle'>{(listIndex+1)+'.'+item.name}{
                listIndex===index?
                <span onClick={()=>{
                  setOpen(true)
                  setProjectId(item.id)
                }}>方案配置</span>:
                <span style={{color:'#8FAFC4',borderColor:'#8FAFC4'}}>方案配置</span>
              }</div>
              <div className='hsyylistBoxLabel'>预报时段：<div className='hsyylistBoxValue'>{item.startTm}至{item.endTm}</div></div>
              <div className='hsyylistBoxLabel'>预报最高调洪水位(m)：<div className='hsyylistBoxValue'>-</div></div>
              <div className='hsyylistBoxLabel'>预报最大入库流量(m³/s)：<div className='hsyylistBoxValue'>-</div></div>
              <div className='hsyylistBoxLabel'>预报最大下泄流量(m³/s)：<div className='hsyylistBoxValue'>-</div></div>
              <div className='hsyylistBoxLabel'>预报洪水总量(万m³)：<div className='hsyylistBoxValue'>-</div></div>
              <div className='hsyylistBoxLabel'>方案制作时间：<div className='hsyylistBoxValue'>{item.updateTm}</div></div>
            </div>
            </>
          ))
        }
        </>:null
      }

      {
        mode===1?<>
        <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' }} />
                卸洪结果
            </div>
            <div style={{ display: 'flex', alignItems: 'center' }} onClick={()=>{
              setProjectId(null)
              setMode(0)
            }}>
              返回
            </div>
        </div>
        <div className='hsyylistBox' >
          <div className='hsyylistBoxLabel'>预报时段：<div className='hsyylistBoxValue'>{}至{}</div></div>
          <div className='hsyylistBoxLabel'>预报最高调洪水位(m)：<div className='hsyylistBoxValue'>-</div></div>
          <div className='hsyylistBoxLabel'>预报最大入库流量(m³/s)：<div className='hsyylistBoxValue'>-</div></div>
          <div className='hsyylistBoxLabel'>预报最大下泄流量(m³/s)：<div className='hsyylistBoxValue'>-</div></div>
          <div className='hsyylistBoxLabel'>预报洪水总量(万m³)：<div className='hsyylistBoxValue'>-</div></div>
          <div className='hsyylistBoxLabel'>方案制作时间：<div className='hsyylistBoxValue'>{}</div></div>
        </div>

        <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' }} />
                水位
            </div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
            </div>
        </div>

        <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' }} />
                出入库流量
            </div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
            </div>
        </div>
        </>:null
      }
    </div>

    <Modal width={1500} wrapClassName='home_modal'  bodyStyle={{padding:0}}  title={null} closable={false} footer={null} open={open} onCancel={()=>setOpen(false)} destroyOnClose={true}>
      <ModalForm projectId={projectId} onCancel={()=>setOpen(false)} show={show}/>
    </Modal>
    </>
  )
}

export default Page