<template>
  <ExampleStory>
    <TfTable
      v-bind="{
        filterValues: $route.query.filters,
        parentalControls: true,
        pageLimit: 25,
        pageSelected: Number($route.query.pageSelected) || 1,
        pagination: true,
        tableData: [...table.data],
        tableMeta: tableMeta,
      }"
      @pageSelected="$router.push({
        query: {
          ...$route.query,
          pageSelected: $event,
        }
      })"
      @changeSortCriteria="$router.push({
        query: {
          ...$route.query,
          sortProp: $event.sortProp,
          sortDirection: $event.sortDirection,
        }
      })"
      @changeFilter="$router.push({
        query: {
          ...$route.query,
          filters: $event,
        }
      })"
    >
      <template #filterLabel>
        &lt;slot #filterLabel&gt; is available here or use the "showFilterLabel" prop.
      </template>
    </TfTable>
  </ExampleStory>
</template>

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

  export default {
    name: 'TableWithPaginationAndFilterRoutes',
    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',
        },
      ],
      productTypes,
    }),
    computed: {
      /**
       * Grab the filters from the route
       *
       * @returns {Array}
       */
      filterValues() {
        return this.$route.query.filters;
      },
      /**
       * Creates the tableMeta object to get router props unless !parentalControls
       *
       * @returns {object}
       */
      tableMeta() {
        const { sortDirection, sortProp } = this.$route.query;
        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-input', // another option with a typable input
              width: '210px',
            };
            break;
          case 'dueDate':
            column.label = 'Due date';
            column.filter = {
              order: 5,
              type: 'month-and-date-range',
              width: '275px',
            };
            break;
          case 'productTypes':
            column.filter = {
              order: 4,
              type: 'array',
              width: '250px',
              options: this.productTypes.map((pt) => ({ label: pt, value: pt })),
            };
            break;
          case 'brokerName':
            column.filter = {
              order: 1,
              popoverWidth: '220px',

              type: 'string',
              width: '150px',
            };
            break;
          case 'employeeCount':
            column.filter = {
              options: this.rangeOptions,
              order: 6,
              popoverWidth: 200,
              type: 'range',
              width: '160px',
            };
            break;
          default:
          }

          return column;
        });

        return {
          columns,
          sort: {
            direction: sortDirection || direction,
            prop: sortProp || prop,
          },
        };
      },
    },
  };
</script>
