import { getTableData } from '@/services/common/components';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Space, Table } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import '../index.less';


type TableListItem = {
  [key: string]: any;
};

type SearchTableType = {
  columns: ProColumns<TableListItem>[];
  initAPI: string;
  headerTitle: string;
  rowKey: string;
  reload: number;
  isSerial?: boolean;
  toolbar?:object;
  toolBarRender?: () => React.ReactNode[];
  expandChildrenColumnName?: string;
  isMass?: boolean;
  setMassIds?: (ids: (string | number)[]) => void;
  expandedRowRender?: (record: any) => JSX.Element;
  otherParams:object
};

const SearchTable = ({
  columns,
  initAPI,
  headerTitle,
  toolBarRender,
  toolbar,
  rowKey,
  reload,
  isSerial,
  isMass,
  setMassIds,
  expandedRowRender,
  expandChildrenColumnName,
  otherParams
}: SearchTableType) => {
  const intl = useIntl();
  const [customColumns, setCustomColumns] = useState<any>();
  // 操作表格
  const tableRef: React.MutableRefObject<any> = useRef();
  // 封装表格类 网络请求
  const getTable: any = async (params: {
    pageSize: number;
    current: number;
  }) => {
    const req: any = {
      ...otherParams,
      ...params,
      pageSize: params.pageSize,
      pageNum: params.current,
    };
    delete req.current;
    const resp = await getTableData(initAPI, req);
    let dataItems;
    dataItems = resp.data.items.map((item: any) => {
      item.isAdd = true;
      if (item.children?.length === 0) {
        item.children=null;
      }
      return item;
    });
    if (isSerial) {
      dataItems = resp.data.items.map((item: any, index: number) => ({
        ...item,
        orderIndex: index + 1 + (params.current - 1) * params.pageSize,
      }));
    } else {
      dataItems = resp.data.items;
    }
    return {
      data: dataItems,
      success: true,
      total: resp.data.totalPage * params.pageSize,
    };
  };
  useEffect(() => {
    if (isSerial) {
      setCustomColumns([
        {
          title: intl.formatMessage({
            id: 'columns.title.index',
            defaultMessage: '序号',
          }),
          dataIndex: 'orderIndex',
          render: (text: any) => <span>{parseInt(text) > 0 ? parseInt(text) : ''}</span>,
          // valueType: 'index',
          key: 'index',
          width: 80,
          fixed: 'left',
          search: false,
        },
        ...columns.map((item) => {
          if (!item.title) return item;
          return {
            ...item,
            ellipsis: true,
          };
        }
        ),
      ]);
    } else {
      setCustomColumns(columns);
    }
  }, []);

  useEffect(() => {
    // 当依赖值发生变化时执行，刷新表格，保持page和pageSize不变
    tableRef.current.reload();
    
    // console.log('SearchTable useEffect');
  }, [reload]);


  return (
      <div className="table-box">
      <ProTable<TableListItem>
        actionRef={tableRef}
        columns={customColumns}
        request={getTable}
        scroll={{ x: 1440 }}

        onDataSourceChange={() => {
          // 清除选中项
          tableRef.current.clearSelected();
        }}
        
        rowKey={rowKey || 'id'}
        rowSelection={
          isMass
            ? {
              // 注释该行则默认不显示下拉选项
              selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
              onChange: (selectedRowKeys) => {
                if (setMassIds) {
                  setMassIds(selectedRowKeys);
                }
              }
            }
            : undefined
        }
        tableAlertRender={({
          selectedRowKeys,
          // selectedRows,
          // onCleanSelected,
        }) => {
          return (
            <Space size={24}>
              <span>
                <FormattedMessage
                  id="columns.handel.selected"
                  defaultMessage="已选"
                />
                {selectedRowKeys.length}
                <FormattedMessage id="columns.handel.unit" defaultMessage="项" />
                {/* <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
                  <FormattedMessage id="columns.handel.cancel.selected" defaultMessage="取消选择" />
                </a> */}
              </span>
            </Space>
          );
        }}
        // tableAlertOptionRender={() => {
        //   return (
        //     <Space size={16}>
        //       <Button >
        //         <FormattedMessage id="columns.handel.mass.delete" defaultMessage="批量删除" />
        //       </Button>
        //     </Space>
        //   );
        // }}
        pagination={{
          showQuickJumper: true,
          defaultPageSize: 10,
          pageSize: 10,
        }}
        search={{
          labelWidth: 'auto',
          layout:'vertical'
          // collapsed: true,
        }}
        dateFormatter="string"
        headerTitle={headerTitle}
        toolbar={toolbar}
        toolBarRender={toolBarRender || undefined}
        expandable={{
          childrenColumnName:expandChildrenColumnName?expandChildrenColumnName:'children',
          expandedRowRender: expandedRowRender || undefined,
          rowExpandable: (item: any) => item.children && item.children.length > 0
        }}
      />
    </div>
  );
};

export default SearchTable;