<template>
  <el-dialog
    :title="title"
    :visible="visible"
    @close="onClose">
    <span>{{message}}</span>
    <el-data-table
      class="u-mt2"
      :data="failures"
      :searchable="false">
      <el-data-table-column
        v-for="field in fields"
        :data-key="field.prop"
        :label="field.label"
        :key="field.label" >
      </el-data-table-column>
      <el-data-table-column
        data-key="errorMessage"
        label="Error Message">
      </el-data-table-column>
    </el-data-table>
    <el-button
      class="u-mt2"
      type="primary"
      @click="onClose">
      Ok
    </el-button>
  </el-dialog>
</template>

<script>
  export default {
    name: 'ElActionsFailureDialog',
    props: {
      title: { type: String, default: 'Batch Action Failed' },
      visible: { type: Boolean, default: false },
      selectedRowsCount: { type: Number, required: true },
      failures: { type: Array, required: true },
      fields: { type: Array, required: false },
      getMessage: {
        type: Function,
        default: function(failuresCount, selectedRowsCount) {
          return `We are sorry, batch action failed for ${failuresCount} items out of ${selectedRowsCount}`;
        }},
      onClose: { type: Function, required: false }
    },
    computed: {
      message: function() {
        return this.getMessage(this.failures.length, this.selectedRowsCount);
      }
    }
  };
</script>
