import React from "react";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {Table, TableBody, TableHead} from "@mui/material";
import intl from "react-intl-universal";
import {useAppSelector} from "../../../store/hooks";
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";

function LeftTableMonthQ() {
  const AllData = useAppSelector(selectQualityMonitorEntity);
  const QualityAll = AllData.monthQualityAll;
  const SlicedQualityAll = QualityAll.slice(0, 10)
  return (
    <StyledTableContainer>
      <Table>
        <TableHead>
          <StyledTableRow>
            <StyledTableCell align="center" sx={{width: 100}}>{intl.get('serialNo')}</StyledTableCell>
            <StyledTableCell align="center" sx={{width: 250}}>{intl.get('DefectType')}</StyledTableCell>
            <StyledTableCell align="center" sx={{width: 120}}>{intl.get('DefectNumber')}</StyledTableCell>
          </StyledTableRow>
        </TableHead>
        <TableBody>
          {SlicedQualityAll.map((item, index) => (
            <StyledTableRow key={index}>
              <StyledTableCell align="center">{item.sort}</StyledTableCell>
              <StyledTableCell align="center" sx={{
                maxWidth: 250,
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis'
              }}>{item.content}</StyledTableCell>
              <StyledTableCell align="center">{item.num}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </StyledTableContainer>
  )
}

export default LeftTableMonthQ;