<!--
 * @Author: chris
 * @Date: 2025-08-11 17:55:47
 * @LastEditors: chris
 * @LastEditTime: 2025-08-12 10:07:26
-->
<template>
  <el-row :gutter="props.gutter" class="mb-3 flex flex-wrap gap-2">
    <template v-for="button in props.buttons" :key="button.key">
      <el-col :span="button.span || 1.5">
        <el-button
          :type="button.type"
          :plain="button.plain"
          :icon="button.icon"
          :disabled="button.disabled"
          :loading="button.loading"
          @click="handleButtonClick(button.action)"
          v-if="!button.permission || hasPermission(button.permission)"
        >{{ button.text }}</el-button>
      </el-col>
    </template>
    <right-toolbar
      v-if="props.showRightToolbar"
      v-model:showSearch="showSearch"
      @queryTable="handleQuery"
      :columns="props.columns"
      :search="props.search"
      :showColumnsType="props.showColumnsType"
    ></right-toolbar>
  </el-row>
</template>

<script setup>
import RightToolbar from '@/components/RightToolbar'
import { hasPermission } from '@/hooks/usePermission'

const props = defineProps({
  // 按钮配置数组
  buttons: {
    type: Array,
    required: true
  },
  // 选中的行
  selectedRows: {
    type: Array,
    default: () => []
  },
  // 列配置
  columns: {
    type: Array
  },
  // 是否显示搜索
  showSearch: {
    type: Boolean,
    default: true
  },
  // 是否显示搜索图标
  search: {
    type: Boolean,
    default: true
  },
  // 显隐列类型
  showColumnsType: {
    type: String,
    default: "checkbox"
  },
  // 右外边距
  gutter: {
    type: Number,
    default: 10
  },
  // 是否显示右侧工具栏
  showRightToolbar: {
    type: Boolean,
    default: true
  }
})

const emits = defineEmits(['buttonClick', 'update:showSearch', 'queryTable'])

const showSearch = ref(props.showSearch)

watch(() => showSearch.value, (newVal) => {
  emits('update:showSearch', newVal)
})

// 按钮点击处理
function handleButtonClick(action) {
  emits('buttonClick', action)
}

// 查询处理
function handleQuery() {
  emits('queryTable')
}
</script>