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 moment from 'moment';
import { Switch, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index'

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 [dimension, setDimension] = useState('ft');

  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 toggleAutoRefresh = () => {
    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
  }

  const handleBxDlg = () => {
    dispatch.runtime.setInfoDlg({ layerId: 'WyWarnLayer', properties: {} })
  }

  return (
    <PanelBox
      style={style}
      title="监测告警"
      color="green"
      extra={
        <div>
          {moment().subtract(6, 'day').format('YYYY-MM-DD')}~{moment().format('YYYY-MM-DD')}
        </div>
      }
    >
      <div style={{ display: 'flex', padding: '10px 5px', marginLeft: 30, justifyContent: 'space-between', flexWrap: 'wrap' }}>
        <div>
          <img src={`${process.env.PUBLIC_URL}/assets/s3.png`} alt="" style={{ width: 180, cursor: 'pointer' }} onClick={handleBxDlg} />
          <img src={`${process.env.PUBLIC_URL}/assets/s4.png`} alt="" style={{ width: 180 }} />

        </div>

        <div style={{ margin: '5px 0' }}>
          <img src={`${process.env.PUBLIC_URL}/assets/s5.png`} alt="" style={{ width: 180 }} />
          <img src={`${process.env.PUBLIC_URL}/assets/s2.png`} alt="" style={{ width: 180 }} />
        </div>

        <div >
          <img src={`${process.env.PUBLIC_URL}/assets/s1.png`} alt="" style={{ width: 180 }} />

          <img src={`${process.env.PUBLIC_URL}/assets/s6.png`} alt="" style={{ width: 180 }} />
        </div>
        <img src={`${process.env.PUBLIC_URL}/assets/s7.png`} alt="" style={{ width: 180, marginTop: 5 }} />


      </div>
      {
        setting && <Setting onClose={() => showSetting(false)} />
      }
    </PanelBox>
  )
}

export default HDReal;