import React, { useMemo, useState } from 'react';
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
import PanelBox from '../../components/PanelBox';
import AreaDrpChart from './chart';
import TableYb from './tableYb'
import './index.less'

function DrpReal({ style }) {
  const [dimension, setDimension] =useState('ft');


  return ( 
    <PanelBox
      style={style}
      title="水库预报"
      color="green"
      extra={
        <>
          {/* <img  src='/assets/年下拉3.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/> */}
          <div style={{height:'30px',overflow:'hidden'}}>
          <Select
            labelId="analysis-select-label"
            value={dimension}
            label=""
            onChange={(event) => {
              const value = event.target.value;
              setDimension(value);
            }}
          >
            <MenuItem value="ft">浮桥河水库</MenuItem>
          </Select>
          </div>
        </>
      }
    >
      <div className='skyb-box'>
        <div className='rain-yb'>
          <div className='title-yb'>水库雨量预报</div>
             <TableYb />
        </div>
        <div className='rain-yb'>
          <div className='title-yb'>水库24h预报</div>
          <img src={`${process.env.PUBLIC_URL}/assets/yuanyanjg.png`}
            alt=""
            style={{  width: '100%',height:200 }}
          />
        </div>
      </div>
    </PanelBox>
  )
} 
 
export default DrpReal;