<template>
  <re-table
    class="r-table"
    :data="data"
    :columns="columns"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

<script lang="ts">
import { RTableColumn } from '@/interfaces';
import { DictionaryItem } from '@/recruits/openapi/ervu-service';
import { SearchRecruitsResponseWithReasonWithdrawal } from '@/recruits/interfaces/deprecated/search-recruits-response-with-reason-withdrawal';
import { Component, Vue, Prop } from 'vue-property-decorator';
import ReTable from '@/recruits/components/common/r-table/index.vue';

@Component({
  components: { ReTable },
})
export default class DataTable extends Vue {
  @Prop() data: SearchRecruitsResponseWithReasonWithdrawal[];

  get columns(): RTableColumn<SearchRecruitsResponseWithReasonWithdrawal>[] {
    return [
      {
        name: 'person',
        fullLabel: 'Данные гражданина',
        fields: [
          {
            label: 'ФИО',
            name: 'fullName',
            field: 'fullName',
            width: '100%',
            componentPath: 'link',
            componentOptions: {
              route: 'archive-recruit-personal',
            },
          },
          {
            label: 'ИД ЕРН',
            name: 'idern',
            field: 'idern',
            width: 'auto',
            type: 'gray-numbrts',
          },
        ],
        width: '300px',
        align: 'left',
      },
      {
        label: 'Адрес регистрации',
        name: 'regAddress',
        field: 'regAddress',
        width: '1fr',
        align: 'left',
        type: 'address',
      },
      {
        label: 'Причина архивации',
        name: 'reasonWithdrawal',
        field: 'reasonWithdrawal',
        // @ts-ignore
        format: (val: string) => this.getReasonLabel(val),
        width: '1fr',
        align: 'left',
      },
      {
        label: 'Дата архивации',
        name: 'createdAt',
        field: 'createdAt',
        componentPath: 'date-time',
        componentOptions: {},
        width: '146px',
        align: 'left',
      },
    ];
  }

  get archivationReasons(): DictionaryItem[] {
    return this.$store.getters['ervuDictionaries/archivationReasonsList'];
  }

  getReasonLabel(reason: string): string {
    const reasonObject = this.archivationReasons.find(
      ({ code }) => code === reason
    );
    return reasonObject?.value ?? reason;
  }
}
</script>

<style lang="scss" scoped>
.r-table {
  overflow: auto;
  padding-top: 0;

  ::v-deep {
    .q-table__bottom,
    .q-table__top {
      background-color: #f7f9fb;
    }

    .q-table__top {
      top: 0;
      padding-left: 0;
      padding-right: 0;
    }

    .q-table__bottom {
      bottom: 0;
    }
  }
}
</style>
