import {FC} from 'react';
import {useControl, useWatchId} from './hooks';
import {ModalField, ModalSelect} from '@components';
import {useDepartmentOptions} from '@hooks';

type Props = {
  id: string
};

const Info: FC<Props> = function({id}) {
  const control = useControl();
  const options = useDepartmentOptions();
  useWatchId(id);

  return (
    <>
      <ModalField
        name='containerName'
        label='容器名称'
        control={control}
      />
      <ModalField
        name='containerType'
        label='容器类型'
        control={control}
      />
      <ModalField
        name='containerNum'
        label='容器数量'
        type='number'
        control={control}
      />
      <ModalSelect
        name='containerDepartment'
        control={control}
        label='所属部门'
        data={options}
      />
    </>
  );
};

export default Info;
