<script lang="ts" setup>
import type { SearcherProp } from "../search-bar/SearchBarType";
import type { ToolButtonProp } from "../table-tool-bar/TableToolBarType";
import SearchBar from "../search-bar/SearchBar.vue";
// import TableToolBar from "../table-tool-bar/TableToolBar.vue";

defineProps({
  searchers: Array as PropType<SearcherProp[]>,
  searchClick: Function,
  toolButtons: Array as PropType<ToolButtonProp[]>,
  resetClick: Function,
});

const searcherParams = defineModel<Record<string, string>>("searcherParams");
</script>
<template>
  <div class="table-header">
    <div class="table-header__search">
      <SearchBar
        :searchers="searchers"
        :search-click="searchClick"
        v-model:searcher-params="searcherParams"
        :reset-click="resetClick"
      >
        <template #after-actions>
          <slot name="tool-button"></slot>
        </template>
      </SearchBar>
    </div>
    <!-- <TableToolBar class="table-tool-bar" :tool-buttons="toolButtons" /> -->
  </div>
</template>
<style>
.table-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.table-header__search {
  flex: 1 1 auto;
  min-width: 260px;
}

.table-tool-bar {
  padding-left: 10px;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px var(--el-border-color) inset;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}
</style>
