import { Grid } from '@material-ui/core';
import React from 'react';

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

function SkInfo({ record }) {
    const data = [
        { stnm: '福田镇中心区', leakage: '1258.6', supply: '3526.8', rate: 35.6 },
        { stnm: '木子店镇区', leakage: '986.3', supply: '2832.7', rate: 34.8 },
        { stnm: '龙池桥镇区', leakage: '1485.5', supply: '4482.5', rate: 33.1 },
        { stnm: '宋埠镇区', leakage: '1284.8', supply: '4029.5', rate: 31.9 },
        { stnm: '黄土岗镇区', leakage: '186.2', supply: '698.2', rate: 26.7 },
        { stnm: '铁门岗镇区', leakage: '984.2', supply: '3994.4', rate: 24.6 },
        { stnm: '乘马岗镇区', leakage: '300.6', supply: '1250.5', rate: 24.0 },
        { stnm: '白果镇区', leakage: '1129.0', supply: '6422.6', rate: 17.6 },
        { stnm: '张家畈镇区', leakage: '444.8', supply: '2661.8', rate: 16.7 },
        { name: '顺河镇区', leakage: '749.3', supply: '4490.1', rate: 16.7 }
      ];


  return (
    <div>
      <TableContainer style={{ height: '80%', marginTop: '10px' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow >
              <DpTableCell style={{ minWidth: '4rem' }} align="center">序号</DpTableCell>
              <DpTableCell style={{ minWidth: '4rem' }} align="center">压力</DpTableCell>
              <DpTableCell style={{ minWidth: '4rem' }} align="center">流量(㎡)</DpTableCell>
              <DpTableCell align="center" style={{ minWidth: '4rem' }}>水质</DpTableCell>
              <DpTableCell align="center" style={{ minWidth: '4rem' }}>监测时间</DpTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map((row,i) => (
              <DpTableRow key={row.id}>
                <DpTableCell align="center">
                  <div
                    className="table-ellipsis cursor-pointer"
                  >{i+1}</div>
                </DpTableCell>
                <DpTableCell align="center">{row.leakage}</DpTableCell>
                <DpTableCell align="center">{row.rate}</DpTableCell>
                <DpTableCell align="center">{'-'}</DpTableCell>
                <DpTableCell align="center">{moment().format('YYYY-MM-DD')}</DpTableCell>
                {/* {rzRender(row.rz, row.grz)}
                {rzRender(row.rz, row.wrz)} */}
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  )
}

export default SkInfo;