import Helper from '@/util/searchHelper';
import { ProTable, ProTableProps } from '@ant-design/pro-components';
import { useResponsive } from 'antd-style';

export default function BaseTable<U>({
  props,
  requestFun,
  searchKey,
}: {
  props: ProTableProps<U, any>;
  requestFun?: () => Promise<CommonResponse<U[]>>;
  searchKey?: string;
}) {
  const responsive = useResponsive();

  /**********************************狀態管理**********************************/
  /**********************************狀態管理**********************************/
  /**********************************組件初始化**********************************/
  /**********************************組件初始化**********************************/
  /**********************************異步函數**********************************/
  /**********************************異步函數**********************************/
  return (
    <div className="rounded-[4px] bg-white">
      <ProTable
        search={false}
        pagination={{
          pageSize: responsive.md ? 10 : 5, // 响应式分页大小
          showSizeChanger: responsive.md,
        }}
        scroll={{
          x: 'max-content', // 允许水平滚动
          y: responsive.md ? 600 : 400, // 响应式表格高度
        }}
        cardProps={{
          bodyStyle: { padding: responsive.md ? 24 : 12 }, // 响应式内边距
        }}
        request={async () => {
          const dataSource = await requestFun().then(({ detail }) => {
            console.log('detail', detail);
            return {
              success: true,
              data: detail,
            };
          });
          if (searchKey) {
            console.log('searchKey', searchKey);
            dataSource.data = Helper({
              dataSource: dataSource.data,
              keyWord: searchKey,
            });
            return dataSource;
          } else {
            return dataSource;
          }
        }}
        {...props}
      ></ProTable>
    </div>
  );
}
