<template>
  <section class="document-line-table">
    <header class="document-line-table-toolbar">
      <h2 class="document-line-table-title">{{ title }}</h2>
      <div v-if="$slots.actions" class="document-line-table-actions">
        <slot name="actions" />
      </div>
    </header>

    <div class="document-line-table-scroll">
      <table>
        <thead>
          <tr>
            <th
              v-for="column in columns"
              :key="column.key"
              :class="column.class"
              :style="{ width: column.width }"
              scope="col"
            >
              {{ column.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <slot />
        </tbody>
      </table>
    </div>
  </section>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: "明细联单"
  },
  columns: {
    type: Array,
    required: true
  }
});
</script>
