<template>
  <div v-if="data && data.length">
    <h6 class="text-grey-9">
      {{ $t('documents.externalDocuments') }}
    </h6>
    <q-table
      class="container"
      :data="data"
      :columns="columns"
      :rows-per-page-options="[0]" 
      :pagination.sync="pagination"
      hide-bottom
      wrap-cells
    />
  </div>
</template>

<script lang="ts">
import get from 'lodash/get';
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class ExternalDocumentsTable extends Vue {
  @Prop() data: any;

  columns = [
    {
      align: 'left',
      field: (val: any) => get(val, 'type.label') || get(val, 'type.data.name') || '',
      label: this.$t('documents.documentType'),
      name: 'type',
      sortable: true,
      style: 'width: 60%; font-size: 14px',
      headerStyle: 'width: 60%; font-size: 12px; padding-left: 15px;',
      classes: 'text-primary-9',
    },
    {
      align: 'left',
      field: (val: any) => get(val, 'quantity') || '',
      label: this.$t('documents.quantity'),
      name: 'quantity',
      sortable: true,
      style: 'width: 20%;word-break: break-all; font-size: 14px',
      headerStyle: 'width: 20%; font-size: 12px;',
      classes: 'text-primary-9',
    },
    {
      align: 'right',
      field: (val: any) => get(val, 'comment') || '',
      label: this.$t('documents.comment'),
      name: 'comment',
      sortable: false,
      headerStyle: 'font-size: 12px;',
      classes: 'text-primary-9',
    },
  ];

  pagination = {
    page: 1,
    rowsPerPage: 0,
  }
}
</script>

<style scoped>
.container {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
}
</style>