import React from 'react';
import { Field } from '@alifd/next';
import { Pagination } from '@alifd/meet-react';
import useFusionTable from './useFusionTable';
import SimpleCardTableMobile from './SimpleCardTable';
import { ITablePro_PC } from '../type';
import Filter from './filter';
import Action from './Action';
import { getTableDataFunc } from '../model';
import './index.scss';

const MobileTablePro: ITablePro_PC = (props) => {
  const {
    affixProps,
    primaryKey,
    columns = [],
    getListUri = '',
    getListHandle,
    actionBar,
    filterBar,
    colSpan = 3,
    simple = false,
    actionColumn,
    ...more
  } = props;

  const restTableProps = { affixProps, primaryKey, ...more };

  const renderActionBar = !!(actionBar && actionBar.length);
  const renderFilterBar = !!(filterBar && filterBar.length);
  // const renderActionColumn = !!(actionColumn && actionColumn.length);
  // 获取表格数据
  let getTableList;

  if (!!getListHandle) {
    getTableList = getListHandle;
  } else if (!!getListUri) {
    getTableList = getTableDataFunc(getListUri);
  } else {
    getTableList = () => {};
  }

  // 获取表格数据
  const field = Field.useField([]);
  const useTable = useFusionTable(getTableList, { field });
  const { paginationProps, tableProps, search, refresh, run, runAsync } = useTable;
  // 提供刷新方法
  MobileTablePro.onRefresh = refresh;
  MobileTablePro.run = run;
  MobileTablePro.runAsync = runAsync;

  if (simple)
    return <SimpleCardTableMobile {...tableProps} {...restTableProps} actionColumn={actionColumn} columns={columns} />;

  return (
    <div className="oc-container">
      <div className="oc-header">
        {renderActionBar && <Action actionColumns={actionBar} />}
        <div className="oc-filter">
          {renderFilterBar && <Filter field={field} filterBar={filterBar} search={search} />}
        </div>
      </div>
      <div className="oc-content">
        <SimpleCardTableMobile {...tableProps} {...restTableProps} actionColumn={actionColumn} columns={columns} />
        <div className="oc-pagination">
          {/* @ts-ignore */}
          <Pagination size="medium" {...paginationProps} />
        </div>
      </div>
    </div>
  );
};

// TODO 将Column转换成卡片
// MobileTablePro.Column = Table.Column;

export default MobileTablePro;