<!-- src/components/CommonTableHeader.vue -->
<template>
  <div class="header">
    <h4>{{ title }}</h4>
    <div class="header-actions">
      <el-button
        v-for="(btn, index) in buttons"
        :key="btn.key || index"
        :type="btn.type || 'default'"
        :icon="btn.icon"
        v-auth="btn.auth"
        @click="handleButtonClick(btn)"
        :disabled="btn.disabled"
      >
        {{ btn.label }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ButtonProps } from 'element-plus'
import type { Component } from 'vue'

// 定义按钮接口
interface HeaderButton {
  label: string
  type?: ButtonProps['type']
  icon?: Component
  disabled?: boolean
  key?: string | number // 可选的唯一标识
  auth?: string // 权限
}

// 定义组件属性接口
interface Props {
  title: string
  buttons: HeaderButton[]
}

const props = defineProps<Props>()
// 定义自定义事件，向外暴露按钮点击事件
const emit = defineEmits<{
  // 事件名：button-click，参数为按钮对象
  'button-click': [button: HeaderButton]
}>()

// 统一处理按钮点击
const handleButtonClick = (button: HeaderButton) => {
  // 触发自定义事件，把点击的按钮对象传出去
  emit('button-click', button)
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  h4 {
    margin: 0 40px 0 0;
    font-size: 24px;
    font-weight: 500;
  }
  .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}
</style>