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('61614460');
  const data = [
    {
      "stcd": "61614460",
      "stnm": "项生(宋埠)",
      "adcd": "421181000000000",
      "wscd": null,
      "importancy": 0,
      "lgtd": 114.798056,
      "lttd": 31.058611,
      "elev": null,
      "hasRz": true,
      "wrz": null,
      "wrq": null,
      "grz": null,
      "grq": null,
      "sfz": null,
      "sfq": null,
      "type": "sh",
      "tm": "2025-06-03T02:00:00.000Z",
      "rz": 21.91,
      "trend": 1,
      "state": 1,
      "warning": 0,
      "maxRz": 21.91,
      "maxDate": "2025-06-03T02:00:00.000Z",
      "warndes": null
  },{
    "stcd": "61613700",
    "stnm": "四角门(宋铁二桥)",
    "adcd": "421181000000000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 114.8291,
    "lttd": 31.0754,
    "elev": null,
    "hasRz": true,
    "wrz": null,
    "wrq": null,
    "grz": null,
    "grq": null,
    "sfz": null,
    "sfq": null,
    "type": "sh",
    "tm": "2025-06-03T02:00:00.000Z",
    "rz": 27.57,
    "trend": 0,
    "state": 1,
    "warning": 0,
    "maxRz": 27.57,
    "maxDate": "2025-06-03T01:00:00.000Z",
    "warndes": null
},{
  "stcd": "61612910",
  "stnm": "桃林河(阎河)",
  "adcd": "421181000000000",
  "wscd": null,
  "importancy": 0,
  "lgtd": 115.087777777,
  "lttd": 31.164444444,
  "elev": null,
  "hasRz": true,
  "wrz": null,
  "wrq": null,
  "grz": null,
  "grq": null,
  "sfz": null,
  "sfq": null,
  "type": "sh",
  "tm": "2025-06-03T02:35:00.000Z",
  "rz": 55.67,
  "trend": 0,
  "state": 1,
  "warning": 0,
  "maxRz": 55.67,
  "maxDate": "2025-06-03T02:00:00.000Z",
  "warndes": null
},{
  "stcd": "61615110",
  "stnm": "杨梅河(木子店)",
  "adcd": "421181000000000",
  "wscd": null,
  "importancy": 0,
  "lgtd": 115.339667,
  "lttd": 31.1595,
  "elev": null,
  "hasRz": true,
  "wrz": null,
  "wrq": null,
  "grz": null,
  "grq": null,
  "sfz": null,
  "sfq": null,
  "type": "sh",
  "tm": "2025-06-03T02:00:00.000Z",
  "rz": 112.71,
  "trend": 0,
  "state": 1,
  "warning": 0,
  "maxRz": 112.71,
  "maxDate": "2025-06-02T22:00:00.000Z",
  "warndes": null
},{
  "stcd": "61612150",
  "stnm": "鹰山畈(黄土岗)",
  "adcd": "421181000000000",
  "wscd": null,
  "importancy": 0,
  "lgtd": 115.073611,
  "lttd": 31.386667,
  "elev": null,
  "hasRz": true,
  "wrz": null,
  "wrq": null,
  "grz": null,
  "grq": null,
  "sfz": null,
  "sfq": null,
  "type": "sh",
  "tm": "2025-06-03T02:00:00.000Z",
  "rz": 77.12,
  "trend": 0,
  "state": 1,
  "warning": 0,
  "maxRz": 77.25,
  "maxDate": "2025-06-02T16:00:00.000Z",
  "warndes": null
},
  ]


  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',
            //   }
            // }}
          >
            {
              data.map((item)=>
              <MenuItem value={item.stcd}>{item.stnm}</MenuItem>
              )
            }
          </Select>
          </div>
        </>
      }
    >
      <AreaDrpChart data={[]} /> 
    </PanelBox>
  )
} 
 
export default DrpReal;