import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import { useDispatch, useSelector } from 'react-redux';
import PanelBox from '../../components/PanelBox';

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';
const data3 = [{
  "cd": "1",
  "cd_nm": "WE",
  "ch": "1",
  "res_reg_cd": "42118140042-A4",
  "res_cd": "42118140004",
  "res_nm": "永丰水库",
  "res_lon": 115.05541,
  "res_lat": 31.11106,
  "province_cd": "420000000000",
  "province_nm": "湖北省",
  "city_cd": "421100000000",
  "city_nm": "黄冈市",
  "county_cd": "421181000000",
  "county_nm": "麻城市",
  "town_cd": "421181003000",
  "town_nm": "南湖办事处",
  "danger_stat": "非病险水库",
  "bas_guid": "鄂东五河片区",
  "label": "2023高标准",
  "eng_scal": "小（1）型",
  "value": 0.3,
  "diff_value": -0.02,
  "trend": -1,
  "dt": "2025-05-20",
  "is_has_data": "y",
  "max_value": 0.3
}]


function DrpReal({ style }) {
  const [tab,setTab] = useState('1')
  const dispatch = useDispatch();


  return (
    <PanelBox
      style={style}
      title="渗流监测"
      color="green"
    >

      <TableContainer style={{ height: '100%' }}>
          <Table size="small" stickyHeader>
            <TableHead>
              <TableRow>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">水库名称</DpTableCell>
                <DpTableCell style={{ minWidth: '4rem' }} align="center">测点</DpTableCell>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">渗流量(L/s)</DpTableCell>
                <DpTableCell style={{ minWidth: '8rem' }} align="center">监测时间</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data3.map((row,index) => (
                <DpTableRow key={row.stcd}>
                  <DpTableCell component="th" scope="row">
                    <div className="table-ellipsis cursor-pointer" onClick={() => {
                      const { res_lon:lgtd, res_lat:lttd } = row;
                      if (lgtd && lttd) {
                        dispatch.runtime.setCameraTarget({
                          center: [lgtd- 0.0029, lttd],
                          zoom: 15,
                          pitch: 60,
                          bearing: 0
                        });
                      }
                    }}>{row.res_nm}</div>
                  </DpTableCell>
                  <DpTableCell align="center">{row.cd_nm}</DpTableCell>
                  <DpTableCell align="center">{row.value}</DpTableCell>
                  <DpTableCell align="center">{row.dt}</DpTableCell>
                </DpTableRow>
              ))}
            </TableBody>
          </Table>
      </TableContainer>
    </PanelBox>
  )
}

export default DrpReal;