<script lang="ts" setup name="TableTools">
import TableSearch from './table_search.vue'
const emits = defineEmits(["search", "filterChange","loadMore","remoteMethod","treeSelectLoad","selectChange","treeSelectNodeChange","treeSelectNodeClick"]);
const props = defineProps({
  searchItems: {
    type: Array,
    default: []
  },
  searchId: {
    type: String,
    default: '',
  },
  barList: {
    type: Array,
    default: []
  },
  init: {
    type: Boolean,
    default: true
  }
})
const toolSearch = ref()
const formId = computed(() => {
  return props.searchId ?? ''
})
const itemList = computed(() => {
  return props.searchItems ?? []
})
const bars: any = computed(() => {
  return props.barList ?? []
})
const tableSearch = (val, clear: boolean = false) => {
  emits('search', val, clear)
}

const toolFilterChange = (val, type) => {
  emits('filterChange', val, type)
}

const loadMore = () => {
  emits('loadMore')
}

const treeSelectLoad = (node, resolve, item) => {
  emits("treeSelectLoad", node, resolve, item);
};
const selectChange = (val, row) => {
  emits("selectChange", val, row);
};
const handleTreeSelectNodeChange = (node, item) => {
  emits("treeSelectNodeChange", node, item);
}
const treeSelectNodeClick = (node, item)=>{
  emits("treeSelectNodeClick", node, item);
}
defineExpose({
  toolSearch,
})

</script>
<template>
  <div class="table-tools">
    <div class="tools_search">
      <TableSearch ref="toolSearch" :itemList="itemList" :init="props.init??true" 
      :formId="formId" 
      @tableSearch="tableSearch" 
      @toolFilterChange="toolFilterChange" @loadMore="loadMore"
      @treeSelectLoad="treeSelectLoad"
      @selectChange="selectChange"
      @treeSelectNodeChange="handleTreeSelectNodeChange"
      @treeSelectNodeClick="treeSelectNodeClick"
      />
    </div>
    <div class="tools_bar" v-if="bars?.length">
      <div v-for="item in bars">
        <span>{{ item.label }}：</span>
        <span>{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;

  .tools_search {
    padding: 8px 0 0;
  }
}
</style>