import React, { useMemo, useState, useEffect } from 'react';
import useRequest from '../../../../utils/useRequest';
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 { useDispatch, useSelector } from 'react-redux';
import useRefresh from '../../../../utils/useRefresh';
import { HDRealPromise } from '../../../../models/_/real';
import clsx from 'clsx';
import { renderHDRz } from '../../../../utils/renutils';
import Setting from './Setting';
import { InfoPopNames } from '../../InfoPops';
import config from '../../../../config';
import { DatePicker } from 'antd';
import moment from 'moment';
import './index.less'
const { RangePicker } = DatePicker;

function rzRender(rz, base) {
  return (
    <DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
      {typeof base === 'number' ? base.toFixed(2) : ''}
    </DpTableCell>
  );
}

function HDReal({ style }) {
  const dispatch = useDispatch();
  const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
  const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
  // const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
  // let { data } = useRequest(HDRealPromise.get, t);
  const [setting, showSetting] = useState(false);


  const flyTo = (record) => {
    const { lgtd, lttd } = record;
    if (lgtd && lttd) {
      // dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
        zoom: config.poiPositionZoom.hd,
        pitch: config.poiPitch,
      });
    }
  }


  const data = [
    { stnm: '福田镇中心区', leakage: '1258.6', supply: '3526.8', rate: 35.6 },
    { stnm: '木子店镇区', leakage: '986.3', supply: '2832.7', rate: 34.8 },
    { stnm: '龙池桥镇区', leakage: '1485.5', supply: '4482.5', rate: 33.1 },
    { stnm: '宋埠镇区', leakage: '1284.8', supply: '4029.5', rate: 31.9 },
    { stnm: '黄土岗镇区', leakage: '186.2', supply: '698.2', rate: 26.7 },
    { stnm: '铁门岗镇区', leakage: '984.2', supply: '3994.4', rate: 24.6 },
    { stnm: '乘马岗镇区', leakage: '300.6', supply: '1250.5', rate: 24.0 },
    { stnm: '白果镇区', leakage: '1129.0', supply: '6422.6', rate: 17.6 },
    { stnm: '张家畈镇区', leakage: '444.8', supply: '2661.8', rate: 16.7 },
    { name: '顺河镇区', leakage: '749.3', supply: '4490.1', rate: 16.7 }
  ];
   const scData =  [
  {
        "stcd": "61612610",
        "type": "sk",
        "hasRz": true,
        "stnm": "三河口水厂",
        "adcd": "421181109000",
    "wscd": null,
                 rate:32.95,
        "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": "刘集水厂",
          rate:31.04,
        "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": "杉林河水厂",
         rate:31.95,
        "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
    },
  ]
  const [type, setType] = useState('sc')
  const toggleStType = (type) => {
    setType(type)
  }
  const [params, setParams] = useState({ tm: [] })
  const toggleAutoRefresh = () => {
    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
  }

  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,
    })
  };
  useEffect(() => {
    let options = "";
    options = {
      etm: moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
      stm: moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
      tm: [
        moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
        moment().add(1, 'hour').set({ minute: 0, second: 0 }),
      ],
    }

    setParams(options)

  }, [])

  const [list, setList] = useState([])
  useEffect(() => {
    const newArr = type == 'sc' ? scData :type == 'xz' ? data:[];
    setList(newArr)
  }, [type])
  
  return (
    <PanelBox
      style={style}
      title="漏损排行榜"
      color="green"
      tabs={
        <span className="button-group">
          <span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
          <span className={clsx({ active: type == 'xz' })} onClick={() => toggleStType('xz')}>乡镇</span>
          <span className={clsx({ active: type == 'dma'})} onClick={() => toggleStType('dma')}>DMA分区</span>
        </span>
      }
      extra={
        <>
          {/* <i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i> */}
          {/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
        </>
      }
    >
      <div className='tm' style={{ position: "relative", zIndex: 999999, color: "#fff", width: "60%", margin: '10px' }}>
        <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>
      <TableContainer style={{ height: '80%', marginTop: '10px' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow >
              <DpTableCell style={{ width: '20%' }} align="center">序号</DpTableCell>
              <DpTableCell style={{ width: '50%' }} align="center">名称</DpTableCell>
              {/* <DpTableCell style={{ width: '25%' }} align="center">漏水量(㎡)</DpTableCell>
              <DpTableCell align="center" style={{ width: '25%' }}>供水量(m³)</DpTableCell> */}
              <DpTableCell align="center" style={{ width: '30%' }}>漏损率(%)</DpTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {list.map((row,i) => (
              <DpTableRow key={row.id} onClick={() => flyTo(row)}>
                <DpTableCell align="center">
                  <div
                    className="table-ellipsis cursor-pointer"
                  >{i+1}</div>
                </DpTableCell>
                <DpTableCell align="center">{row.stnm}</DpTableCell>
                {/* <DpTableCell align="center">{row.leakage}</DpTableCell>
                <DpTableCell align="center">{row.supply}</DpTableCell> */}
                <DpTableCell align="center">{row.rate}</DpTableCell>
                {/* {rzRender(row.rz, row.grz)}
                {rzRender(row.rz, row.wrz)} */}
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      {
        setting && <Setting onClose={() => showSetting(false)} />
      }
          <img  src={`${process.env.PUBLIC_URL}/assets/tl.png`} alt="" style={{position:'absolute',width:130,height:220,left:-200,top:670}}/>
    </PanelBox>
  )
}

export default HDReal;