<template>
  <div class="tool">
    <div class="tool-left">
      <el-button v-for="(item,index) of showTools" :icon="item.icon" :key="index" @click="clickHandle(item)">
        {{ item.name }}
      </el-button>
      <slot name="tool-left" />
    </div>
    
    <div class="tool-right">
      <el-tooltip class="item" effect="dark" :content="openSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <span>
          <el-button :icon="openSearch?'Search':'Minus'" circle v-if="propTools.search" @click="toggleSearch"></el-button>
        </span>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <span style="padding-left: 10px;">
          <el-button icon="Refresh" circle v-if="propTools.refresh" @click="refresh"></el-button>
        </span>
      </el-tooltip>
      <slot name="tool-right" />
    </div>
  </div>
</template>

<script setup>
  import { computed,getCurrentInstance,nextTick, ref  } from "vue";
  const { proxy,ctx:that } = getCurrentInstance();
  const emit = defineEmits();
  const props = defineProps({
    propConfig:{},
    customTools:{},
  })
  const openSearch = ref(true)
  const audit = computed({
    get() {
      return props.propConfig?.audit ? props.propConfig.audit : {}
    }
  })
  const propTools = computed({
    get() {
      return props.propConfig?.tools ? props.propConfig.tools : {}
    }
  })

  const tools = ref([
		{ name: '返回', icon: 'Back', clickName: 'onReturn', _class: 'return' },
    { name: '新增', icon: 'Plus', clickName: 'onAdd', _class: 'add' },
		{ name: '保存', icon: 'Plus', clickName: 'onSave', _class: 'save' },
    { name: '提交', icon: 'Finished', clickName: 'onSmt', _class: 'smt' },
    { name: '反提交', icon: 'Remove', clickName: 'onReturnSmt', _class: 'returnSmt' },
    { name: '修改', icon: 'EditPen', clickName: 'onUpdate', _class: 'edit' },
    { name: '删除', icon: 'Delete', clickName: 'onDelete', _class: 'delete' },
    { name: '导出', icon: 'Download', clickName: 'onExport', _class: 'export' },
    { name: '打印', icon: 'Printer', clickName: 'onPrint', _class: 'print' },
  ])
  const showTools = ref([])
  const initTools = () => {
    showTools.value = [];
    if(props.propConfig?.tools){
      setTool(props.propConfig?.tools)
    }
    if(props.propConfig?.customTools && props.propConfig?.customTools.length > 0){
      setCustomTools(props.propConfig?.customTools)
    }
    if(props.customTools){
      setCustomTools(props.customTools)
    }
  }
  const setTool = data => {
    showTools.value = [];
    for(const item of tools.value){
      if(data[item._class]){
        let obj = proxy.lodash.cloneDeep(item);
        if(audit.value){
          obj.audit = audit.value[item._class]
        }
        showTools.value.push(obj)
      }
    }
  }
  //自定义工具栏按钮设置
  const setCustomTools = tools => {
    for(const item of tools){
      showTools.value.push(item)
    }
  }
  //点击刷新按钮
  const refresh = () => {
    emit('clickHandle','onRefresh')
  }
  //点击搜索
  const toggleSearch = () => {
    openSearch.value = !openSearch.value;
    emit('clickHandle','toggleSearch')
  }
  const clickHandle = item => {
    if(item?.event?.click){
      item.event.click()
    }else{
      emit('clickHandle',item.clickName)
    }
  }
  defineExpose({setCustomTools,setTool,initTools})
  initTools()

</script>
<style lang="scss" scoped>
.tool{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tool-left{
    width: 100%;
  }
  .tool-right{
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
}
</style>