<template>
    <q-table
      row-key="id"
      :columns="columns"
      :data="data"
      wrap-cells
      :pagination.sync="pagination"
      :loading="loading"
      @request="onPageChange"
      @row-click="onRowClick"
    />
  </template>
  
  <script lang="ts">
  import { Component, Emit, Prop } from 'vue-property-decorator';
  import moment from 'moment';
  
  function toMoment(dateString) {
    return moment(dateString || null, ["DD.MM.YY", "D/MM/YY", "DD/MM/YY", "DD.MM.YYYY", "D/MM/YYYY", "DD/MM/YYYY", "YYYY-MM-DD"], true);
  }
  
  @Component({})
  export default class FLSearchResultTable {
 
    @Prop() data: Array<any>;
    @Prop() pagination;
    @Prop() loading;
  
    columns = [
      {
        align: 'left',
        label: 'ФИО',
        field: 'fullName',
        name: 'fullName',
        style: 'white-space: normal;',
        required: true,
        headerStyle: 'font-weight: 600',
      },
      {
        align: 'left',
        label: 'Дата рождения',
        field: 'birthday',
        name: 'birthday',
        format: (val, row) => this.displayDate(val),
        style: 'white-space: normal;',
        headerStyle: 'font-weight: 600',
      },
      {
        align: 'left',
        label: 'ИНН',
        field: 'inn',
        name: 'inn',
        style: 'white-space: normal;',
        headerStyle: 'font-weight: 600',
      },
      {
        align: 'left',
        label: 'СНИЛС',
        field: 'snils',
        name: 'snils',
        style: 'white-space: normal;',
        headerStyle: 'font-weight: 600',
      }
    ];
  
    @Emit('request')
    onPageChange() {
    }
  
    @Emit('row-click')
    onRowClick() {
    }
  
    displayDate(dateString) {
      const dateVal = toMoment(dateString);
      return (dateVal && dateVal.isValid()) ? dateVal.format("DD.MM.YYYY") : '';
    }
  }
  
  </script>
  