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 { Select, MenuItem } from '@material-ui/core/index'
import { renderDrp } from '../../../../utils/renutils';


const data4 = [
   {
      "res_cd": "42118140013",
      "res_nm": "高峰水库",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181106000",
      "town_nm": "龟山镇",
      "rv_name": "举水",
      "bas_guid": "鄂东五河片区",
      "res_lon": 115.21201,
      "res_lat": 31.05011,
      "res_reg_cd": "42118140010-A4",
      "eng_scal": "小（1）型",
      "eng_g": "IV",
       "children": [
          {
              "res_cd": "42118140023",
              "res_nm": "高峰水库",
              "cd": "0A82AD",
              "cd_nm": "高峰水库",
              "termite_status": "n",
              "tm": "2025-05-21 04:25:56",
              "is_main_cd": "y"
          }
      ]
  },
  {
      "res_cd": "42118140004",
      "res_nm": "永丰水库",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181003000",
      "town_nm": "南湖办事处",
      "rv_name": "举水",
      "bas_guid": "鄂东五河片区",
      "res_lon": 115.05541,
      "res_lat": 31.11106,
      "res_reg_cd": "42118140042-A4",
      "eng_scal": "小（1）型",
      "eng_g": "IV",
      "children": [
          {
              "res_cd": "42118140004",
              "res_nm": "永丰水库",
              "cd": '0FA5DE',
              "cd_nm": "永丰水库",
              "termite_status": "n",
              "tm": "2025-05-21 09:18:28",
              "is_main_cd": "y"
          }
      ]
  },
  {
      "res_cd": "42118140015",
      "res_nm": "麻城坳水库",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181107000",
      "town_nm": "盐田河镇",
      "rv_name": "举水",
      "bas_guid": "鄂东五河片区",
      "res_lon": 115.22541,
      "res_lat": 30.98156,
      "res_reg_cd": "42118140025-A4",
      "eng_scal": "小（1）型",
      "eng_g": "IV",
      "children": [
          {
              "res_cd": "42118140015",
              "res_nm": "麻城坳水库",
              "cd": "0AB3ED",
              "cd_nm": "麻城坳水库",
              "termite_status": "y",
              "tm": "2025-05-21 04:27:18",
              "is_main_cd": "y"
          }
      ]
  },
  {
      "res_cd": "42118140023",
      "res_nm": "游家冲水库",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181109000",
      "town_nm": "木子店镇",
      "rv_name": "巴河",
      "bas_guid": "鄂东五河片区",
      "res_lon": 115.29541,
      "res_lat": 31.20317,
      "res_reg_cd": "42118140044-A4",
      "eng_scal": "小（1）型",
      "eng_g": "IV",
      "children": [
          {
              "res_cd": "42118140023",
              "res_nm": "游家冲水库",
              "cd": "0BB7ED",
              "cd_nm": "游家冲水库",
              "termite_status": "n",
              "tm": "2025-05-21 04:25:56",
              "is_main_cd": "y"
          }
      ]
  },
 
  {
      "res_cd": "42118140039",
      "res_nm": "姚家河水库",
      "province_cd": "420000000000",
      "province_nm": "湖北省",
      "city_cd": "421100000000",
      "city_nm": "黄冈市",
      "county_cd": "421181000000",
      "county_nm": "麻城市",
      "town_cd": "421181113000",
      "town_nm": "乘马岗镇",
      "rv_name": "举水",
      "bas_guid": "鄂东五河片区",
      "res_lon": 114.9355,
      "res_lat": 31.28804,
      "res_reg_cd": "42118140041-A4",
      "eng_scal": "小（1）型",
      "eng_g": "IV",
      "children": [
          {
              "res_cd": "42118140023",
              "res_nm": "姚家河水库",
              "cd": "0B663D",
              "cd_nm": "姚家河水库",
              "termite_status": "n",
              "tm": "2025-05-21 04:25:56",
              "is_main_cd": "y"
          }
      ]
  }
]


function DrpReal({ style }) {
  const [tab,setTab] = useState('1')
  const dispatch = useDispatch();
   const [dimension, setDimension] = useState('ft');
  const onChange = (event) => {
    const value = event.target.value;
    setDimension(value);
    }

  return (
    <PanelBox
      style={style}
      title="白蚁监测"
      color="green"
    >

      <TableContainer style={{ height: '100%' }}>
      
          <Table size="small" stickyHeader>
            <TableHead>
              <TableRow>
                <DpTableCell style={{ minWidth: '5.5rem' }} align="center">水库名称</DpTableCell>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">测点编号</DpTableCell>
                <DpTableCell style={{ minWidth: '6rem' }} align="center">状态</DpTableCell>
                <DpTableCell style={{ minWidth: '8rem' }} align="center">监测时间</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data4.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.0019, lttd-0.0001],
                          zoom: 15,
                          pitch: 60,
                          bearing: 0
                        });
                      }
                    }}>{row.res_nm}</div>
                  </DpTableCell>
                  <DpTableCell align="center">{row?.children?.[0]?.cd}</DpTableCell>
                  <DpTableCell align="center">{row?.children?.[0]?.termite_status==='y'?<span style={{color:'#ff4d4f',display:'flex',alignItems:'center'}}><div style={{width:'10px',height:'10px',borderRadius:'10px',marginRight:'7px',background:'#ff4d4f'}}></div>有白蚁</span>:<span style={{color:'#3af6cd',display:'flex',alignItems:'center'}}><div style={{width:'10px',height:'10px',borderRadius:'10px',marginRight:'7px',background:'#3af6cd'}}></div>无白蚁</span>}</DpTableCell>
                  <DpTableCell align="center"> <div className="table-ellipsis cursor-pointer">{row?.children?.[0]?.tm}</div></DpTableCell>
                </DpTableRow>
              ))}
            </TableBody>
          </Table>
      </TableContainer>
         <div style={{ height: '30px', overflow: 'hidden',position:'absolute',top:80,right:520 }}>
                  <Select
                    labelId="analysis-select-label"
                    value={dimension}
                    label="请选择水库"
                    onChange={onChange}
                  >
                    <MenuItem value="ft">请选择水库</MenuItem>
                    <MenuItem value="浮桥河水库">浮桥河水库</MenuItem>
                    <MenuItem value="明山水库">明山水库</MenuItem>
                    <MenuItem value="永丰水库">永丰水库</MenuItem>
                  </Select>
                </div>
    </PanelBox>
  )
}

export default DrpReal;