<template>
  <r-multi-select
    class="SearchBar-Line__Element"
    label="Причина постановки на учёт"
    :options="milRegReasons"
    :status="milRegSelectionStatus"
    @input="onReasonsSelect"
  />
</template>

<script lang="ts">
import { DictionariesElement } from '@/recruits/openapi/ervu-service';
import { Vue, Component, Model } from 'vue-property-decorator';
import RMultiSelect from '@/recruits/components/common/r-multi-select.vue';

@Component({
  components: { RMultiSelect },
})
export default class ReasonsSelect extends Vue {
  @Model('select', { default: () => [] }) codes: string[];

  mounted(): void {
    this.$store.dispatch(
      'ervuDictionaries/loadMilitaryRegistrationReasonsDictionary'
    );
  }

  get milRegReasons(): DictionariesElement[] {
    return this.$store.getters[
      'ervuDictionaries/militaryRegistrationReasonsDictionary'
    ].map((reason: DictionariesElement) => ({
      ...reason,
      label: reason.value,
    }));
  }

  get milRegSelectionStatus(): DictionariesElement[] {
    return this.codes.map(
      (code) =>
        this.milRegReasons.find(
          (reason) => reason.code === code
        ) as DictionariesElement
    );
  }

  onReasonsSelect(event: (DictionariesElement & { label: string })[]): void {
    this.$emit(
      'select',
      event.map((reason) => reason.code)
    );
  }
}
</script>
