import React, { useMemo, useState } 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 { showData,bzData} from './constatData'

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, type) => {
    toggleStType(type)
    const { lgtd, lttd } = record;
    if (lgtd && lttd) {
      dispatch.runtime.setFeaturePop({ type, properties: record, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
        zoom: config.poiPositionZoom.hd,
        pitch: config.poiPitch,
      });
    }
  }
    const [type, setType] = useState('sz')
  
  const toggleStType = (type) => {
    if (type == 'sz') {
      dispatch.map.setLayerVisible({'ShuiZhaLayer':true})
      dispatch.map.setLayerVisible({'BzLayer':false})
    } else {
      dispatch.map.setLayerVisible({'ShuiZhaLayer':false})
      dispatch.map.setLayerVisible({'BzLayer':true})
    }
     setType(type)
    
  }

  const toggleAutoRefresh = () => {
    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
  }
  return (
    <PanelBox
      style={style}
      title="工情监测"
      color="green"
      tabs={
        <span className="button-group">
          <span className={clsx({ active: type == 'sz'  })} onClick={() => toggleStType('sz')}>水闸</span>
          <span className={clsx({ active: type == 'bz'  })} onClick={() => toggleStType('bz')}>泵站</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> */}
        </>
      }
    >
      {
        type == 'sz' ?
      <TableContainer style={{ height: '100%' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow>
              <DpTableCell style={{ width: '40%' }} align="center">水闸名称</DpTableCell>
              <DpTableCell style={{ width: '20%' }} align="center">类型</DpTableCell>
              <DpTableCell align="center" style={{ width: '40%' }}>所在灌区</DpTableCell>
              {/* <DpTableCell align="right">警戒水位</DpTableCell> */}
            </TableRow>
          </TableHead>
          <TableBody>
            {showData.map((row) => (
              <DpTableRow key={row.id} onClick={() => flyTo(row,'sz')}>
                 <DpTableCell align="center">
                  {row.wagaName}
                </DpTableCell>
                <DpTableCell align="center">
                  {row.wagaType_dictText}
                </DpTableCell>
                <DpTableCell align="center">{row.irrCode_dictText}</DpTableCell>
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
          :
           <TableContainer style={{ height: '100%' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow>
              <DpTableCell style={{ width: '40%' }} align="center">泵站名称</DpTableCell>
              <DpTableCell style={{ width: '20%' }} align="center">工程类别</DpTableCell>
              <DpTableCell align="center" style={{ width: '40%' }}>所在灌区</DpTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {bzData.map((row) => (
              <DpTableRow key={row.id} onClick={() => flyTo(row,'bz')}>
                 <DpTableCell align="center">
                     {row.pustName}
                </DpTableCell>
                <DpTableCell align="center">
                    {row.pustType}
                </DpTableCell>
                <DpTableCell align="center">{row.irrCode_dictText}</DpTableCell>
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      }
      {/* {
        setting && <Setting onClose={() => showSetting(false)} />
      } */}
    </PanelBox>
  )
}

export default HDReal;