import React, { useEffect, useState, useRef, useMemo } 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 { getTableData } from './service';
import moment from 'moment';


const { RangePicker } = DatePicker


const Page = ({ setCtx }) => {
  const dispatch = useDispatch();
  let mapObj = useSelector(s => s.map.map)
  const [index,setIndex] = useState(0)
  const [data,setData] = useState([])
  const [project, setProject] = useState(null)
  const [open, setOpen] = useState(false)
  const [name, setName] = useState('')
  const [tms,setTms] = useState([])
  const listData = useMemo(()=>{
    let list = [...data]
    if(name){
      list = list.filter((i)=>i.name.indexOf(name)>-1)
    }
    if(tms&&tms.length>0){
      list = list.filter((i)=>{
        const stm = moment(tms[0])
        const etm = moment(tms[1])
        const tm = moment(i.updateTm)
        if(tm.isAfter(stm)&&etm.isAfter(tm)){
          return true
        }else{
          return false
        }
      })
    }
    return list
  },[data,name,tms])


  
  
  useEffect(() => {
    getData()
  }, [])
  
  const getData = async()=>{
    const data = await getTableData()
    setData([data[0],data[1]])
  }


  const openModal = (item)=>{
    if(index===0){ item.czmlPath = `${process.env.PUBLIC_URL}/data/json/czml1.json` }
    if(index===1){ item.czmlPath = `${process.env.PUBLIC_URL}/data/json/czml2.json` } 
    setOpen(true)
    setProject(item)
  }
  const closeModal = ()=>{
    setOpen(false)
    setProject(null)
  }

  return (
    <>
    <div className='hsyyBox'>
      <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'}} value={'222'} onChange={(e)=>setName(e.nativeEvent.target.value)}/>
        </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>
      <div className='hsyyScrollBox'>
      {
        listData?.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={()=>openModal(item)}>方案配置</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'>{item.ycMaxSwH||'-'}</div></div>
            <div className='hsyylistBoxLabel'>预报最大入库流量(m³/s)：<div className='hsyylistBoxValue'>{item.ycMaxRkQ||'-'}</div></div>
            <div className='hsyylistBoxLabel'>预报最大下泄流量(m³/s)：<div className='hsyylistBoxValue'>{item.ycMaxCkQ||'-'}</div></div>
            <div className='hsyylistBoxLabel'>预报洪水总量(万m³)：<div className='hsyylistBoxValue'>{item.ycSumFlood||'-'}</div></div>
            <div className='hsyylistBoxLabel'>方案制作时间：<div className='hsyylistBoxValue'>{item.updateTm}</div></div>
          </div>
          </>
        ))
      }
      </div>
    </div>

    <Modal width={1500} wrapClassName='home_modal'  bodyStyle={{padding:0}}  title={null} closable={false} footer={null} open={open} onCancel={closeModal} destroyOnClose={true}>
      <ModalForm project={project} index={index} onCancel={closeModal} setCtx={setCtx}/>
    </Modal>
    </>
  )
}

export default Page