import React , { useState }from 'react';
import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
import { styled } from '@material-ui/styles';
export default function Overall({ style }) {

  const { data } = useRequest(OverallPromise.get);
  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"
    >
      <OverallContent data={data} />
      <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>
  )
}