import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import { useDispatch, useSelector } from 'react-redux';
import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import clsx from 'clsx';
import { renderDrp } from '../../../../utils/renutils';
import moment from 'moment';
import config from '../../../../config';

const data = [
  {
        "stcd": "716129061",
        "type": "sk",
        "hasRz": true,
        "stnm": "仰天窝水库",
    event: '仰天窝水库蓄水量＜30%',
        types:'干旱',
        "adcd": "421181201000",
        "wscd": null,
        "importancy": 0,
        "lgtd": 115.106667,
        "lttd": 31.126389,
        "elev": 0,
        "damel": 325.08,
        "dsflz": 324.18,
        "fsltdz": 323.5,
        "ddz": 319.5,
        "zcxsw": 323.5,
        "drpTm": "2025-04-11T05:00:00.000Z",
        "today": 0,
        "h1": 0,
        "h3": 0,
        "h6": 0,
        "h12": 0,
        "h24": 0,
        "h48": 0,
        "drpState": 2,
        "rz": 325.16,
        "w": 0.132,
        "a_fsltdz": 4.660000000000025,
        "rzTm": "2025-04-11T05:00:00.000Z",
        "rzWarning": 1,
        "rzState": 2,
        "pic": [
            {
                "stcd": "716129061",
                "tm": "2023-03-12T06:05:00.000Z",
                "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129061/20230312140500.jpg"
            },
            {
                "stcd": "716129061",
                "tm": "2023-03-12T07:25:00.000Z",
                "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129062/20230312152500.jpg"
            }
        ],
        "aRz": 4.66
    },

      {
        "stcd": "61612910",
        "stnm": "桃林河(阎河)",
        "adcd": "421181000000000",
        event: '桃林河河道水位超警',
        types: '洪涝',
        
        "wscd": null,
        "importancy": 0,
        "lgtd": 115.087777777,
        "lttd": 31.164444444,
        "elev": null,
        "hasRz": true,
        "wrz": null,
        "wrq": null,
        "grz": null,
        "grq": null,
        "sfz": null,
        "sfq": null,
        "type": "sh",
        "tm": "2025-06-03T02:35:00.000Z",
        "rz": 55.67,
        "trend": 0,
        "state": 1,
        "warning": 0,
        "maxRz": 55.67,
        "maxDate": "2025-06-03T02:00:00.000Z",
        "warndes": null
  },
      {
        "stcd": "61612610",
        "type": "sk",
        "hasRz": true,
        "stnm": "三河口水库",
        event: '三河口水库水源地水质突变',
        types:'水质污染',
        "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
    },
]

function DrpReal({ style }) {
    const dispatch = useDispatch();
    const flyTo = (record) => {
      const { lgtd, lttd } = record;
      const types = record.type == 'sk' ? 'RealSkPop' :'RealHDPop'
    if (lgtd && lttd) {
      dispatch.runtime.setFeaturePop({ type:types, properties: {...record,events:1}, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
        zoom: config.poiPositionZoom.hd,
        pitch: config.poiPitch,
      });
    }
  }

  return (
    <PanelBox
      style={style}
      title="应急事件"
      color="green"
    >
      <TableContainer style={{ height: '100%' }}>
        <Table size="small" stickyHeader>
            <TableHead>
              <TableRow>
                <DpTableCell style={{ width: '10%' }} align="center">序号</DpTableCell>
                <DpTableCell style={{ width: '35%' }} align="center">事件名称</DpTableCell>
                <DpTableCell style={{ width: '20%' }} align="center">事件类型</DpTableCell>
                <DpTableCell style={{ width: '35%' }} align="center">发生时间</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data.map((row,index) => (
                <DpTableRow key={row.stcd} onClick={() => flyTo(row)}>
                  <DpTableCell align="center">{index+1}</DpTableCell>
                  <DpTableCell align="center">{row.event}</DpTableCell>
                  <DpTableCell align="center">{row.types}</DpTableCell>
                  <DpTableCell align="center">{moment(row.drpTm).format('YYYY-MM-DD HH:mm:ss')}</DpTableCell>
                </DpTableRow>
              ))}
            </TableBody>
          </Table>
      </TableContainer>
    </PanelBox>
  )
}

export default DrpReal;