<template>
  <div style="overflow-x:auto">
    <table class="asset-table">
      <thead>
        <tr><th v-for="col in columns" :key="col.key">{{ col.label }}</th></tr>
      </thead>
      <tbody>
        <tr v-for="(row, i) in rows" :key="i">
          <td v-for="col in columns" :key="col.key" :class="{ 'text-right': col.format === 'currency' }">
            <slot :name="`cell-${col.key}`" :row="row">{{ display(row[col.key], col.format) }}</slot>
          </td>
        </tr>
        <tr v-if="!rows.length && empty">
          <td :colspan="columns.length" class="quiet">{{ empty }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { currency } from '../utils/format';

// Compact, read-only table for the close wizard's step panels. Columns are { key, label, format }; a
// `cell-<key>` slot overrides rendering for a column. Lighter than DataTable (no search/pagination).
export default {
  props: {
    rows: { type: Array, default: () => [] },
    columns: { type: Array, required: true },
    empty: { type: String, default: '' }
  },
  methods: {
    display(value, format) {
      if (value === null || value === undefined || value === '') return format === 'currency' ? currency(0) : '';
      return format === 'currency' ? currency(value) : value;
    }
  }
};
</script>
