/*
 * @Author: zhoux zhouxia@supervision.ltd
 * @Date: 2023-11-14 15:49:36
 * @LastEditors: zhoux zhouxia@supervision.ltd
 * @LastEditTime: 2023-11-14 16:07:11
 * @FilePath: \general-ai-platform-web\src\components\TableActionCard\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { DownOutlined } from '@ant-design/icons';
import { Dropdown } from 'antd';
import React from 'react';

//TODO 表单的操作按钮集合
type TableActionItemProps = {
  renderActions: any[];
};

 const TableActionCard: React.FC<TableActionItemProps> = (props) => {
  const { renderActions } = props;
  const maxActionCount = 3;
  if (renderActions.length <= maxActionCount) {
    return renderActions.map((item) => {
      return <>{item}</>;
    });
  }
  const prevActions: any[] = [];
  const moreActions: { key: string; label: any }[] = [];
  // eslint-disable-next-line array-callback-return
  renderActions.map((item, index) => {
    if (index < maxActionCount - 1) {
      prevActions.push(item);
    } else {
      moreActions.push({
        key: index + '',
        label: item,
      });
    }
    // eslint-disable-next-line react/jsx-key
  });
  return (
    <>
      {prevActions.map((item, index) => {
        return <div key={index}>{item}</div>;
      })}
      <Dropdown menu={{ items: moreActions }}>
        <a>
          更多
          <DownOutlined />
        </a>
      </Dropdown>
    </>
  );
};

export default TableActionCard