<!-- table 更多按钮 -->

<template>

  <div style="">

    <template v-if="singleBtns && singleBtns.length > 0" v-for="(btn, index) in singleBtns">
      <el-button size="mini" type="text" @click="handleCommand(btn.command, row)" :icon="btn.icon" :key="index">
        {{ btn.label }}
      </el-button>
    </template>

    <el-dropdown v-if="moreBtns && moreBtns.length > 0" @command="(command) => handleCommand(command, row)" style="margin-left:5px"
                 :v-hasPermi="moreBtnPermis">
      <el-button icon="el-icon-d-arrow-right" size="mini" type="text">{{ $t('common.more')
        }}</el-button>
      <el-dropdown-menu slot="dropdown">
        <template v-for="(btn, index) in moreBtns" >
          <el-dropdown-item :command="btn.command" :key="index">
            <el-button size="mini" type="text" :icon="btn.icon">{{ btn.label }}</el-button>
          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </el-dropdown>

  </div>

</template>

<script>

import { checkPermi } from '@/utils/permission'

export default {
  name: 'MoreBtn',
  props: {
    row: {
      type: Object,
      required: true
    },
    handleCommand: {
      type: Function,
      required: true
    },

    btns: {
      type: Array,
      default: () => [
        {
          showAble: true,
          label: '编辑',
          command: 'edit',
          icon: 'el-icon-edit',
          permi: 'business:account:edit'
        },
        {
          showAble: true,
          label: '删除',
          command: 'delete',
          icon: 'el-icon-delete',
          permi: 'business:account:remove'
        }
      ]
    },

    // 独立展示个数
    singleCount: {
      type: Number,
      default: 2
    }
  },

  data() {
    return {
    }
  },

  computed: {

    // 可见的按钮
    visibleBtns() {
      const visibleBtns = this.btns.filter(btn => (btn.showAble === null || btn.showAble === undefined ? true : btn.showAble) && checkPermi([btn.permi]))
      // console.log('visibleBtns', visibleBtns)
      return visibleBtns;
    },

    singleBtns() {
      // 从可见的中取前 singleCount 个按钮
      return this.visibleBtns.slice(0, this.singleCount);
    },

    moreBtns() {
      return this.visibleBtns.slice(this.singleCount);
    },



    moreBtnPermis() {
      return this.moreBtns.map(btn => btn.permi)
    },

    moreShowAble() {
      return this.moreBtns.map(btn => btn.showAble === null || btn.showAble === undefined ? true : btn.showAble)
    },

  },

  watch: {
  },

  methods: {
  }
}

</script>

<style scoped>

</style>
