import React,{useState} from 'react'
import PanelBox from '../../components/PanelBox';
import MiniSinglePie from './MiniSinglePie'
import clsx from 'clsx';

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)
  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>
      }
      extra={
        <i className="ionicons gear"></i>
      }
    >
      <div style={{ display: 'flex', height: '100%' }}>
        <div style={{ width: '50%', padding: '0.5rem', display: 'flex', flexDirection: 'column', color: '#ccc', fontSize: '1rem', lineHeight: 1.2 }}>
          <div style={{ flexGrow: 1 }}>
            <MiniSinglePie name="开机率" value={r} color="#b6e8d9" />
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline' }}>
            <div style={{ width: '50%', textAlign: 'right' }}>排涝泵站数</div>
            <div style={{ flexGrow: 1, color: ' rgb(127, 225, 255)', fontSize: '1.2rem', paddingLeft: '1rem' }}>{v1}</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline' }}>
            <div style={{ width: '50%', textAlign: 'right' }}>泵站数</div>
            <div style={{ flexGrow: 1, color: ' rgb(127, 225, 255)', fontSize: '1.2rem', paddingLeft: '1rem' }}>{v2}</div>
          </div>
        </div>
        <div style={{ width: '50%', padding: '0.5rem', display: 'flex', flexDirection: 'column', color: '#ccc', fontSize: '1rem', lineHeight: 1.2 }}>
          <div style={{ flexGrow: 1 }}>
            <MiniSinglePie name="开机功率" value={r2} color="#fab7b7" />
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline' }}>
            <div style={{ width: '50%', textAlign: 'right' }}>开机功率</div>
            <div style={{ flexGrow: 1, color: ' rgb(127, 225, 255)', fontSize: '1.2rem', paddingLeft: '1rem' }}>{v3}kw</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline' }}>
            <div style={{ width: '50%', textAlign: 'right' }}>总功率</div>
            <div style={{ flexGrow: 1, color: ' rgb(127, 225, 255)', fontSize: '1.2rem', paddingLeft: '1rem' }}>{v4}kw</div>
          </div>
        </div>
      </div>
    </PanelBox>
  )
}