import React, { useState, useRef, useEffect, useMemo } from "react"; 
 | 
import { Box, Card, CardContent, Grid, Typography, Tooltip } from '@mui/material'; 
 | 
import { 
 | 
    useTranslate, 
 | 
    useRecordContext, 
 | 
} from 'react-admin'; 
 | 
import PanelTypography from "../components/PanelTypography"; 
 | 
import * as Common from '@/utils/common' 
 | 
  
 | 
const AgvDetailPanel = () => { 
 | 
    const record = useRecordContext(); 
 | 
    if (!record) return null; 
 | 
    const translate = useTranslate(); 
 | 
    return ( 
 | 
        <> 
 | 
            <Card sx={{ width: { xs: 300, sm: 500, md: 600, lg: 800 }, margin: 'auto' }}> 
 | 
                <CardContent> 
 | 
                    <Grid container spacing={2}> 
 | 
                        <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between' }}> 
 | 
                            <Typography variant="h6" gutterBottom align="left" sx={{ 
 | 
                                maxWidth: { xs: '100px', sm: '180px', md: '260px', lg: '360px' }, 
 | 
                                whiteSpace: 'nowrap', 
 | 
                                overflow: 'hidden', 
 | 
                                textOverflow: 'ellipsis', 
 | 
                            }}> 
 | 
                                {Common.camelToPascalWithSpaces(translate('table.field.agvDetail.uuid'))}: {record.uuid} 
 | 
                            </Typography> 
 | 
                            {/*  inherit, primary, secondary, textPrimary, textSecondary, error */} 
 | 
                            <Typography variant="h6" gutterBottom align="right" > 
 | 
                                ID: {record.id} 
 | 
                            </Typography> 
 | 
                        </Grid> 
 | 
                    </Grid> 
 | 
                    <Grid container spacing={2}> 
 | 
                        <Grid item xs={12} container alignContent="flex-end"> 
 | 
                            <Typography variant="caption" color="textSecondary" sx={{ wordWrap: 'break-word', wordBreak: 'break-all' }}> 
 | 
                                {Common.camelToPascalWithSpaces(translate('common.field.memo'))}:{record.memo} 
 | 
                            </Typography> 
 | 
                        </Grid> 
 | 
                    </Grid> 
 | 
                    <Box height={20}> </Box> 
 | 
                    <Grid container spacing={2}> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.uuid"  
 | 
                                property={record.uuid} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.agvId"  
 | 
                                property={record.agvId$} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.title"  
 | 
                                property={record.title} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.pos"  
 | 
                                property={record.pos$} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.code"  
 | 
                                property={record.code$} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.lastCode"  
 | 
                                property={record.lastCode$} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.codeOffsert"  
 | 
                                property={record.codeOffsert} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.straightVal"  
 | 
                                property={record.straightVal} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.agvAngle"  
 | 
                                property={record.agvAngle} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.gyroAngle"  
 | 
                                property={record.gyroAngle} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.encoderAngle"  
 | 
                                property={record.encoderAngle} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.high"  
 | 
                                property={record.high} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.sensorSts"  
 | 
                                property={record.sensorSts} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.vol"  
 | 
                                property={record.vol} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.soc"  
 | 
                                property={record.soc} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.soh"  
 | 
                                property={record.soh} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.batteryFail"  
 | 
                                property={record.batteryFail} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.tempe"  
 | 
                                property={record.tempe} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.motorFail"  
 | 
                                property={record.motorFail} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.failSign"  
 | 
                                property={record.failSign} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.bootTime"  
 | 
                                property={record.bootTime} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.workTime"  
 | 
                                property={record.workTime} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.workDistance"  
 | 
                                property={record.workDistance} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.backpack" 
 | 
                                property={record.backpack} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
                        <Grid item xs={6}> 
 | 
                            <PanelTypography 
 | 
                                title="table.field.agvDetail.password"  
 | 
                                property={record.password} 
 | 
                            /> 
 | 
                        </Grid> 
 | 
  
 | 
                    </Grid> 
 | 
                </CardContent> 
 | 
            </Card > 
 | 
        </> 
 | 
    ); 
 | 
}; 
 | 
  
 | 
export default AgvDetailPanel; 
 |