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 { Empty } from 'antd'
import TableYj from './tableYj';
// import showData from './constant'
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 yyRes = useSelector(s => s.runtime.yyObj);
  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 showData = [
    {
      stnm: '尼尔基坝上',
      rz: '215.74',
      maxF: '7170',
      cxTime: '08-17 08时',
      ffTime:'08-23 20时'
    },
      {
      stnm: '同盟',
      rz: '170.30',
      maxF: '10300',
      cxTime: '08-20 20时',
      ffTime:'08-20 20时'
  }
  ]
 const resData = [
    {
     stnm: '福田河镇',
      area:"200",
      rz: '215.74',
      maxF: '7170',
      cxTime: '08-17 08时',
      ffTime:'08-23 20时'
    },
      {
      stnm: '顺河镇',
      area: '300',
      maxF: '10300',
      cxTime: '08-20 20时',
      ffTime:'08-20 20时'
  }
  ]
  const flyTo = (record) => {
    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 toggleStType = (type) => {
    const visible = !tableRzFilter[type];
    dispatch.realview.setTableRzFilter({ [type]: visible });
  }

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



  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> */}
        </>
      }
    >
      {
        yyRes.yy ? <>
           <div className='skyb-box' >
        <div className='rain-yb'>
          <div className='title-yb'>水库洪水演进</div>
           <TableYj onChange={() => {}}/>
            </div>
            <div className='rain-yb'>
          <div className='title-yb'>下游淹没影响</div>
           <img src={`${process.env.PUBLIC_URL}/assets/cgfx.png`} alt="" style={{ width: 420}} />
            </div>
            <div style={{position:'absolute',top:80,right:450}}>
           <img src={`${process.env.PUBLIC_URL}/assets/dcjg.jpg`} alt="" style={{ width: 370}} />
            </div>
      </div>
        </> :
          <Empty  description={<span style={{color:"#fff"}}>暂无数据</span>}/>
      }
      {
        setting && <Setting onClose={() => showSetting(false)} />
      }
    </PanelBox>
  )
}

export default HDReal;