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';



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);
            }}
            // sx={{
            //   color: '#fff',
            //   '.MuiOutlinedInput-notchedOutline': {
            //     borderColor: 'rgba(255, 255, 255, 0.3)',
            //   },
            //   '&:hover .MuiOutlinedInput-notchedOutline': {
            //     borderColor: 'rgba(255, 255, 255, 0.6)',
            //   },
            //   '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            //     borderColor: '#fff',
            //   }
            // }}
          >
            <MenuItem value="ft">水情站1</MenuItem>
            <MenuItem value="lc">水情站2</MenuItem>
            <MenuItem value="mz">水情站3</MenuItem>
            <MenuItem value="sb">水情站4</MenuItem>
          </Select>
          </div>
        </>
      }
    >
      <AreaDrpChart data={[]} /> 
    </PanelBox>
  )
} 
 
export default DrpReal;