<template>
  <el-dropdown
    trigger="click"
    @command="$emit('command', $event)">
    <el-button
      size="mini"
      class="u-mr1"
      :icon="['fas', 'ellipsis-h']">
        {{ buttonText }}
    </el-button>
    <el-dropdown-menu
      slot="dropdown">
      <el-dropdown-item
        v-for="action in computedActions"
        :key="action.label"
        :class="action.class"
        :disabled="action.disabled"
        v-test-id="`data-table-batch-action-${action.label}-dropdown-item`"
        :command="action">
        {{ action.label }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { isFunction } from 'lodash';

export default {
  name: 'ElDataTableActionsDropdown',
  props: {
    actions: { type: Array, default: () => [] },
    buttonText: {
      type: String,
      default: 'More'
    },
    selectedRows: { type: Array, default: () => [] }
  },
  computed: {
    computedActions() {
      return this.actions.map(({ label, ...props }) => ({
        ...props,
        label: isFunction(label) ? label(this.selectedRows) : label
      }));
    }
  }
};
</script>
