import clsx from 'clsx';
import React, { useMemo, useState,useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import {
    Box,
    Typography,
    Checkbox,
    FormControlLabel,
    ButtonGroup,
    Button,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    IconButton,
    Collapse,
    Paper
  } from '@material-ui/core';
  import RemoveIcon from '@material-ui/icons/Remove';
import { makeStyles } from '@material-ui/core/styles';
import AddIcon from '@material-ui/icons/Add';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import appconsts from '../../../../models/appconsts';
import { DatePicker } from 'antd';
import { SkRealPromise } from '../../../../models/_/real';
import { InfoPopNames } from '../../InfoPops';
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
import config from '../../../../config';
import moment from 'moment';
const { RangePicker } = DatePicker;

const ljtj = [
  {'level':'≥250',children:[],stcd:'001',color:'#ffd5d5'},
  {'level':'100~250',children:[],stcd:'002',color:'#f2defe'},
  {'level':'50~100',children:[],stcd:'003',color:'#ddf'},
  {'level':'25~50',children:[],stcd:'004',color:'#d2e9fc'},
  {'level':'10~25',children:[],stcd:'005',color:'#d9f7ff'},
  {'level':'0.1~10',stcd:'006',color:'#edfce9',children:[
      {
          "stcd": "61612910",
          "stnm": "白果镇",
          "adcd": "421181000000000",
          "wscd": null,
          "importancy": 0,
          "lgtd": 115.01083,
          "lttd": 31.041152,
          "elev": null,
          "hasRz": true,
          "type": "sh",
          "today": 0,
          "h1": 7,
          "h3": 8.4,
          "h6": 10.5,
          "h12": 11.200000000000001,
          "h24": 0.6,
          "h48": 32.8,
          "tm": "2025-06-03T02:10:00.000Z",
          "state": 1,
          "warning": 0
      },
      {
          "stcd": "61614460",
          "stnm": "夫子河镇",
          "adcd": "421181000000000",
          "wscd": null,
          "importancy": 0,
          "lgtd": 115.026944,
          "lttd": 30.959121,
          "elev": null,
          "hasRz": true,
          "type": "sh",
          "today": 0,
          "h1": 6,
          "h3": 7.199999999999999,
          "h6": 9,
          "h12": 9.600000000000001,
          "h24": 0.6,
          "h48": 11.899999999999999,
          "tm": "2025-06-03T02:00:00.000Z",
          "state": 1,
          "warning": 0
      },
      {
          "stcd": "61615110",
          "stnm": "盐田河镇",
          "adcd": "421181000000000",
          "wscd": null,
          "importancy": 0,
          "lgtd": 115.172808,
          "lttd": 30.963342,
          "elev": null,
          "hasRz": true,
          "type": "sh",
          "today": 0,
          "h1": 7,
          "h3": 8.4,
          "h6": 10.5,
          "h12": 11.200000000000001,
          "h24": 0.4,
          "h48": 31.299999999999997,
          "tm": "2025-06-03T02:00:00.000Z",
          "state": 1,
          "warning": 0
      },
      {
          "stcd": "616151210",
          "stnm": "龟山镇",
          "adcd": "421181000000000",
          "wscd": null,
          "importancy": 0,
          "lgtd": 115.183208,
          "lttd": 31.074978,
          "elev": null,
          "hasRz": true,
          "type": "sh",
          "today": 0,
          "h1": 7,
          "h3": 8.4,
          "h6": 10.5,
          "h12": 11.200000000000001,
          "h24": 0.51,
          "h48": 31.299999999999997,
          "tm": "2025-06-03T02:00:00.000Z",
          "state": 1,
          "warning": 0
      },
  ]},
]

const useStyles = makeStyles((theme) => ({
    root: {
      color: '#fff'
    },
    table: {
      '& .MuiTableCell-root': {
        color: '#fff',
        borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
      }
    },
    warningRow: {
      '&.immediate': {
        backgroundColor: '#d32f2f'
      },
      '&.prepare': {
        backgroundColor: '#ed6c02'
      }
    },
    expandIcon: {
      marginRight: theme.spacing(1),
      fontSize: 20,
      cursor: 'pointer',
      transition: 'transform 0.3s',
      '&.expanded': {
        transform: 'rotate(180deg)'
      }
    },
    warningCount: {
      marginLeft: theme.spacing(1)
    },
    expandedContent: {
      backgroundColor: 'rgba(0, 0, 0, 0.2)',
      padding: theme.spacing(2)
    },
    statsSection: {
      marginTop: theme.spacing(4)
    },
    statsTitle: {
      color: '#1976d2',
      marginBottom: theme.spacing(3)
    },
    warningStats: {
      display: 'flex',
      justifyContent: 'space-around',
      marginTop: theme.spacing(2)
    },
    statItem: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center'
    },
    warningIcon: {
      fontSize: 40,
      marginBottom: theme.spacing(1),
      '&.immediate': {
        color: '#d32f2f'
      },
      '&.prepare': {
        color: '#ed6c02'
      }
    },
  }));

export default function AreaDrp({ style }) {
  const dispatch = useDispatch();
  const classes = useStyles();
  const [params, setParams] = useState({ tm: [moment(),moment().add(1,'days')] })
  const [tabVal, setTabVal] = useState('1')
  const [expanded, setExpanded] = useState({});
  let { data } = useRequest(SkRealPromise.get);
  const sortedData = useMemo(() => (data || []).sort((a, b) => (b.aRz - a.aRz), [data]));

  const flyTo = (record) => {
    const { lgtd, lttd } = record;
    if (lgtd && lttd) {
      // dispatch.runtime.setFeaturePop({ type: 'RealDrpPop', properties: record, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd ],
        zoom: 12,//12config.poiPositionZoom.sk,
        pitch: 0,//config.poiPitch,
        bearing: 0,
      });
    }
  }

  const handleExpand = (type) => {
    setExpanded(prev => ({
    //   ...prev,
      [type]: !prev[type]
    }));
  };

  return (
    <>
        <div style={{color:'#ffffff',padding:'7px 5px 10px 5px',display:'flex',alignItems:'center',fontWeight:200}}>
            {/* 时段选择 */}
            麻城市未来24小时最大网格点雨量量级统计

            {/* <div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"71%",margin:'10px'}}>
            <RangePicker
                className='time-picker'
                disabled
                style={{
                    flex:1,
                    background: "transparent",
                    border: "none",
                    color: "#fff",
                }}
                onChange={(e)=>{
                    setParams({
                    ...params,
                    stm: e[0].format("YYYY-MM-DD HH:mm"),
                    etm: e[1].format("YYYY-MM-DD HH:mm"),
                    tm:e,
                    })
                }}
                allowClear
                format="YYYY-MM-DD HH:mm"
                showTime={{
                    format: 'HH:mm',
                }}
                value={params.tm}
            />
            </div> */}
        </div>
        <TableContainer style={{ height: '30rem', border:'1px solid rgb(50 50 65)' }}>
        <Table size="small" stickyHeader>
            <TableHead>
                <TableRow>
                    <DpTableCell style={{ minWidth: '1rem' }} align="left"></DpTableCell>
                    <DpTableCell style={{ minWidth: '3rem' }} align="center">政区</DpTableCell>
                    <DpTableCell style={{ minWidth: '6rem' }} align="center">最大网格点雨量(mm)</DpTableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {ljtj.map((row) => (
                <>
                    <DpTableRow key={row.stcd}>
                        <DpTableCell component="th" scope="row">
                            <Box display="flex" alignItems="center">
                                {expanded[row.stcd] ? (
                                <RemoveIcon
                                    className={`${classes.expandIcon} expanded`}
                                    onClick={() => handleExpand(row.stcd)}
                                />
                                ) : ( 
                                <AddIcon
                                    className={classes.expandIcon}
                                    onClick={() => handleExpand(row.stcd)}
                                />
                                )}
                            </Box>
                        </DpTableCell>
                        <DpTableCell align="center">
                            <div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.level+"（"+row.children.length+"）"}</div>
                        </DpTableCell>
                        <DpTableCell align="center"></DpTableCell>
                    </DpTableRow>
                    <DpTableRow>
                        <DpTableCell colSpan={4} style={{ padding: 0 }}>
                            <Collapse in={expanded[row.stcd]} timeout="auto" unmountOnExit>
                                <div style={{position:'relative'}}>
                                    <div style={{position:'absolute',left:'0rem'}}>
                                        {
                                            row.children.map((i,index)=>(
                                                <div style={{display:'flex', color:'#ffffff',padding:'10px 0',paddingLeft:"2.5rem",background:'#1c2439',width:'26.6rem'}}>
                                                    <div style={{width:'13rem',textAlign:'center',cursor:'pointer'}} onClick={()=>{
                                                        flyTo(i)
                                                    }}>{i.stnm}</div>
                                                    <div style={{width:'10rem',textAlign:'center'}}>{i.h24}</div>
                                                </div>
                                            ))
                                        }
                                    </div>
                                </div>
                            </Collapse>
                        </DpTableCell>
                    </DpTableRow>
                </>
                ))}
            </TableBody>
            </Table>
        </TableContainer>
        {/* <div style={{color:'#ffffff',padding:'0px 5px',display:'flex',marginTop:'4px',background:'#050d22',alignItems:'center'}}>
        站点统计（个）：<span style={{fontSize:'24px',color:'#3788fc',padding:"0 15px 0 5px"}}>120 </span>
        其中有雨站点（个）：<span style={{fontSize:'24px',color:'#3788fc',padding:"0 15px 0 5px"}}>120</span>
        </div>
        <img  src='/assets/天气预报2.jpg' style={{width:'100%',padding:'10px 5px'}}/> */}
    </>
  )
}