<template>
  <div class="tableNavBtnsContent">
    <div class="tableNavLeftBtns">
      <!-- 左侧按钮 -->
      <innerButton :Butttondata="buttonsLeft" @tableButtonClick="tableButtonClick"></innerButton>
    </div>
    <div class="tableNavRightBtns">
      <!-- 快速搜索 -->
      <searchNormal 
        ref="quicklySearchDomRef"
        v-if="quicklySearchOption"
        :searchNormalOption="quicklySearchOption"
        @searchNormalClick="quicklySearchClick"
        @searchNormalClear="quicklySearchClear"
      ></searchNormal>
      <!-- 右侧按钮 -->
      <innerButton :Butttondata="buttonsRight" @tableButtonClick="tableButtonClick"></innerButton>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import innerButton from "./innerButton.vue"
import searchNormal from "@/components/searchNormal/index.vue"
import permission from "@/directive/permission/index"
export default {
  directives: { permission },
  components:{
    innerButton,
    searchNormal
  },
  props: {
    Butttondata: {
      type: Array,
      default: () => {
        return []
      }
    },
    quicklySearchOption: {
      type: Object,
      default: null
    },
    // 按钮整体靠右
    buttonsAllIsRight:{
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      buttonsLeft:null,//左侧按钮数据
      buttonsRight:null,//右侧按钮数据
    }
  },
  mounted(){
    this.initButtonsData()
  },
  methods:{
    // 按钮数据处理（左右分开处理）
    initButtonsData(){
      this.buttonsLeft = []
      this.buttonsRight = []
      if(this.buttonsAllIsRight){
        this.buttonsRight = this.Butttondata
        return
      }
      this.Butttondata.forEach(item=>{
        if(item.float && item.float == 'right'){
          this.buttonsRight.push(item)
        }else{
          this.buttonsLeft.push(item)
        }
      })
    },
    // 按钮事件
    tableButtonClick (val,item) {
      this.$emit('tableButtonClick', val,item)
    },
    // 搜索
    quicklySearchClick(val,option){
      this.$emit('quicklySearchClick', val,option)
    },
    // 清除搜索
    quicklySearchClear(val,option){
      this.$emit('quicklySearchClear', val,option)
    },
    // 获取快速搜索的节点，便于其他组件清空搜索值
    getQuicklySearchDom(){
      return this.$refs.quicklySearchDomRef
    }
  }
}
</script>
<style lang="scss">
.tableNavBtnsContent{
  display: flex;
  justify-content: space-between;

  .tableNavRightBtns{
    display: flex;
    margin-left: 10px;
    .currenButton .el-button {
      margin-left: 10px !important;
    }
  }
}
</style>