/*
 * @Author: zhoux zhouxia@supervision.ltd
 * @Date: 2023-11-14 15:49:36
 * @LastEditors: zhoux zhouxia@supervision.ltd
 * @LastEditTime: 2023-12-11 10:30:54
 * @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 表单的操作按钮集合 key的报错未解决
type actionsProps = {
  key: string;
  renderDom: any;
}

export type TableActionItemProps = {
  renderActions: actionsProps[];
  listType?: 'proTable' | 'proList'
};

const TableActionCard: React.FC<TableActionItemProps> = (props) => {
  const { renderActions } = props;
  const maxActionCount = 3;
  let prevActions: any[] = [];
  const moreActions: { key: string; label: any }[] = [];
  if (renderActions.length <= maxActionCount) {
    prevActions = renderActions;
  } else {
    // 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.renderDom,
        });
      }
      // eslint-disable-next-line react/jsx-key
    });
  }
  return (
    <div className={`${ props?.listType ? props?.listType : 'proTable'}ActionBox`}>
      {prevActions.map((item) => {
        return (
          <span style={ props?.listType === 'proList' ? { paddingLeft: 8} : { paddingRight: 8 }} key={item.key}>
            {item.renderDom}
          </span>
        );
      })}
      {moreActions.length ? (
        <Dropdown menu={{ items: moreActions }}>
          <a>
            更多
            <DownOutlined />
          </a>
        </Dropdown>
      ) : (
        <></>
      )}
    </div>
  );
};

export default TableActionCard;
