import React, { useState, useRef, useEffect, useMemo } from "react"; 
 | 
import { 
 | 
    Edit, 
 | 
    SimpleForm, 
 | 
    FormDataConsumer, 
 | 
    useTranslate, 
 | 
    TextInput, 
 | 
    NumberInput, 
 | 
    BooleanInput, 
 | 
    DateInput, 
 | 
    SelectInput, 
 | 
    ReferenceInput, 
 | 
    ReferenceArrayInput, 
 | 
    AutocompleteInput, 
 | 
    SaveButton, 
 | 
    Toolbar, 
 | 
    Labeled, 
 | 
    NumberField, 
 | 
    required, 
 | 
    useRecordContext, 
 | 
    DeleteButton, 
 | 
} from 'react-admin'; 
 | 
import { useWatch, useFormContext } from "react-hook-form"; 
 | 
import { Stack, Grid, Box, Typography } from '@mui/material'; 
 | 
import * as Common from '@/utils/common'; 
 | 
import { EDIT_MODE, REFERENCE_INPUT_PAGESIZE } from '@/config/setting'; 
 | 
import EditBaseAside from "../components/EditBaseAside"; 
 | 
import CustomerTopToolBar from "../components/EditTopToolBar"; 
 | 
import MemoInput from "../components/MemoInput"; 
 | 
import StatusSelectInput from "../components/StatusSelectInput"; 
 | 
  
 | 
const FormToolbar = () => { 
 | 
    const { getValues } = useFormContext(); 
 | 
  
 | 
    return ( 
 | 
        <Toolbar sx={{ justifyContent: 'space-between' }}> 
 | 
            <SaveButton /> 
 | 
            <DeleteButton mutationMode="optimistic" /> 
 | 
        </Toolbar> 
 | 
    ) 
 | 
} 
 | 
  
 | 
const ContainerEdit = () => { 
 | 
    const translate = useTranslate(); 
 | 
    const dicts = JSON.parse(localStorage.getItem('sys_dicts'))?.filter(dict => (dict.dictTypeCode == 'sys_container_type')) || []; 
 | 
  
 | 
    return ( 
 | 
        <Edit 
 | 
            redirect="list" 
 | 
            mutationMode={EDIT_MODE} 
 | 
            actions={<CustomerTopToolBar />} 
 | 
            aside={<EditBaseAside />} 
 | 
            title={"menu.container"} 
 | 
        > 
 | 
            <SimpleForm 
 | 
                shouldUnregister 
 | 
                warnWhenUnsavedChanges 
 | 
                toolbar={<FormToolbar />} 
 | 
                mode="onTouched" 
 | 
                defaultValues={{}} 
 | 
            // validate={(values) => { }} 
 | 
            > 
 | 
                <Grid container width={{ xs: '100%', xl: '80%' }} rowSpacing={3} columnSpacing={3}> 
 | 
                    <Grid item xs={12} md={8}> 
 | 
                        <Typography variant="h6" gutterBottom> 
 | 
                            {translate('common.edit.title.main')} 
 | 
                        </Typography> 
 | 
                        {/* <Stack direction='row' gap={2}> 
 | 
                            <TextInput 
 | 
                                label="table.field.container.code" 
 | 
                                source="code" 
 | 
                                parse={v => v} 
 | 
                                autoFocus 
 | 
                                validate={required()} 
 | 
                            /> 
 | 
                        </Stack> */} 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <TextInput 
 | 
                                label="table.field.container.name" 
 | 
                                source="name" 
 | 
                                parse={v => v} 
 | 
                            /> 
 | 
                        </Stack> 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <AutocompleteInput 
 | 
                                choices={dicts} 
 | 
                                optionText="label" 
 | 
                                label="table.field.container.typeId" 
 | 
                                source="type" 
 | 
                                optionValue="value" 
 | 
                                parse={v => v} 
 | 
                                validate={[required()]} /> 
 | 
                        </Stack> 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <NumberInput 
 | 
                                label="table.field.container.used" 
 | 
                                source="used" 
 | 
                                validate={required()} 
 | 
                            /> 
 | 
                        </Stack> 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <NumberInput 
 | 
                                label="table.field.container.lenght" 
 | 
                                source="length" 
 | 
                            /> 
 | 
                        </Stack> 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <NumberInput 
 | 
                                label="table.field.container.width" 
 | 
                                source="width" 
 | 
                            /> 
 | 
                        </Stack> 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <NumberInput 
 | 
                                label="table.field.container.height" 
 | 
                                source="height" 
 | 
                            /> 
 | 
                        </Stack> 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <NumberInput 
 | 
                                label="table.field.container.rstLen" 
 | 
                                source="rstLen" 
 | 
                            /> 
 | 
                        </Stack> 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <NumberInput 
 | 
                                label="table.field.container.rstWid" 
 | 
                                source="rstWid" 
 | 
                            /> 
 | 
                        </Stack> 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <NumberInput 
 | 
                                label="table.field.container.rstWei" 
 | 
                                source="rstWei" 
 | 
                            /> 
 | 
                        </Stack> 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <NumberInput 
 | 
                                label="table.field.container.rstHei" 
 | 
                                source="rstHei" 
 | 
                            /> 
 | 
                        </Stack> 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <ReferenceInput 
 | 
                                source="panrentId" 
 | 
                                reference="container" 
 | 
                            > 
 | 
                                <AutocompleteInput 
 | 
                                    label="table.field.container.panrentId" 
 | 
                                    optionText="name" 
 | 
                                    filterToQuery={(val) => ({ name: val })} 
 | 
                                /> 
 | 
                            </ReferenceInput> 
 | 
  
 | 
                        </Stack> 
 | 
  
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <DateInput 
 | 
                                label="table.field.container.vaildTime" 
 | 
                                source="vaildTime" 
 | 
                            /> 
 | 
                        </Stack> 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <SelectInput 
 | 
                                label="table.field.container.flagRycle" 
 | 
                                source="flagRycle" 
 | 
                                choices={[ 
 | 
                                    { id: 1, name: '是' }, 
 | 
                                    { id: 0, name: '否' }, 
 | 
                                ]} 
 | 
                                validate={required()} 
 | 
                            /> 
 | 
                        </Stack> 
 | 
                        <Stack direction='row' gap={2}> 
 | 
                            <SelectInput 
 | 
                                label="table.field.container.flagLogic" 
 | 
                                source="flagLogic" 
 | 
                                choices={[ 
 | 
                                    { id: 1, name: '是' }, 
 | 
                                    { id: 0, name: '否' }, 
 | 
                                ]} 
 | 
                                validate={required()} 
 | 
                            /> 
 | 
                        </Stack> 
 | 
  
 | 
                    </Grid> 
 | 
                    {/* <Grid item xs={12} md={4}> 
 | 
                        <Typography variant="h6" gutterBottom> 
 | 
                            {translate('common.edit.title.common')} 
 | 
                        </Typography> 
 | 
                        <StatusSelectInput /> 
 | 
                        <Box mt="2em" /> 
 | 
                        <MemoInput /> 
 | 
                    </Grid> */} 
 | 
                </Grid> 
 | 
            </SimpleForm> 
 | 
        </Edit > 
 | 
    ) 
 | 
} 
 | 
  
 | 
export default ContainerEdit; 
 |