import React, { useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import PanelBox from '../../components/PanelBox';
import AreaDrpChart from './chart';
import ShuiyuandiChart from './chart1'
import clsx from 'clsx';
function DrpReal({ style }) {
const [type, setType] = useState('sc')
    const dispatch = useDispatch();
  const toggleStType = (type) => {
     setType(type)
    
  }
  return (
    <PanelBox
      style={style}
      title="预警统计"
      color="green"
      tabs={
        <>
          {/* <div style={{cursor:'pointer',color:'#3c88f7'}} onClick={()=>dispatch?.runtime.setInfoDlg({ layerId: 'BjLayer', properties: {} })}>更多</div>  */}
            <span className="button-group">
          <span className={clsx({ active: type == 'sc'  })} onClick={() => toggleStType('sc')}>水厂</span>
          <span className={clsx({ active: type == 'syd'  })} onClick={() => toggleStType('syd')}>水源地</span>
        </span>
        </>
      }
    >{
        type == 'sc' ?<AreaDrpChart />:<ShuiyuandiChart />
    }
      
      {/* <img  src='/assets/报警分析.jpg' style={{width:'26.5rem', height:'13.5rem',marginLeft:'0rem',marginTop:'1rem'}}/> */}
    </PanelBox>
  )
} 

export default DrpReal;