import React,{useState} from 'react'
import PanelBox from '../../components/PanelBox';
import MiniSinglePie from './MiniSinglePie'
import clsx from 'clsx';
import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core/index';

export default function GQ({ style }) {
  const v1 = 20;
  const v2 = 32;
  const r = (v1 * 100 / v2).toFixed(1);

  const v3 = 650;
  const v4 = 800;
  const r2 = (v3 * 100 / v4).toFixed(1);
  const [selected, setSelected] = useState(1)
    const [dimension, setDimension] =useState('waterUsage');
  return (
    <PanelBox
      style={style}
      title="水资源调度"
      color="orange"
      tabs={
        <span className="button-group">
          <span className={clsx({active:selected == 1})} onClick={() => setSelected(1)}>供蓄水</span>
          <span className={clsx({active:selected == 2})} onClick={() => setSelected(2)}>蓄水</span>
          <span className={clsx({active:selected == 3})} onClick={() => setSelected(3)}>警情</span>
        </span>
      }
      extra={
        <i className="ionicons gear"></i>
      }
    >
      <div style={{ width: '100%', height: '100%' }}>
        <div style={{
        display: 'flex',
        justifyContent: 'flex-end',
        marginTop: '10px',
        paddingRight: '20px'
      }}>
          <FormControl sx={{ minWidth: 200, marginBottom: 2 }}>
        <InputLabel id="analysis-select-label">灌区</InputLabel>
        <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="waterUsage">浮桥河灌区</MenuItem>
        </Select>
          </FormControl>
          </div>
          <img  src={`${process.env.PUBLIC_URL}/assets/${selected == 1 ? 'useW':selected == 2 ?'xs':'warning'}.png`} alt="" style={{width:421,height:'100%'}}/>
     </div>
    </PanelBox>
  )
}