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 { DrpRealPromise } from '../../../../models/_/real';
import useRefresh from '../../../../utils/useRefresh';
import clsx from 'clsx';
import { renderDrp } from '../../../../utils/renutils';
import { TableSortLabel } from '@material-ui/core';
import { InfoPopNames } from '../../InfoPops';
// import AreaDrpChart from './chart';
import config from '../../../../config';
import TablePage from './table.js'

function DrpReal({ style }) {
  const dispatch = useDispatch();
  const [ tab, setTab ] = useState('1')
  const [ tab2, setTab2 ] = useState('1')
  const data = [
    { name:'余家河', dm:'华光潭二级...', hfsw:'224.1', hfll:'30.25', tm:'05-29 14:00' },
    { name:'朱家河', dm:'龙岗假山头', hfsw:'130.55', hfll:'55.65', tm:'05-29 14:30' },
    { name:'举水', dm:'昌化', hfsw:'103.22', hfll:'75.61', tm:'05-29 15:00' },
    { name:'巴水', dm:'河桥', hfsw:'85.86', hfll:'15.72', tm:'05-30 02:00' },
    { name:'沙河', dm:'於潜', hfsw:'69.09', hfll:'15.11', tm:'05-29 14:00' },
  ]

  const flyTo = (record) => {
    const { lgtd, lttd } = record;
    if (lgtd && lttd) {
      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd + config.poiPositionOffsetY.drp],
        zoom: config.poiPositionZoom.drp,
        pitch: config.poiPitch,
        bearing: 0
      });
    }
  }


  return (
    <PanelBox
      style={style}
      title="重点关注水情"
      color="green"
      tabs={
        <>
        </>
      }
      extra={
        <>
          <span className="button-group">
            <span className={clsx({ active: tab==='1' })} onClick={() => setTab('1')}>河道</span>
            <span className={clsx({ active: tab==='2' })} onClick={() => setTab('1')}>水库</span>
          </span>
        </>
      }
    >
      <div className='tabStyle' style={{padding:'5px',paddingBottom:'15px'}}>
        <span className="card-group">
            <span className={clsx({ active: tab2==='1'})} style={{marginRight:'0.3rem'}} onClick={() => setTab2('1')}>政区</span>
            <span className={clsx({ active: tab2==='2'})} style={{marginRight:'0.3rem'}} onClick={() => setTab2('2')}>流域</span>
        </span>
      </div>
      { tab==='1'?<TablePage tab={tab2}/>:null }
    </PanelBox>
  )
}

export default DrpReal;