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';

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;
  selectedValue?: (value: any) => void;
  selectParams?: (value: any) => void;
  serialWidth?: number;
  isChildExpand?: boolean;
  disabledKey?: string;
  disabledValue?: string | number;
};

const SearchTable = ({
  columns,
  initAPI,
  headerTitle,
  toolBarRender,
  toolbar,
  rowKey,
  reload,
  isSerial,
  isMass,
  setMassIds,
  expandedRowRender,
  expandChildrenColumnName,
  otherParams,
  selectedValue,
  selectParams,
  serialWidth,
  isChildExpand,
  disabledKey,
  disabledValue,
}: SearchTableType) => {
  // console.log(reload, 'reload');
  const intl = useIntl();
  const [customColumns, setCustomColumns] = useState<any>();
  // 操作表格
  const tableRef: React.MutableRefObject<any> = useRef();
  // 递归处理带子项child的表格，没数据将child转为null，防止出现空展开的图标
  const extractChildren = (arr: any) => {
    return arr.map((item: any) => {
      if (item.child && item.child.length === 0) {
        item.child = null;
      } else if (item.child && item.child.length > 0) {
        item.child = extractChildren(item.child);
      }
      return item;
    });
  };
  // 封装表格类 网络请求
  const getTable: any = async (params: {
    pageSize: number;
    current: number;
  }) => {
    const req: any = {
      ...otherParams,
      ...params,
      pageSize: params.pageSize,
      pageNum: params.current,
    };
    if (selectParams) selectParams(req);
    delete req.current;
    const resp = await getTableData(initAPI, req);
    let dataItems;
    if (isSerial) {
      if (isChildExpand) {
        const data = resp.data.items.map((item: any, index: number) => ({
          ...item,
          orderIndex: index + 1 + (params.current - 1) * params.pageSize,
        }));
        dataItems = extractChildren(data);
      } else {
        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.total,
    };
  };
  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: serialWidth ? serialWidth : 80,
          fixed: 'left',
          align: 'center',
          search: false,
        },
        ...columns.map((item) => {
          if (!item.title) return item;
          return {
            ...item,
            ellipsis: true,
          };
        }),
      ]);
    } else {
      setCustomColumns(columns);
    }
  }, []);

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

  return (
    <div className="padding-m">
      <ProTable<TableListItem>
        actionRef={tableRef}
        columns={customColumns}
        request={getTable}
        scroll={{ x: 1440 }}
        params={otherParams || {}}
        onDataSourceChange={() => {
          // 清除选中项
          tableRef.current.clearSelected();
        }}
        rowKey={rowKey || 'id'}
        rowSelection={
          isMass
            ? {
                // 注释该行则默认不显示下拉选项
                selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
                onChange: (selectedRowKeys, value) => {
                  if (setMassIds) {
                    setMassIds(selectedRowKeys);
                  }
                  if (selectedValue) {
                    selectedValue(value);
                  }
                },
                getCheckboxProps: (record: any) => ({
                  disabled: disabledKey
                    ? record[disabledKey] !== disabledValue
                    : false,
                }),
              }
            : undefined
        }
        tableAlertRender={({
          selectedRowKeys,
          // selectedRows,
          // onCleanSelected,
        }) => {
          return (
            <Space size="small">
              <span>
                <FormattedMessage
                  id="columns.handel.selected"
                  defaultMessage="已选"
                />
              </span>
              <span>{selectedRowKeys.length}</span>
              <span>
                <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,
        }}
        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;