<template>
  <div
    v-loading="loading"
    class="table-section"
  >
    <EditableTable
      ref="editableTableRef"
      v-bind="$attrs"
      class="editable-table"
    >
      <template
        v-for="(_, slotName) in $slots"
        :key="slotName"
        #[slotName]="slotProps"
      >
        <slot
          :name="slotName"
          v-bind="slotProps"
        />
      </template>
    </EditableTable>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import EditableTable from './EditableTable.vue';

defineOptions({
  name: 'EditTable',
  inheritAttrs: false,
});

const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
});

const editableTableRef = ref(null);

defineExpose({
  get formRef() {
    return editableTableRef.value?.formRef;
  },
  get tableRef() {
    return editableTableRef.value?.tableRef;
  },
  validate: (...args) => editableTableRef.value?.validate(...args),
  validateField: (...args) => editableTableRef.value?.validateField(...args),
  resetFields: (...args) => editableTableRef.value?.resetFields(...args),
  clearValidate: (...args) => editableTableRef.value?.clearValidate(...args),
  get tableData() {
    return editableTableRef.value?.tableData;
  },
});
</script>

<style scoped lang="scss">
.table-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;

  .editable-table {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
</style>
