import React, { useEffect, useState } from 'react';
import moment from "moment"
import { CloseOutlined } from '@ant-design/icons';
import titleBg from '@/assets/images/modal/title.png';
import { Modal, Tabs } from 'antd';
import './index.less'
import ReservoirPanel from '../../../components/Business/SiQuan/components/ModalComponents/AllWeatherModal/ReservoirPanel'


function ShuikuPop({ id, data, dispatch }) {
  console.log(data);
  const [show, setShow] = useState(false)
  
  useEffect(()=>{
    setTimeout(() => {
      //防止Modal打开时echarts不能找到正确的大小
      setShow(true)
    }, 200);
  },[])
  
  const closePop = () => {
    dispatch.runtime.closeFeaturePop(id);
  };

  return (
    <>
      <div className='shuikuPop'>
        <div className="modal-header">
          <div className="title-wrapper" style={{ backgroundImage: `url(${titleBg})` }}>
            <span className="title-text">{data.stnm}</span>
          </div>
          <div className="close-btn" onClick={closePop}>
            <CloseOutlined />
          </div>
        </div>
        <div className="modal-body">
            {show?<ReservoirPanel stcd={data?.stcd} cleanMode={true} />:null}
        </div>
      </div>
    </>
  )
}

export default React.memo(ShuikuPop);