<template lang="pug">
  tbody.data-sheet-body
    slot(
      name="pre-body-rows"
      :model="model"
      :columns="columns"
    )
    tr.data-sheet-row(
      v-for="row in model"
      :key="`${keyIteratee(row)}-row`"
      :class="{'is-selected': selectedRows[keyIteratee(row)]}"
    )
      td.data-sheet-cell.text-align-center.vertical-align-middle(v-if="showCheckbox")
        label.checkbox
          input(
            type="checkbox"
            @change="select.toggle(row)"
            :checked="select.isSelected(row)"
            :disabled="select.isUnselectable(row)"
          )
      td.data-sheet-cell(
        v-for="column in columns"
        :key="`${keyIteratee(row)}-${column.key}-cell`"
        :class="[columnar.alignment[column.key], columnar.whitespace[column.key]]"
        :align="column.format.align"
      )
        slot(
          :name="`${column.key}-cell`"
          :row="row"
          :value="column.value"
        )
          span {{ (column.value.iteratee && column.value.iteratee(row)) || row[column.key] || row.value || '' }}
</template>

<script>
export default {
  name: 'DataSheetBody',
  props: {
    model: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    columnar: {
      type: Object,
      required: true
    },
    keyIteratee: {
      type: Function,
      required: true
    },
    selectedRows: {
      type: Object,
      required: true
    },
    unselectableRows: {
      type: Object,
      required: false,
      default () {
        return {}
      }
    },
    select: {
      type: Object,
      required: true
    },
    showCheckbox: {
      type: Boolean,
      required: false,
      default: false
    }
  }
}
</script>

<style>
</style>
