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 appconsts from '../../../../models/appconsts';
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';


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' },
]

function Page({ style }) {

  return (
    <TableContainer style={{ height: '100%' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow>
              <DpTableCell style={{ maxWidth: '30%' }} align="left">河流名称</DpTableCell>
              <DpTableCell align="center">断面名称</DpTableCell>
              <DpTableCell align="center">洪峰水位</DpTableCell>
              <DpTableCell align="center">洪峰流量</DpTableCell>
              <DpTableCell align="center">峰现时间</DpTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map((row) => (
              <DpTableRow key={row.stcd}>
                <DpTableCell component="th" scope="row">
                  <div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
                </DpTableCell>
                <DpTableCell align="center">{row.dm}</DpTableCell>
                <DpTableCell align="center">{row.hfsw}</DpTableCell>
                <DpTableCell align="center">{row.hfll}</DpTableCell>
                <DpTableCell align="center">{row.tm}</DpTableCell>
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
    </TableContainer>
  )
}

export default React.memo(Page);