<script setup lang="ts">
/**
 * 卡片视图专用操作栏（与列表交互解耦）
 *
 * 列表单元格里 TableAction 平铺全部按钮没问题，但卡片 footer 空间小，
 * 按钮超过 2 个会触发 TableAction 的两列 grid 换行堆叠，显得杂乱。
 * 这里改成 C 端惯例：只露出前 maxVisible 个主操作（默认 1 个，通常是「详情」），
 * 其余操作全部合并进「···」下拉菜单。
 *
 * 权限（auth）/ 显隐（ifShow）/ 二次确认（popConfirm）逻辑不重写：
 * - 挑主操作前先按与 TableAction 相同的规则过滤，保证露出的一定是可见按钮；
 * - 渲染仍复用 TableAction（flex=false 关闭多列 grid），菜单项行为完全一致。
 */
import type { ActionItem } from './types';

import { computed } from 'vue';

import { useAccess } from '@vben/access';
import { isBoolean, isFunction } from '@vben/utils';

import { Button } from 'ant-design-vue';

import { Icon } from '#/components/icon';

import TableAction from './table-action.vue';

const props = withDefaults(
  defineProps<{
    actions?: ActionItem[];
    dropDownActions?: ActionItem[];
    /** 露出的主操作数量，其余进「···」菜单 */
    maxVisible?: number;
  }>(),
  {
    actions: () => [],
    dropDownActions: () => [],
    maxVisible: 1,
  },
);

const { hasAccessByCodes } = useAccess();

/** 与 TableAction 同规则判断单个操作是否可见（auth + ifShow） */
function isActionVisible(action: ActionItem): boolean {
  const authPass =
    (action.auth || []).length === 0 || hasAccessByCodes(action.auth || []);
  if (!authPass) return false;
  const ifShow = action.ifShow;
  if (isBoolean(ifShow)) return ifShow;
  if (isFunction(ifShow)) return ifShow(action);
  return true;
}

/** 过滤后的可见操作：前 maxVisible 个露出，其余与原下拉操作合并进「···」 */
const splitActions = computed(() => {
  const visible = (props.actions || []).filter((action) =>
    isActionVisible(action),
  );
  return {
    primary: visible.slice(0, props.maxVisible),
    // 下拉里的项 TableAction 会再过滤一遍 auth/ifShow，这里直接透传原始项即可
    rest: [...visible.slice(props.maxVisible), ...(props.dropDownActions || [])],
  };
});
</script>

<template>
  <TableAction
    :actions="splitActions.primary"
    :drop-down-actions="splitActions.rest"
    :flex="false"
  >
    <!-- 默认的「···」图标点击区太小，换成 link 文字「更多」，与主操作按钮同视觉 -->
    <template #more>
      <Button size="small" type="link" class="card-actions__more">
        更多
        <Icon icon="ant-design:down-outlined" class="card-actions__more-icon" />
      </Button>
    </template>
  </TableAction>
</template>

<style scoped lang="scss">
/* 箭头比文字略小一号；左间距由 TableAction 全局的 span+iconify 规则统一控制 */
.card-actions__more-icon {
  font-size: 10px;
}
</style>
