import MenuStatus from '@/components/StatusCollection';
import { getRequest } from '@/services/common/role';
import { ProDescriptionsItemProps, ProDescriptions } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { ReactNode, useEffect, useState } from 'react';

type ListPageType = {
  url: string;
  dictId: string | number;
  parentId: string | number;
};
type TableListItem = {
  [key: string]: any;
};
const Descriptions = ({ url, dictId, parentId }: ListPageType) => {
  const intl = useIntl();
  const[ columns,setColumns ]=useState<ProDescriptionsItemProps<TableListItem>[]>( [
      {
        title: intl.formatMessage({ id: 'dictionaries.columns.title.name' }),
        dataIndex: 'dictLabel',
        key: 'dictLabel',
        valueType: 'text',
      },
      {
        title: intl.formatMessage({ id: 'dictionaries.columns.title.number' }),
        dataIndex: 'dictValue',
        key: 'dictValue',
        valueType: 'text',
      },
      {
        title: intl.formatMessage({ id: 'dictionaries.columns.title.status' }),
        dataIndex: 'status',
        key: 'status',
        // render: (item: boolean) => <MenuStatus code={item as boolean} />,
        render: (item: ReactNode) => <MenuStatus code={item as boolean} />,
      },
      
    ]);
    const otherArr:any = [
      {
        title: intl.formatMessage({ id: 'dictionaries.columns.title.isDefault' }),
        dataIndex: 'isDefault',
        key: 'isDefault',
        render: (item: number) =>
          item === 1
            ? intl.formatMessage({ id: 'columns.handel.yes' })
            : intl.formatMessage({ id: 'columns.handel.no' }),
      },
      {
        title: intl.formatMessage({ id: 'dictionaries.columns.title.isDisabled' }),
        dataIndex: 'isDisabled',
        key: 'isDisabled',
        render: (item: number) =>
          item === 1
            ? intl.formatMessage({ id: 'columns.handel.yes' })
            : intl.formatMessage({ id: 'columns.handel.no' }),
      },
    ];
  useEffect(() => {
    if (parseInt(parentId as string) !== 0) {
      setColumns(columns.concat(otherArr));
    }
  }, []);
  return (
    <ProDescriptions
      column={2}
      request={async () => {
        const data = await getRequest(`${url}`, { dictId });
        return { data: data.data, success: true };
      }}
      columns={columns}
    ></ProDescriptions>
  );
};
export default Descriptions;