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';

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 showData = useMemo(() => {
  //   if (!data) {
  //     return [];
  //   }
  //   let ret = [];
  //   data.forEach(o => {
  //     if (!tableRzFilter[o.type]) {
  //       return;
  //     }
  //     o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
  //     o.kd = (Math.random() * 100).toFixed(2);
  //     o.ll = (Math.random() * 100).toFixed(1);
  //     ret.push(o);
  //   });
  //   return ret;
  // }, [data, tableRzFilter]);
  const randomMinutes = Math.floor(Math.random() * 60) + 1;
  const format = 'YYYY-MM-DD HH:mm';
  const SOIL_STATIONS = [
    {
        id: 1,
        name: '宋埠镇站',
        location: {
            lat: 31.1725,
            lng: 115.0139
        }
    },
    {
        id: 2,
        name: '乘马岗镇站',
        location: {
            lat: 31.2503,
            lng: 115.1242
        }
    },
    {
        id: 3,
        name: '白果镇站',
        location: {
            lat: 31.0958,
            lng: 115.2417
        }
    },
    {
        id: 4,
        name: '福田河站',
        location: {
            lat: 31.1847,
            lng: 115.1536
        }
    },
    {
        id: 5,
        name: '黄土岗镇站',
        location: {
            lat: 31.2158,
            lng: 115.0825
        }
    }
];
  // const showData = Array(10).fill(0).map((o, i) => ({
  //   stnm:SOIL_STATIONS[i%2]?.name,
  //   id:i + 1,
  //   time: moment()
  //           .subtract(i * 60 + randomMinutes, 'minutes')
  //           .format(format),
  //   sd: (Math.random() * 100).toFixed(2),
  // }))

  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 toggleStType = (type) => {
    const visible = !tableRzFilter[type];
    dispatch.realview.setTableRzFilter({ [type]: visible });
  }
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
    },
    {
        "id": "7",
        "indexCode": "-1",
        "name": "灌溉发电洞入口",
        "ipAddress": null,
        "chan": null,
        "type": 1,
        "buildDate": null,
        "lgtd": "114.7614910",
        "lttd": "31.4931630",
        "menuId": 4,
        "menuName": null,
        "remark": null,
        "createTime": null
    },
    {
        "id": "8",
        "indexCode": "-1",
        "name": "灌溉发电洞出口",
        "ipAddress": null,
        "chan": null,
        "type": 1,
        "buildDate": null,
        "lgtd": "114.7617570",
        "lttd": "31.4917830",
        "menuId": 4,
        "menuName": null,
        "remark": null,
        "createTime": null
    },
    {
        "id": "9",
        "indexCode": "-1",
        "name": "灌溉发电洞启闭机房",
        "ipAddress": null,
        "chan": null,
        "type": 1,
        "buildDate": null,
        "lgtd": "114.7616050",
        "lttd": "31.4924070",
        "menuId": 4,
        "menuName": null,
        "remark": null,
        "createTime": null
    },
    {
        "id": "10",
        "indexCode": "-1",
        "name": "副坝坝上",
        "ipAddress": null,
        "chan": null,
        "type": 1,
        "buildDate": null,
        "lgtd": "114.7584290",
        "lttd": "31.4923590",
        "menuId": 5,
        "menuName": null,
        "remark": null,
        "createTime": null
    },
    {
        "id": "11",
        "indexCode": "-1",
        "name": "陈店河入库口",
        "ipAddress": null,
        "chan": null,
        "type": 1,
        "buildDate": null,
        "lgtd": "114.7467450",
        "lttd": "31.5407780",
        "menuId": 6,
        "menuName": null,
        "remark": null,
        "createTime": null
    }
]

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

  const renderStatus = (row) => {
    let bz = '运行'
    switch (row.status) {
      case 0:
        bz = '停止'
        break;
      case 1:
        bz = '运行'
        break;
      case 2:
        bz = '故障'
        break;
      case 3:
        bz = '维护中'
        break;
      case 4:
        bz = '待机'
        break;
      default:
        break;
    }
    return bz
  }

  return (
    <PanelBox
      style={style}
      title="视频监控"
      color="green"
      // tabs={
      //   <span className="button-group">
      //     <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
      //     <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</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> */}
        </>
      }
    >
      <TableContainer style={{ height: '100%' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow>
              <DpTableCell style={{ width: '10%' }} align="left">序号</DpTableCell>
              <DpTableCell style={{ width: '45%' }} align="left">视频点名称</DpTableCell>
              <DpTableCell align="center" style={{ width: '45%' }}>所属区域</DpTableCell>
              {/* <DpTableCell align="center" style={{ width: '40%' }}>监测时间</DpTableCell> */}
              {/* <DpTableCell align="right">警戒水位</DpTableCell> */}
            </TableRow>
          </TableHead>
          <TableBody>
            {showData.map((row) => (
              <DpTableRow key={row.id}>
                 <DpTableCell component="th" scope="row">
                  <div
                    className="table-ellipsis cursor-pointer"
                  >{row.id}</div>
                </DpTableCell>
                <DpTableCell component="th" scope="row">
                  <div
                    className="table-ellipsis cursor-pointer"
                    // onClick={() => flyTo(row)}
                  >{row.name}</div>
                </DpTableCell>
                <DpTableCell align="center">{row.name}</DpTableCell>
                {/* <DpTableCell align="center">{row.time}</DpTableCell> */}
                {/* {rzRender(row.rz, row.grz)}
                {rzRender(row.rz, row.wrz)} */}
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      {
        setting && <Setting onClose={() => showSetting(false)} />
      }
    </PanelBox>
  )
}

export default HDReal;