<template>
  <ExampleStory>
    <TfTable
      v-bind="{
        pageLimit: 25,
        pagination: true,
        showFilterLabel: true,
        tableData: [...table.data],
        tableMeta,
      }"
    >
      <TfTableParentRow
        :key="rowData.id"
        slot="parentRow"
        slot-scope="{ rowData }"
      >
        <template v-for="column in tableMeta.columns">
          <TfTableTd
            v-if="column.prop !== 'easterEgg'"
            :key="column.id"
            v-text="rowData[column.prop]"
          />
        </template>
      </TfTableParentRow>
    </TfTable>
  </ExampleStory>
</template>

<script>
  import ExampleStory from '@/views/examples/Layouts/Story';
  import { tableWithPagination as table } from './data';

  export default {
    name: 'TableWithPaginationAndFilter',
    components: { ExampleStory },
    data: () => ({
      table,
      rangeOptions: [
        {
          label: 'Less than 100',
          value: '0,99',
        },
        {
          label: '100 - 499',
          value: '100,499',
        },
        {
          label: '500 - 999',
          value: '500,999',
        },
        {
          label: '1,000 +',
          value: '1000,null',
        },
      ],
    }),
    computed: {
      /**
       * Creates the tableMeta object to get router props unless !parentalControls
       *
       * @returns {object}
       */
      tableMeta() {
        const { sortDirection, sortProp } = this.$route.params;
        const { direction, prop } = this.table.meta.sort;
        const columns = this.table.meta.columns.map((columnObj) => {
          const column = {
            ...columnObj,
            format: null,
          };

          switch (column.prop) {
          case 'effectiveDate':
            column.label = 'Effective Date';
            column.filter = {
              order: 3,
              type: 'month',
              width: '200px',
            };
            break;
          case 'activeDate':
            column.label = 'Active Date';
            column.filter = {
              order: 2,
              // type: 'date-range',
              type: 'date-range-input', // another option with a typable input
              width: '210px',
            };
            break;
          case 'dueDate':
            column.label = 'Due date';
            column.filter = {
              order: 4,
              type: 'month-and-date-range',
              width: '275px',
            };
            break;
          case 'brokerName':
            column.filter = {
              order: 1,
              popoverWidth: '220px',
              type: 'string',
              width: '250px',
            };
            break;
          case 'employeeCount':
            column.filter = {
              options: this.rangeOptions,
              order: 5,
              popoverWidth: 200,
              type: 'range',
              width: '160px',
            };
            break;
          default:
          }

          return column;
        });

        return {
          columns: [
            ...columns,
            {
              prop: 'easterEgg',
              hidden: true,
              label: 'Easter egg',
              filter: {
                type: 'string',
              },
            },
          ],
          sort: {
            direction: sortDirection || direction,
            prop: sortProp || prop,
          },
        };
      },
    },
  };
</script>
