<template>
    <!-- 按钮组模式 -->
    <div class="permission-button-group">
        <template v-for="(btn, index) in props.buttons" :key="index">
            <!-- 过滤无权限的按钮 -->
            <el-button
                v-permissionDirective="btn.permission"
                v-bind="btn.props"
                :customClass="btn.class"
                :disabled="btn.disabled"
                @click="handleButtonClick(btn, $event)"
            >
                <template #default>
                    {{ btn.text }}
                    <slot :name="btn.name" />
                </template>
            </el-button>
        </template>
    </div>
</template>

<script setup lang="ts">
// 定义按钮属性类型
interface ButtonProps {
    // 按钮文本
    text?: string;
    // 按钮名称（用于插槽和标识）
    name?: string;
    // 按钮权限标识（支持单个或多个）
    permission?: string | string[];
    // Element Plus 按钮原生属性
    props?: Record<string, any>;
    // 自定义类名
    class?: string;
    // 是否禁用
    disabled?: boolean;
}

// 组件属性
const props = defineProps<{
    // 按钮组配置（按钮组模式用）
    buttons?: ButtonProps[];
}>();

// 处理按钮组点击事件
const handleButtonClick = (btn: ButtonProps, event: Event) => {
    // 触发组件的统一点击事件（携带按钮信息）
    emit("handleButtonClickCallback", btn, event);
};

// 组件事件
const emit = defineEmits<{
    (e: "handleButtonClickCallback", btn: ButtonProps, event: Event): void;
}>();
</script>

<style scoped>
.permission-button {
    /* 单个按钮的基础样式 */
}
.permission-button-group {
    /* 按钮组的基础样式 */
    display: inline-flex;
    gap: 4px;
}
</style>
