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:'宋埠镇', name2:'项生(宋埠)', name3:'675.49', name4:'680.23', name5:'692.17' },
  { name:'黄土岗镇', name2:'鹰山畈(黄土岗)', name3:'692.92', name4:'710.29', name5:'728.38' },
]
const data2 = [
  { name:'阎家河', name2:'桃林河(阎河)', name3:'609.78', name4:'603.20', name5:'639.21' },
  { name:'巴水', name2:'杨梅河(木子店)', name3:'509.53', name4:'539.20', name5:'558.29' },
]

function Page({ tab }) {

  return (
    <TableContainer style={{ height: '12rem' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow>
              <DpTableCell style={{ minWidth: '6rem' }} align="left">{tab==='1'?'乡镇':'流域'}</DpTableCell>
              <DpTableCell style={{ minWidth: '8rem' }} align="center">测站</DpTableCell>
              <DpTableCell style={{ minWidth: '6rem' }} align="center">实时水位(m)</DpTableCell>
              <DpTableCell style={{ minWidth: '6rem' }} align="center">警戒水位(m)</DpTableCell>
              <DpTableCell style={{ minWidth: '6rem' }} align="center">保证水位(m)</DpTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {(tab==='1'?data:data2).map((row) => (
              <DpTableRow key={row.name}>
                <DpTableCell component="th" scope="row">
                  <div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
                </DpTableCell>
                <DpTableCell align="center">{row.name2}</DpTableCell>
                <DpTableCell align="center">{row.name3}</DpTableCell>
                <DpTableCell align="center">{row.name4}</DpTableCell>
                <DpTableCell align="center">{row.name5}</DpTableCell>
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
    </TableContainer>
  )
}

export default React.memo(Page);