<template>
  <div>
    <r-btn
      dense
      action
      label="Сформировать выписку"
      :loading="isLoading"
      icon="pgs-admin"
      no-wrap
      @click="isShowDialog = !isShowDialog"
    >
      <template #loading>
        <q-spinner color="white" />
      </template>
    </r-btn>
    <operation-dialog v-model="isShowDialog" title="Формирование выписки">
      <r-select
        v-model="selectedType"
        :options="extractTypes"
        map-options
        emit-value
        label="Тип выписки"
      />
      <template #right-actions>
        <r-btn label="Сформировать" :action="true" @click="generateExtract()" />
      </template>
    </operation-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import OperationDialog from '@/components/common/operation-dialog/index.vue';
import RSelect from '@/recruits/components/common/r-select.vue';
import { Option } from '@/recruits/models';

@Component({
  components: {
    RSelect,
    OperationDialog,
  },
})
export default class GenerateExtract extends Vue {
  @Prop({ type: Boolean, default: false }) readonly isLoading: boolean;

  isShowDialog = false;
  selectedType = '1';

  generateExtract(): void {
    this.$emit('generate', this.selectedType);
    this.isShowDialog = false;
  }

  get extractTypes(): Array<Option> {
    return [
      {
        label: 'Выписка из Реестра воинского учёта',
        value: '1',
      },

      {
        label: 'Выписка из Реестра повесток',
        value: '2',
      },
    ];
  }
}
</script>

<style scoped></style>
