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 data1 = [
  {
      "res_cd": "42118140035",
      "res_lon": 115.14137,
      "res_lat": 31.55095,
      "cd": "01",
      "cd_nm": "GN1",
      "res_reg_cd": "42118140006-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181112000",
      "town_nm": "福田河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "大堰口水库",
      "de_value": -4.2885,
      "dn_value": -13.5384,
      "du_value": 132.4892,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 1.0981,
      "max_dn": -2.3255,
      "max_du": 132.4892,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140035",
      "res_lon": 115.14137,
      "res_lat": 31.55095,
      "cd": "03",
      "cd_nm": "GN3",
      "res_reg_cd": "42118140006-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181112000",
      "town_nm": "福田河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "大堰口水库",
      "de_value": -10.73,
      "dn_value": -9.8975,
      "du_value": 121.3495,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 1.0981,
      "max_dn": -2.3255,
      "max_du": 132.4892,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140035",
      "res_lon": 115.14137,
      "res_lat": 31.55095,
      "cd": "02",
      "cd_nm": "GN2",
      "res_reg_cd": "42118140006-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181112000",
      "town_nm": "福田河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "大堰口水库",
      "de_value": 1.0981,
      "dn_value": -7.0736,
      "du_value": 75.4661,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 1.0981,
      "max_dn": -2.3255,
      "max_du": 132.4892,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140035",
      "res_lon": 115.14137,
      "res_lat": 31.55095,
      "cd": "04",
      "cd_nm": "GN4",
      "res_reg_cd": "42118140006-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181112000",
      "town_nm": "福田河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "大堰口水库",
      "de_value": -6.469,
      "dn_value": -2.3255,
      "du_value": 47.1633,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 1.0981,
      "max_dn": -2.3255,
      "max_du": 132.4892,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140011",
      "res_lon": 115.11878,
      "res_lat": 30.88904,
      "cd": "01",
      "cd_nm": "GN1",
      "res_reg_cd": "42118140019-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181104000",
      "town_nm": "夫子河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "黄麻坳水库",
      "de_value": -5.5809,
      "dn_value": 4.6055,
      "du_value": -13.083,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": -5.1079,
      "max_dn": 4.6055,
      "max_du": -11.1644,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140011",
      "res_lon": 115.11878,
      "res_lat": 30.88904,
      "cd": "02",
      "cd_nm": "GN2",
      "res_reg_cd": "42118140019-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181104000",
      "town_nm": "夫子河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "黄麻坳水库",
      "de_value": -5.1079,
      "dn_value": 3.9064,
      "du_value": -12.2936,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": -5.1079,
      "max_dn": 4.6055,
      "max_du": -11.1644,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140017",
      "res_lon": 115.14545,
      "res_lat": 30.95398,
      "cd": "03",
      "cd_nm": "GN3",
      "res_reg_cd": "42118140031-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181107000",
      "town_nm": "盐田河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "群建水库",
      "de_value": 1.166,
      "dn_value": 2.1274,
      "du_value": 11.5948,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 2.6901,
      "max_dn": 3.7945,
      "max_du": 11.5948,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140011",
      "res_lon": 115.11878,
      "res_lat": 30.88904,
      "cd": "03",
      "cd_nm": "GN3",
      "res_reg_cd": "42118140019-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181104000",
      "town_nm": "夫子河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "黄麻坳水库",
      "de_value": -5.1345,
      "dn_value": 3.7423,
      "du_value": -11.5382,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": -5.1079,
      "max_dn": 4.6055,
      "max_du": -11.1644,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140022",
      "res_lon": 115.39612,
      "res_lat": 31.1526,
      "cd": "02",
      "cd_nm": "GN2",
      "res_reg_cd": "42118140014-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181109000",
      "town_nm": "木子店镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "何门咀水库",
      "de_value": -0.7313,
      "dn_value": 2.702,
      "du_value": -11.493,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": -0.4931,
      "max_dn": 4.3759,
      "max_du": -10.0925,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140011",
      "res_lon": 115.11878,
      "res_lat": 30.88904,
      "cd": "04",
      "cd_nm": "GN4",
      "res_reg_cd": "42118140019-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181104000",
      "town_nm": "夫子河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "黄麻坳水库",
      "de_value": -5.7038,
      "dn_value": 3.3505,
      "du_value": -11.1644,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": -5.1079,
      "max_dn": 4.6055,
      "max_du": -11.1644,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140017",
      "res_lon": 115.14545,
      "res_lat": 30.95398,
      "cd": "04",
      "cd_nm": "GN4",
      "res_reg_cd": "42118140031-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181107000",
      "town_nm": "盐田河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "群建水库",
      "de_value": 1.3441,
      "dn_value": 3.3718,
      "du_value": 10.8126,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 2.6901,
      "max_dn": 3.7945,
      "max_du": 11.5948,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140022",
      "res_lon": 115.39612,
      "res_lat": 31.1526,
      "cd": "01",
      "cd_nm": "GN1",
      "res_reg_cd": "42118140014-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181109000",
      "town_nm": "木子店镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "何门咀水库",
      "de_value": -0.4931,
      "dn_value": 4.3759,
      "du_value": -10.0925,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": -0.4931,
      "max_dn": 4.3759,
      "max_du": -10.0925,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140017",
      "res_lon": 115.14545,
      "res_lat": 30.95398,
      "cd": "01",
      "cd_nm": "GN1",
      "res_reg_cd": "42118140031-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181107000",
      "town_nm": "盐田河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "群建水库",
      "de_value": 2.6901,
      "dn_value": 3.7368,
      "du_value": 8.7918,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 2.6901,
      "max_dn": 3.7945,
      "max_du": 11.5948,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140017",
      "res_lon": 115.14545,
      "res_lat": 30.95398,
      "cd": "02",
      "cd_nm": "GN2",
      "res_reg_cd": "42118140031-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181107000",
      "town_nm": "盐田河镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "群建水库",
      "de_value": 1.5528,
      "dn_value": 3.7945,
      "du_value": 7.5172,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 2.6901,
      "max_dn": 3.7945,
      "max_du": 11.5948,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140009",
      "res_lon": 114.73138,
      "res_lat": 31.01948,
      "cd": "04",
      "cd_nm": "GN4",
      "res_reg_cd": "42118140028-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181102000",
      "town_nm": "歧亭镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "鲇鱼坝水库",
      "de_value": -2.3116,
      "dn_value": -7.9976,
      "du_value": -6.8754,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": -1.4148,
      "max_dn": -7.6521,
      "max_du": -3.4337,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140032",
      "res_lon": 115.13073,
      "res_lat": 31.35489,
      "cd": "02",
      "cd_nm": "GN2",
      "res_reg_cd": "42118140020-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181111000",
      "town_nm": "黄土岗镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "待除险加固",
      "label": "2023高标准",
      "res_nm": "鸡翅关水库",
      "de_value": -4.2641,
      "dn_value": -1.5343,
      "du_value": -6.8233,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 1.346,
      "max_dn": -1.5343,
      "max_du": -3.1838,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140032",
      "res_lon": 115.13073,
      "res_lat": 31.35489,
      "cd": "03",
      "cd_nm": "GN3",
      "res_reg_cd": "42118140020-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181111000",
      "town_nm": "黄土岗镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "待除险加固",
      "label": "2023高标准",
      "res_nm": "鸡翅关水库",
      "de_value": -1.1126,
      "dn_value": -1.7529,
      "du_value": -5.7066,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": 1.346,
      "max_dn": -1.5343,
      "max_du": -3.1838,
      "dt": "2025-05-20",
      "is_has_data": "y"
  },
  {
      "res_cd": "42118140009",
      "res_lon": 114.73138,
      "res_lat": 31.01948,
      "cd": "01",
      "cd_nm": "GN1",
      "res_reg_cd": "42118140028-A4",
      "ch": "0+000",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181102000",
      "town_nm": "歧亭镇",
      "bas_guid": "鄂东五河片区",
      "eng_scal": "小（1）型",
      "danger_stat": "非病险水库",
      "label": "2023高标准",
      "res_nm": "鲇鱼坝水库",
      "de_value": -1.4148,
      "dn_value": -10.2713,
      "du_value": -5.146,
      "de_trend": null,
      "dn_trend": null,
      "du_trend": null,
      "max_de": -1.4148,
      "max_dn": -7.6521,
      "max_du": -3.4337,
      "dt": "2025-05-20",
      "is_has_data": "y"
  }
]


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: '8rem' }} align="center">水库名称</DpTableCell>
                <DpTableCell style={{ minWidth: '3rem' }} align="center">测点</DpTableCell>
                <DpTableCell style={{ minWidth: '8rem' }} align="center">垂直位移(mm)</DpTableCell>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">上下游(mm)</DpTableCell>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">左右岸(mm)</DpTableCell>
                <DpTableCell style={{ minWidth: '10rem' }} align="center">监测时间</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data1.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, lttd],
                          zoom: 15,
                          pitch: 60,
                          bearing: 0
                        });
                      }
                    }}>{row.res_nm}</div>
                  </DpTableCell>
                  <DpTableCell align="center">{row.cd_nm}</DpTableCell>
                  <DpTableCell align="center">{row.du_value}</DpTableCell>
                  <DpTableCell align="center">{row.de_value}</DpTableCell>
                  <DpTableCell align="center">{row.dn_value}</DpTableCell>
                  <DpTableCell align="center">{row.dt}</DpTableCell>
                </DpTableRow>
              ))}
            </TableBody>
          </Table>
        
       
      </TableContainer>
    </PanelBox>
  )
}

export default DrpReal;