/**
 * THIS IS AN AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 */
import ProDescriptions from '@ant-design/pro-descriptions';
import { FormattedMessage } from 'umi';
import useRequestInfo from '@/generated/hooks/useRequestInfo';
import defaultTableProps from '../props/table';
import { cloneDescriptionColumns } from '@/generated/utils/';

const { columns: originColumns, ...restTableProps } = defaultTableProps;
const columns = cloneDescriptionColumns(originColumns);
const fields = defaultTableProps.columns
  .filter((column) => !column.hideInDescriptions && !column.key.startsWith('__'))
  .map((column) => column.key);

export type DetailProps = Pick<API.{{Table}}, 'id'> & {
  extra?: React.ReactNode;
};
const Detail = (props: DetailProps) => {
  const { loading, data } = useRequestInfo('{{table}}', props.id, fields);

  return (
    <ProDescriptions<API.{{Table}}>
      loading={loading}
      column={1}
      title={<FormattedMessage id="pages.searchTable.detail" defaultMessage="Detail" />}
      labelStyle={ { justifyContent: 'flex-start', minWidth: 100 } }
      dataSource={data}
      columns={columns}
      {...restTableProps}
      extra={props.extra}
    />
  );
};

export default Detail;