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


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 CustomSwitch = styled(Switch)({
    '& .MuiSwitch-switchBase': {
      color: '#fff',
      '&.Mui-checked': {
        color: '#1890ff',
        '& + .MuiSwitch-track': {
          backgroundColor: '#1890ff',
          opacity: 0.5,
        },
      },
    },
    '& .MuiSwitch-track': {
      backgroundColor: 'rgba(255, 255, 255, 0.3)',
    },
  });
  
  const StyledFormControlLabel = styled(FormControlLabel)({
    '& .MuiFormControlLabel-label': {
      color: '#fff'
    }
  });
  const [dimension, setDimension] = useState('fqh');
    const [checked, setChecked] = React.useState(false);
  
  return (
    <PanelBox
      style={style}
      title="蓄水"
      color="green"
      // 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%', position: 'relative' }}>
        {/* <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/xs.png`} alt="" style={{ width: 421, height: '100%' }} />
      </div>
      <div style={{ position: 'absolute', color: '#fff', top: 70, left: -280, display: 'flex', alignItems: 'center' }}>

        <StyledFormControlLabel
          control={
            <CustomSwitch
              checked={checked}
              onChange={(e) => setChecked(e.target.checked)}
            />
          }
          label="多灌区模式"
        />
        {checked && <div style={{ marginTop: "-15px" }}>
          <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="fqh">浮桥河灌区</MenuItem>
              <MenuItem value="shk">三河口水库灌区</MenuItem>
              <MenuItem value="qjs">群建水库灌区</MenuItem>
              <MenuItem value="dsb">大石板灌区</MenuItem>
            </Select>
          </FormControl>
        </div>}
      </div>
    </PanelBox>
  )
}