import React, { useState, useEffect } from 'react';
import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
import { makeStyles } from '@material-ui/core/styles';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import { parseGeoJSON } from "../../../../utils/tools";
import {
  Box,
  Typography,
  Checkbox,
  FormControlLabel,
  ButtonGroup,
  Button,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  IconButton,
  Collapse
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import { useDispatch, useSelector } from 'react-redux';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import clsx from 'clsx';
import RemoveIcon from '@material-ui/icons/Remove';
import config from '../../../../config';
import { InfoPopNames } from '../../InfoPops';
const useStyles = makeStyles((theme) => ({
  root: {
    color: '#fff',
    '& .MuiTypography-root': {
      color: '#fff'
    },
    '& .MuiCheckbox-root': {
      color: '#fff',
      '&.Mui-checked': {
        color: '#409eff'
      }
    },
    '& .MuiButtonGroup-root': {
      marginTop: theme.spacing(2),
      marginBottom: theme.spacing(3)
    }
  },
  typeSection: {
    marginBottom: theme.spacing(2)
  },
  timeButton: {
    width: 210,
    color: '#fff',
    borderColor: 'rgba(255,255,255,0.3)',
    '&.MuiButton-contained': {
      backgroundColor: '#409eff',
      color: '#fff',
      '&:hover': {
        backgroundColor: '#409eff'
      }
    },
    '&:hover': {
      backgroundColor: 'rgba(255,255,255,0.1)'
    }
  },
  table: {
    '& .MuiTableCell-root': {
      color: '#fff',
      borderColor: 'rgba(255,255,255,0.1)'
    }
  },
  expandButton: {
    color: '#fff'
  },
  stationRow: {
    '&:nth-of-type(odd)': {
      backgroundColor: 'rgba(255,255,255,0.05)'
    },
    '&:hover': {
      backgroundColor: 'rgba(255,255,255,0.1)'
    }
  },
  warningRow: {
    '&.pink': { backgroundColor: 'rgba(255,192,203,0.5)' },
    '&.purple': { backgroundColor: 'rgba(147,112,219,0.5)' },
    '&.blue': { backgroundColor: 'rgba(135,206,235,0.5)' },
    '&.blue1': { backgroundColor: 'rgba(135,206,235,0.4)' },
    '&.blue2': { backgroundColor: 'rgba(135,206,235,0.3)' },
    '&.green': { backgroundColor: 'rgba(144,238,144,0.5)' }
  },

  expandedRow: {
    '&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
    '&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
    '&.blue': { backgroundColor: 'rgba(135,206,235,0.1)' },
    '&.green': { backgroundColor: 'rgba(144,238,144,0.1)' }
  }
}));
export default function Overall({ style }) {
  const dispatch = useDispatch();

  const classes = useStyles();
  const [types, setTypes] = useState({
    mountain: true,
    water: true,
    weather: true,
    reservoir: true
  });
  const [timeRange, setTimeRange] = useState('1h');
  const [expanded, setExpanded] = useState({});

  const handleTypeChange = (event) => {
    setTypes({
      ...types,
      [event.target.name]: event.target.checked
    });
  };

  const stations = [
    { id: 'history', name: '历史极值站点', count: 0, color: 'pink' },
    { id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' },
    { id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' },
    { id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' },
    { id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' },
    { id: 'storm', name: '暴雨站点', count: 1, color: 'green' }
  ];

  const toggleExpand = (id) => {
    setExpanded(prev => ({
      ...prev,
      [id]: !prev[id]
    }));
  };

  const drpData = [
   {
        "stcd": "61644000",
        "stnm": "浮桥河",
        "adcd": null,
        "wscd": null,
        "importancy": 0,
        "lgtd": 114.883583,
        "lttd": 31.180444,
        "elev": null,
        "hasRz": true,
        "type": "sw",
        "tm": "2025-06-06T22:00:00.000Z",
      "rz": 43.6,
         adnm: '麻城市',
      zgrz: '48.17',
      time: '2025-06-11 10:14至2025-06-12 10:14',
      jjrz: '47.60',
        "state": 1
    },
{
        "stcd": "61615300",
        "stnm": "木子店",
        "adcd": null,
        "wscd": null,
        "importancy": 1,
        "lgtd": 115.3625,
        "lttd": 31.190278,
        "elev": null,
        "hasRz": true,
        "type": "sw",
        "tm": "2025-06-06T21:00:00.000Z",
  "rz": 133.89,
          adnm: '麻城市',
      zgrz: '138.20',
      time: '2025-06-12 10:33',
      jjrz: '137.89',
        "state": 1
    },
      {
        "stcd": "61612500",
        "stnm": "王福店",
        "adcd": null,
        "wscd": null,
        "importancy": 0,
        "lgtd": 114.986666,
        "lttd": 31.352944,
        "elev": null,
        "hasRz": true,
        "type": "sw",
        "tm": "2025-06-06T22:00:00.000Z",
        "rz": 73.37,
           adnm: '麻城市',
      zgrz: '78.20',
      time: '2025-06-11 10:14至2025-06-12 10:14',
      jjrz: '77.37',
        "state": 1
    },
   
  ]
  const skData = [
   {
        "stcd": "61614200",
        "type": "sk",
        "hasRz": true,
        "stnm": "浮桥河",
        "adcd": "421181100000",
        "wscd": null,
      "importancy": 0,
         adnm: '麻城市',
      zgrz: '66.1',
      time: '2025-06-11 10:14',
      jjrz: '64.89',
        "lgtd": 114.88069,
        "lttd": 31.171967,
        "elev": 0,
        "damel": 71.33,
        "dsflz": 68.04,
        "fsltdz": 64.89,
        "ddz": 51.78,
        "zcxsw": 64.89,
        "drpTm": "2025-06-06T22:00:00.000Z",
        "today": 4,
        "h1": 4,
        "h3": 4,
        "h6": 4,
        "h12": 4,
        "h24": 4,
        "h48": 4,
        "drpState": 2,
        "rz": 65.7,
        "w": 45490,
        "xs":32133,
        "a_fsltdz": -4.189999999999998,
        "rzTm": "2025-06-06T22:00:00.000Z",
        "rzWarning": 1,
        "rzState": 2,
        "layer": "RealSkLayer",
        "layerPop": "RealSkPop"
    },

    {
      "stcd": "61612700",
      "type": "sk",
      "hasRz": true,
      "stnm": "碧绿河",
      "adcd": "421181109000",
      "wscd": null,
      adnm: '麻城市',
      zgrz: '138.2',
      time: '2025-06-12 10:33',
      jjrz: '137',
      "importancy": 0,
      "lgtd": 115.214444,
      "lttd": 31.299722,
      "elev": 0,
      "damel": 142.9,
      "dsflz": 139.08,
      "fsltdz": 137,
      "ddz": 105,
      "zcxsw": 137,
      "drpTm": "2025-06-06T22:00:00.000Z",
      "today": 50,
      "h1": 38,
      "h3": 50,
      "h6": 50,
      "h12": 50,
      "h24": 50,
      "h48": 50,
      "drpState": 1,
      "rz": 120,
      "w": 6015,
      "xs": 1676,
      "a_fsltdz": -17,
      "rzTm": "2025-06-06T00:00:00.000Z",
      "rzWarning": 0,
      "rzState": 2,
      "layer": "RealSkLayer",
      "layerPop": "RealSkPop"
    },
    {
      "stcd": "61612560",
      "type": "sk",
      "hasRz": true,
      "stnm": "大河铺",
      "adcd": "421181112000",
      adnm: '麻城市',
      zgrz: '161.5',
      time: '2025-06-11 10:14至2025-06-12 10:14',
      jjrz: '159',
      "wscd": null,
      "importancy": 0,
      "lgtd": 114.941111,
      "lttd": 31.464444,
      "elev": 0,
      "damel": 162.21,
      "dsflz": 160.08,
      "fsltdz": 159,
      "ddz": 142.5,
      "zcxsw": 159,
      "drpTm": "2025-06-06T22:00:00.000Z",
      "today": 50,
      "h1": 50,
      "h3": 50,
      "h6": 50,
      "h12": 50,
      "h24": 50,
      "h48": 50,
      "drpState": 1,
      "rz": 144.5,
      "w": 1574,
      "xs": "--",
      "a_fsltdz": -14.5,
      "rzTm": "2025-06-06T00:00:00.000Z",
      "rzWarning": 0,
      "rzState": 2,
      "layer": "RealSkLayer",
      "layerPop": "RealSkPop"
    },
    {
      "stcd": "716460001",
      "type": "sk",
      "hasRz": true,
      "stnm": "杉林河",
      "adcd": "421181107000",
      "wscd": null,
      adnm: '麻城市',
      zgrz: '224.31',
      time: '2025-06-11 10:14至2025-06-12 10:14',
      jjrz: '231',
      "importancy": 0,
      "lgtd": 115.433056,
      "lttd": 31.304444,
      "elev": 0,
      "damel": 236.2,
      "dsflz": 233.92,
      "fsltdz": 231,
      "ddz": 204,
      "zcxsw": 231,
      "drpTm": "2025-04-11T05:00:00.000Z",
      "today": 0,
      "h1": 0,
      "h3": 0,
      "h6": 0,
      "h12": 0,
      "h24": 0,
      "h48": 0,
      "drpState": 2,
      "rz": 224.31,
      "w": 1415,
      "xs": 750,
      "a_fsltdz": -6.689999999999998,
      "rzTm": "2025-04-11T05:00:00.000Z",
      "rzWarning": 0,
      "rzState": 2,
      "layer": "RealSkLayer",
      "layerPop": "RealSkPop"
    },
  ]
 const flyTo = (row) => {
    const { lgtd, lttd } = row;
    if (lgtd && lttd) {
      dispatch.runtime.setFeaturePop({ type: timeRange == '3h'?'RealSkPop':"RealHDPop", properties: row, coordinates: [row.lgtd, row.lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd + 0.005],
        zoom: 15,
        pitch: 50,
        bearing: 0
      });
    }
  }

   const setSkLayer = (data = []) => {
      const map = window.__mapref;
      const layer = map.getLayer('临时水库tz')
      if (layer) {
        map.removeLayer('临时水库tz');
        map.removeSource('临时水库tz');
      }
     if (data.length === 0) { return }
      map.addLayer({
        'id': '临时水库tz',//+new Date().getTime(),
        'type': 'symbol',
        'source': {
          'type': 'geojson',
          'data': {
            'type': 'FeatureCollection',
            'features': [],
          },
        },
        'layout': {
          // 'icon-allow-overlap': true,
          // 'text-allow-overlap': true,
          'icon-image': [
            'case',
            ['==', ['get', 'rzWarning'], 1], '水库-超汛限',
            '水库'
          ], // 从properties中动态读取icon字段
          'icon-size': [
            'interpolate', ['linear'], ['zoom'],
            10, 0.8,
            14, 0.8,
          ],
          'text-size': [
            'interpolate', ['linear'], ['zoom'],
            5, 10,
            14, 14,
          ],
          'text-font': ['Roboto Black'],
          'text-field': [
            'step',
            ['zoom'],
            '',
            8, ['get', 'stnm']
          ],
          'text-anchor': 'top',
          'text-offset': [0, 1],
        },
        'paint': {
          'text-color': '#fff'
        },
        'visibility': 'visible',
      });
      map.getSource('临时水库tz').setData(parseGeoJSON(data))
  }
  
    const setHdLayer = (data = []) => {
        const map = window.__mapref;
        const layer = map.getLayer('关联站点')
        if (layer) {
          map.removeLayer('关联站点');
          map.removeSource('关联站点');
        }
        if (data.length === 0) { return }
         map.addLayer({
          'id': '关联站点',//+new Date().getTime(),
          'type': 'symbol',
          'source': {
            'type': 'geojson',
            'data': {
              'type': 'FeatureCollection',
              'features': [],
            },
          },
          'layout': {
            'icon-allow-overlap': true,
            'text-allow-overlap': true,
            'icon-image': '水位站',
            'icon-size': [
              'interpolate', ['linear'], ['zoom'],
              10, 0.5,
              14, 1,
            ],
            'text-size': [
              'interpolate', ['linear'], ['zoom'],
              10, 10,
              14, 16,
            ],
             'text-max-width': 30,
          'text-font': ['Roboto Black'],
          'text-field': [
            'step',
            ['zoom'],
            [
              'case',
              ['!=', ['get', 'state'], 1], '',
              ['concat', ['get', 'rz'], 'm']
            ],
            12, [
              'case',
              ['!=', ['get', 'state'], 1], ['get', 'stnm'],
              [
                'format',
                ['get', 'stnm'], { 'font-scale': 0.8, 'text-color': '#fff' },
                '\n', {},
                ['concat', ['get', 'rz'], 'm'], {}
              ]
            ],
          ],
          'text-anchor': 'top',
          'text-offset': [0, 1],
          },
          'paint': {
            'text-color': [
              'case',
              ['!=', ['get', 'state'], 1], '#888',
              ['==', ['get', 'warning'], 3], '#f00',
              ['==', ['get', 'warning'], 2], 'yellow',
              ['==', ['get', 'warning'], 1], 'yellow',
              '#0f0'
            ],
            'text-halo-color': '#062040',
            'text-halo-width': 1
          },
          'visibility': 'visible',
        });
    
        map.getSource('关联站点').setData(parseGeoJSON(data))
      }
  const [type, setType] = useState('h24')
  const [data, setData] = useState([])


  useEffect(() => {
    const newArr = timeRange == '3h' ? skData : drpData;
    setData(newArr)
  }, [timeRange])

  return (
    <PanelBox
      style={style}
      title="水情统计"
      color="green"
      extra={
        <span className="button-group">
          {
            ['h1', 'h3', 'h6', 'h12', 'h24'].map(key => (
              <span key={key} className={clsx({ active: type === key })} onClick={() => setType(key)}>{key}</span>
            ))
          }
        </span>
      }
    >
      <Box className={classes.root}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <ButtonGroup variant="outlined">
            {[
              { value: '1h', label: '河道水情' },
              { value: '3h', label: '水库水情' },
            ].map((item) => (
              <Button
                key={item.value}
                className={classes.timeButton}
                onClick={() => {
                  if (item.value == '1h' || item.value == '3h') {
                    setTimeRange(item.value)
                  }
                }}
                variant={timeRange === item.value ? 'contained' : 'outlined'}
                style={{ padding: '5px 10px' }}
              >
                {item.label}
              </Button>
            ))}
          </ButtonGroup>

        </div>

      </Box>
      <TableContainer style={{ height: '70%' }}>
        <Table size="small" stickyHeader>
          <TableHead >
            <DpTableRow>
              <DpTableCell style={{ minWidth: '3rem' }} align='center'>序号</DpTableCell>
              <DpTableCell style={{ minWidth: '8rem' }} align='center'>站名</DpTableCell>
              <DpTableCell style={{ minWidth: '8rem' }} align='center'>政区</DpTableCell>
              <DpTableCell style={{ minWidth: '8rem' }} align='center'>最高水位(m)</DpTableCell>
              <DpTableCell style={{ minWidth: '16rem' }} align='center'>发生时间</DpTableCell>
              <DpTableCell style={{ minWidth: '8rem' }} align='center'>{timeRange == '1h' ? "警戒水位(m)" : '汛限水位(m)'}</DpTableCell>
              {/* <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell> */}
            </DpTableRow>
          </TableHead>
          <TableBody>
            {
              data.map((item, i) => (
                <DpTableRow key={item.stcd} onClick={() => {
                  flyTo(item)
                  if (timeRange == '3h') {
                     setSkLayer([item])
                  } else {
                    setHdLayer([item])
                   }
                }}>
                  <DpTableCell align='center'>{i + 1}</DpTableCell>
                  <DpTableCell align='center'>{item.stnm}</DpTableCell>
                  <DpTableCell align='center'>
                    <div
                      className="table-ellipsis cursor-pointer"
                      title={item.adnm}
                    >{item.adnm}</div>
                  </DpTableCell>
                  <DpTableCell align='center'>{item.zgrz}</DpTableCell>
                  <DpTableCell align='center'>{item.time}</DpTableCell>
                  <DpTableCell align='center'>{item.jjrz}</DpTableCell>
                </DpTableRow>
              ))
            }

          </TableBody>
        </Table>
      </TableContainer>
    </PanelBox>
  )
}