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

type Props = {
  id: string;
};

const Info: FC<Props> = function ({id}) {
  const control = useControl();
  const {data: options, isFetching} = useDictionaryOptions(
    '部门字典',
    false,
    state => state.code,
  );
  useWatchId(id);

  return (
    <>
      <ModalField name='containerName' label='容器名称' control={control} />
      <ModalField name='containerCode' 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}
        loading={isFetching}
      />
    </>
  );
};

export default Info;
