<template>
  <d-table :data="dataSource" @sort-change="handleSortChange" :header-bg="true">
    <d-column v-for="(column, index) in props.tableConfig" :field="column.field"
    :header="column.header" :sortable="column.sortable" :sort-method="column.sortMethod"></d-column>
  </d-table>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  props: {
    tableConfig: {
      type: Array,
      default: () => [],
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
  },
  setup(props) {

    onMounted(() => {
      console.log('props', props);
    });

    const handleSortChange = ({ field, direction }) => {
      console.log('field', field);
      console.log('direction', direction);
    };
    const sortDateMethod = (a, b) => {
      return a.date > b.date;
    };
    const sortNameMethod = (a, b) => {
      return a.lastName > b.lastName;
    };

    return { props, handleSortChange, sortDateMethod, sortNameMethod };
  },
});
</script>

<style scoped lang="scss">

</style>