import React, { useMemo, useState } from 'react';
import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index'
import PanelBox from '../../components/PanelBox';
import config from '../../../../config';
import { useDispatch, useSelector } from 'react-redux';
import AreaDrpChart from './chart';
import clsx from 'clsx';



function DrpReal({ style }) {
  const [tab,setTab] = useState('生态')
  const dispatch = useDispatch();
  const data = [
    {
      "stcd": "61614200",
      "type": "sk",
      "hasRz": true,
      "stnm": "浮桥河水库",
      "adcd": "421181100000",
      "wscd": null,
      "importancy": 0,
      "lgtd": 114.875,
      "lttd": 31.166667,
      "elev": 0,
      "damel": 71.33,
      "dsflz": 68.04,
      "fsltdz": 64.89,
      "ddz": 51.78,
      "zcxsw": 64.89,
      "drpTm": "2025-06-03T02:00:00.000Z",
      "today": 0,
      "h1": 0,
      "h3": 0,
      "h6": 0,
      "h12": 0,
      "h24": 0,
      "h48": 16.5,
      "drpState": 1,
      "rz": 60.71,
      "w": 162.8,
      "a_fsltdz": -4.18,
      "rzTm": "2025-06-03T02:00:00.000Z",
      "rzWarning": 0,
      "rzState": 1,
      "aRz": -4.18
  },{
    "stcd": "61612610",
    "type": "sk",
    "hasRz": true,
    "stnm": "三河口水库",
    "adcd": "421181109000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.166667,
    "lttd": 31.333333,
    "elev": 0,
    "damel": 156.8,
    "dsflz": 154.99,
    "fsltdz": 149,
    "ddz": 124,
    "zcxsw": 149,
    "drpTm": "2025-06-03T02:00:00.000Z",
    "today": 0,
    "h1": 0,
    "h3": 0,
    "h6": 0,
    "h12": 0,
    "h24": 0,
    "h48": 12.5,
    "drpState": 1,
    "rz": 141.45,
    "w": 77.8,
    "a_fsltdz": -7.550000000000011,
    "rzTm": "2025-06-03T01:00:00.000Z",
    "rzWarning": 0,
    "rzState": 1,
    "aRz": -7.55
  },{
    "stcd": "61613010",
    "type": "sk",
    "hasRz": true,
    "stnm": "明山水库",
    "adcd": "421181103000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.066667,
    "lttd": 31.016667,
    "elev": 0,
    "damel": 98.7,
    "dsflz": 96.07,
    "fsltdz": 93,
    "ddz": 78.02,
    "zcxsw": 93,
    "drpTm": "2025-06-03T02:00:00.000Z",
    "today": 0,
    "h1": 0,
    "h3": 0,
    "h6": 0,
    "h12": 0,
    "h24": 0,
    "h48": 12.5,
    "drpState": 1,
    "rz": 84.43,
    "w": 49.5,
    "a_fsltdz": -8.569999999999993,
    "rzTm": "2025-06-03T02:00:00.000Z",
    "rzWarning": 0,
    "rzState": 1,
    "aRz": -8.57
  },{
    "stcd": "716113901",
    "type": "sk",
    "hasRz": true,
    "stnm": "铺头坳水库",
    "adcd": "421181201000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.169444,
    "lttd": 31.090278,
    "elev": 0,
    "damel": 266.7,
    "dsflz": 265.54,
    "fsltdz": 264.3,
    "ddz": 256,
    "zcxsw": 264.3,
    "drpTm": "2025-04-11T05:00:00.000Z",
    "today": 0,
    "h1": 0,
    "h3": 0,
    "h6": 0,
    "h12": 0,
    "h24": 0,
    "h48": 0,
    "drpState": 2,
    "rz": 263.16,
    "w": 0.991,
    "a_fsltdz": -1.1399999999999864,
    "rzTm": "2025-04-11T05:00:00.000Z",
    "rzWarning": 0,
    "rzState": 2,
    "pic": [
        {
            "stcd": "716113901",
            "tm": "2023-03-12T08:02:00.000Z",
            "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113901/20230312160200.jpg"
        },
        {
            "stcd": "716113901",
            "tm": "2023-03-12T07:15:00.000Z",
            "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113902/20230312151500.jpg"
        }
    ],
    "aRz": -1.14
  },{
    "stcd": "716111701",
    "type": "sk",
    "hasRz": true,
    "stnm": "桐枧冲水库",
    "adcd": "421181110000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.135278,
    "lttd": 31.3925,
    "elev": 0,
    "damel": 276.56,
    "dsflz": 273.66,
    "fsltdz": 269.86,
    "ddz": 256.76,
    "zcxsw": 269.86,
    "drpTm": "2025-04-11T05:00:00.000Z",
    "today": 0,
    "h1": 0,
    "h3": 0,
    "h6": 0,
    "h12": 0,
    "h24": 0,
    "h48": 0,
    "drpState": 2,
    "rz": 265.12,
    "w": 0.689,
    "a_fsltdz": -4.740000000000009,
    "rzTm": "2025-04-11T05:00:00.000Z",
    "rzWarning": 0,
    "rzState": 2,
    "pic": [
        {
            "stcd": "716111701",
            "tm": "2023-03-12T07:03:00.000Z",
            "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111701/20230312150300.jpg"
        },
        {
            "stcd": "716111701",
            "tm": "2023-03-12T07:27:00.000Z",
            "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111702/20230312152700.jpg"
        }
    ],
    "aRz": -4.74
  },
  ]

  return ( 
    <PanelBox 
      style={style}
      title="水资源利用"
      color="green"
      extra={
        <>
        <span className="button-group">
          <span className={clsx({ active: tab==='生态' })} onClick={() => {
            // dispatch.map.setLayerVisible({'BxjcLayer':true});
            // dispatch.map.setLayerVisible({'SyjcLayer':false});
            // dispatch.map.setLayerVisible({'SljcLayer':false});
            // dispatch.map.setLayerVisible({'ByjcLayer':false});
            setTab('生态')
          }}>生态</span>
          <span className={clsx({ active: tab==='灌溉发电' })} onClick={() => {
            // dispatch.map.setLayerVisible({'BxjcLayer':false});
            // dispatch.map.setLayerVisible({'SyjcLayer':true});
            // dispatch.map.setLayerVisible({'SljcLayer':false});
            // dispatch.map.setLayerVisible({'ByjcLayer':false});
            setTab('灌溉发电')
          }}>灌溉发电</span>
          {/* <span className={clsx({ active: tab==='发电' })} onClick={() => {
            // dispatch.map.setLayerVisible({'BxjcLayer':false});
            // dispatch.map.setLayerVisible({'SyjcLayer':false});
            // dispatch.map.setLayerVisible({'SljcLayer':true});
            // dispatch.map.setLayerVisible({'ByjcLayer':false});
            setTab('发电')
          }}>发电</span> */}
          <span className={clsx({ active: tab==='泄洪' })} onClick={() => {
            // dispatch.map.setLayerVisible({'BxjcLayer':false});
            // dispatch.map.setLayerVisible({'SyjcLayer':false});
            // dispatch.map.setLayerVisible({'SljcLayer':false});
            // dispatch.map.setLayerVisible({'ByjcLayer':true});
            setTab('泄洪')
          }}>泄洪</span>
        </span>
        </>
      }
    >
      {
        tab==='生态'?
        <div style={{width:"100%",display:'flex',fontSize:'12px',justifyContent:'space-around',padding:'0.5rem 0'}}>
          <div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
            <div><span style={{color:'#76b1d4',fontSize:'22px'}}>15.26</span> m³/s</div>
            <div style={{textAlign:'center'}}>生态流量站(2025-06-02 09:00)</div>
          </div>
          <div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
            <div><span style={{color:'#76b1d4',fontSize:'22px'}}>441.12</span> 万m³</div>
            <div style={{marginTop:'5px'}}>月供水量</div>
          </div>
          <div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
            <div><span style={{color:'#76b1d4',fontSize:'22px'}}>371.12</span> 万m³</div>
            <div style={{marginTop:'5px'}}>年供水量</div>
          </div>
        </div>
        :null
      }
      {
        tab==='灌溉'?
        <div style={{width:"100%",display:'flex',fontSize:'12px',justifyContent:'space-around',padding:'0.5rem 0'}}>
          <div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
            <div><span style={{color:'#76b1d4',fontSize:'22px'}}>12.53</span> m³/s</div>
            <div style={{textAlign:'center'}}>灌溉流量站(2025-06-02 09:00)</div>
          </div>
          <div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
            <div><span style={{color:'#76b1d4',fontSize:'22px'}}>364.21</span> 万m³</div>
            <div style={{marginTop:'5px'}}>月供水量</div>
          </div>
          <div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
            <div><span style={{color:'#76b1d4',fontSize:'22px'}}>427.48</span> 万m³</div>
            <div style={{marginTop:'5px'}}>年供水量</div>
          </div>
        </div>
        :null
      }
      {
        tab==='灌溉发电'?
        <div style={{width:"100%",display:'flex',fontSize:'12px',justifyContent:'space-around',padding:'0.5rem 0'}}>
          <div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
            <div><span style={{color:'#76b1d4',fontSize:'22px'}}>2.41</span> m³/s</div>
            <div style={{textAlign:'center'}}>发电流量站(2025-06-02 09:00)</div>
          </div>
          <div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
            <div><span style={{color:'#76b1d4',fontSize:'22px'}}>426.12</span> 万m³</div>
            <div style={{marginTop:'5px'}}>月供水量</div>
          </div>
          <div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
            <div><span style={{color:'#76b1d4',fontSize:'22px'}}>425.15</span> 万m³</div>
            <div style={{marginTop:'5px'}}>年供水量</div>
          </div>
        </div>
        :null
      }
      {
        tab==='泄洪'?
        <div style={{width:"100%",display:'flex',fontSize:'12px',justifyContent:'space-around',padding:'0.5rem 0'}}>
          <div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
            <div><span style={{color:'#76b1d4',fontSize:'22px'}}>5.12</span> m³/s</div>
            <div style={{textAlign:'center'}}>泄洪流量站(2025-06-02 09:00)</div>
          </div>
          <div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
            <div><span style={{color:'#76b1d4',fontSize:'22px'}}>211.45</span> 万m³</div>
            <div style={{marginTop:'5px'}}>月供水量</div>
          </div>
          <div style={{width:'8rem',padding:'0.5rem 0.5rem',background:'#2a5278',display:'flex',flexDirection:'column',justifyContent:'flex-start',alignItems:'center',color:"#ffffff"}}>
            <div><span style={{color:'#76b1d4',fontSize:'22px'}}>185.21</span> 万m³</div>
            <div style={{marginTop:'5px'}}>年供水量</div>
          </div>
        </div>
        :null
      }
      <div style={{width:'100%',height:'12rem'}}>
      <AreaDrpChart data={[]} tab={tab} /> 
      </div>
    </PanelBox>
  )
} 
 
export default DrpReal;