<template>
<!-- 新增 设置 日志 工具条 -->
<div :class="cls">

    <a-tooltip placement="topRight" title="日志" v-if="isShowLog">
      <a class="iconlink" @click="toolbarClick({name:'log'})"> <a-icon type="file-text"></a-icon></a>
    </a-tooltip>
    <a-tooltip placement="topRight" title="设置"  v-if="isShowSetting">
      <a class="iconlink" title="设置" @click="toolbarClick({name:'setting'})"> <a-icon type="setting"></a-icon></a> 
    </a-tooltip>

    <a-button type="primary" @click="toolbarClick({name:'add'})">
      新增
    </a-button> 
    <a-button v-if="isShowDelete" type="primary" @click="toolbarClick({name:'delete'})">
      批量删除
    </a-button> 

    <a-button  @click="toolbarClick(btn)" type="primary" v-for="btn in buttons" :key="btn.name" >
      {{btn.label}}
    </a-button> 
</div>

</template>
<script>

export default {
  name: "mktoolbar",
  props: {
    isShowLog : {
      type: Boolean, 
      default: true
    }, 

    isShowSetting : {
      type: Boolean, 
      default: true
    }, 

    isShowDelete : {
      type: Boolean, 
      default: false
    },    
    buttons : {
      type: Array 
    },    

    
    cls:{
      type :String,
      default:'mk-toolbar mk-toolbar-right'
    }
  },
  data() {
    return { 
    };
  },
  methods: {
    toolbarClick(e){
      this.$emit("toolbarClick",e);
    },

    gotoLog(){

    },

    gotoSetting(){
      
    }


   
  },
};
</script>

<style>
/* .mk-toolbar {
  width:200px;
  position: absolute;
  right: 20px;
  top: 50px;
  z-index: 1;
} */
.mk-toolbar .ant-btn{
  position: relative;
  top:6px;
}
.iconlink svg{
  width:25px;
  height: 25px;
}

</style>