import React from 'react';
import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
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';
export default function Overall({ style }) {

  const { data } = useRequest(OverallPromise.get);
  const showData = [
    {
      unit: '浮桥河灌区',
      inspectionCount: '大型',
      eventCount: 31.96,
      processingCount: '--'
    },
  ]
  return (
    <PanelBox
      style={style}
      title="信息总览"
      color="green"
    >
      {/* <OverallContent data={data} /> */}
          <img  src={`${process.env.PUBLIC_URL}/assets/xxzl.jpg`} alt="" style={{width:421}}/>
       <TableContainer style={{ height: '30%',marginTop:'10px' }}>
        <Table size="small" stickyHeader>
          <TableHead>
            <TableRow >
              <DpTableCell style={{ width: '25%' }} align="center">灌区名称</DpTableCell>
              <DpTableCell style={{ width: '25%' }} align="center">灌区类型</DpTableCell>
              <DpTableCell align="center" style={{ width: '25%' }}>灌溉面积(万亩)</DpTableCell>
              <DpTableCell align="center" style={{ width: '25%' }}>受益人口</DpTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {showData.map((row) => (
              <DpTableRow key={row.id}>
                <DpTableCell align="center">
                  <div
                    className="table-ellipsis cursor-pointer"
                  >{row.unit}</div>
                </DpTableCell>
                <DpTableCell align="center">{row.inspectionCount}</DpTableCell>
                <DpTableCell align="center"><div className="table-ellipsis cursor-pointer">{row.eventCount}</div></DpTableCell>
                <DpTableCell align="center">{row.processingCount}</DpTableCell>
                {/* {rzRender(row.rz, row.grz)}
                {rzRender(row.rz, row.wrz)} */}
              </DpTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </PanelBox>
  )
}