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';
import { DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;

const data1 = [
  {
    "stcd": "61614200",
    "type": "sk",
    "hasRz": true,
    "stnm": "浮桥河水厂",
    zb: '浊度',
    yjvalue: 0.6,
      status:1,
    "adcd": "421181100000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 114.875,
    "lttd": 31.166667,
    "elev": 0,
    "damel": 71.33,
    "dsflz": 68.04,
    "fsltdz": 64.89,
    "ddz": 51.78,
    "zcxsw": 64.89,
    "drpTm": "2025-06-03T02:00:00.000Z",
    "today": 0,
    "h1": 0,
    "h3": 0,
    "h6": 0,
    "h12": 0,
    "h24": 0,
    "h48": 16.5,
    "drpState": 1,
    "rz": 60.71,
    "w": 162.8,
    "a_fsltdz": -4.18,
    "rzTm": "2025-06-03T02:00:00.000Z",
    "rzWarning": 0,
    "rzState": 1,
    "aRz": -4.18,
    percent: 98.20
  },
  {
    "stcd": "61612610",
    "type": "sk",
    "hasRz": true,
    "stnm": "三河口水厂",
    zb: '余氯',
    yjvalue: 0.25,
    "adcd": "421181109000",
    "wscd": null,
    percent: 94.29,
    "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
  },
  {
    "stcd": "7CS000231",
    "type": "sk",
    "hasRz": true,
    "stnm": "刘集水厂",
    zb: 'PH值',
    yjvalue: 7.4,
    percent: 56.98,
    "adcd": "421181100000",
    "wscd": null,
    "importancy": 0,
    "lgtd": 115.048056,
    "lttd": 31.335556,
    "elev": 0,
    "damel": 79.6,
    "dsflz": 78.65,
    "fsltdz": 72.05,
    "ddz": 69.55,
    "zcxsw": 72.05,
    "drpTm": "2023-11-20T01:00:00.000Z",
    "today": 0,
    "h1": 0,
    "h3": 0,
    "h6": 0,
    "h12": 0,
    "h24": 0,
    "h48": 0,
    "drpState": 2,
    "rz": 76.49,
    "w": 0.049,
    "a_fsltdz": 4.439999999999998,
    "rzTm": "2025-04-11T06:00:00.000Z",
    "rzWarning": 1,
    "rzState": 2,
    "pic": [
      {
        "stcd": "7CS000231",
        "tm": "2023-11-20T01:04:18.000Z",
        "url": "http://223.75.53.106:8891/skjgimages/2023/1120/7CS000231/20231120090418.jpg"
      },
      {
        "stcd": "7CS000231",
        "tm": "2023-11-20T01:07:54.000Z",
        "url": "http://223.75.53.106:8891/skjgimages/2023/1120/7CS000232/20231120090754.jpg"
      }
    ],
    "aRz": 4.44
  },
  {
    "stcd": "716460001",
    "type": "sk",
    "hasRz": true,
    "stnm": "杉林河水厂",
    zb: 'PH值',
    yjvalue: 6.3,
    "adcd": "421181107000",
    "wscd": null,
    percent: 42.14,
    "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": 0,
    "a_fsltdz": -6.689999999999998,
    "rzTm": "2025-04-11T05:00:00.000Z",
    "rzWarning": 0,
    "rzState": 2,
    "aRz": -6.69
  },
]


function DrpReal({ style }) {
  const [tab,setTab] = useState('1')
  const dispatch = useDispatch();
  const [params, setParams] = useState({ tm: [
    moment().add(-7, 'days'),
    moment(),
  ] })

  const searchTm = (e) => {
    setParams({
      ...params,
      stm: e[0].format("YYYY-MM-DD HH:mm"),
      etm: e[1].format("YYYY-MM-DD HH:mm"),
      tm: e,
    })
  };


  return (
    <PanelBox
      style={style}
      title="水厂总览"
      color="green"
      extra={
        <>
          <div className='tm' style={{ color: "#fff", width: "90%",marginLeft:"1rem" }}>
            <RangePicker
              // width="100%"
              className='time-picker'
              style={{
                flex: 1,
                background: "transparent",
                border: "none",
                color: "#fff",
              }}
              onChange={searchTm}
              allowClear
              format="YYYY-MM-DD HH:mm"
              showTime={{
                format: 'HH:mm',
              }}
              value={params.tm}
              getPopupContainer={trigger => trigger.parentElement}
            />
          </div>
        </>
      }  
    >
      <img  src={process.env.PUBLIC_URL+'/assets/jinshuigongshui.jpg'} style={{width:'19.5rem', marginLeft:'3.5rem',marginTop:'0.5rem',marginBlock:'0.5rem'}}/>
      <TableContainer style={{ height: '10rem' }}>
          <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">供水量</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 { lgtd, lttd } = row;
                      const newLgtd = lgtd - 0.00122;
                      if (lgtd && lttd) {
                        dispatch.runtime.setCameraTarget({
                          center: [newLgtd, lttd],
                          zoom: 15,
                          pitch: 60,
                          bearing: 0
                        });
                      }
                    }}>{row.stnm}</div>
                  </DpTableCell>
                  <DpTableCell align="center">{row.ddz}</DpTableCell>
                  <DpTableCell align="center">{row.zcxsw}</DpTableCell>
                </DpTableRow>
              ))}
            </TableBody>
          </Table>
        
       
      </TableContainer>
    </PanelBox>
  )
}

export default DrpReal;