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 showData =  [
    {
        "id": "1",
        "indexCode": "-1",
        "name": "坝顶公路入口",
        "ipAddress": null,
        "chan": null,
        "type": 1,
        "buildDate": null,
        "lgtd": "114.7632670",
        "lttd": "31.4934740",
        "menuId": 1,
        "menuName": null,
        "remark": null,
        "createTime": null
    },
    {
        "id": "2",
        "indexCode": "-1",
        "name": "黄土岗镇站",
        "ipAddress": null,
        "chan": null,
        "type": 1,
        "buildDate": null,
        "lgtd": "114.7635070",
        "lttd": "31.4958250",
        "menuId": 1,
        "menuName": null,
        "remark": null,
        "createTime": null
    },
    {
        "id": "3",
        "indexCode": "-1",
        "name": "福田河站",
        "ipAddress": null,
        "chan": null,
        "type": 1,
        "buildDate": null,
        "lgtd": "114.7632360",
        "lttd": "31.4984280",
        "menuId": 2,
        "menuName": null,
        "remark": null,
        "createTime": null
    },
    {
        "id": "4",
        "indexCode": "-1",
        "name": "白果镇站",
        "ipAddress": null,
        "chan": null,
        "type": 1,
        "buildDate": null,
        "lgtd": "114.7639080",
        "lttd": "31.4987730",
        "menuId": 2,
        "menuName": null,
        "remark": null,
        "createTime": null
    },
    {
        "id": "5",
        "indexCode": "-1",
        "name": "乘马岗镇站",
        "ipAddress": null,
        "chan": null,
        "type": 1,
        "buildDate": null,
        "lgtd": "114.7645800",
        "lttd": "31.4976180",
        "menuId": 2,
        "menuName": null,
        "remark": null,
        "createTime": null
    },
    {
        "id": "6",
        "indexCode": "-1",
        "name": "宋埠镇站",
        "ipAddress": null,
        "chan": null,
        "type": 1,
        "buildDate": null,
        "lgtd": "114.7630480",
        "lttd": "31.4925400",
        "menuId": 3,
        "menuName": null,
        "remark": null,
        "createTime": null
    },
    
]

  const toggleAutoRefresh = () => {
    dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
  }



  return (
    <PanelBox
      style={style}
      title="视频监控"
      color="green"
      extra={
              <>
                {/* <img  src='/assets/年下拉3.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/> */}
                <div style={{height:'30px',overflow:'hidden'}}>
                <Select
                  labelId="analysis-select-label"
                  value={dimension}
                  label=""
                  onChange={(event) => {
                    const value = event.target.value;
                    setDimension(value);
                  }}
                >
                  <MenuItem value="ft">浮桥河水库大坝球机</MenuItem>
                </Select>
                </div>
              </>
            }
    >
          <img src={`${process.env.PUBLIC_URL}/assets/sksp.jpg`} alt="" style={{height:250}} />
      {
        setting && <Setting onClose={() => showSetting(false)} />
      }
    </PanelBox>
  )
}

export default HDReal;