<template>
  <div class="ButtonsBlock" v-if="filteredSelect.length">
    <r-selection-filter
      v-if="
        $AC.haveOneOfScope([
          $AC.scopes.MILITARY_COMMISSAR,
          $AC.scopes.SYSTEM_ADMINISTRATOR,
        ])
      "
      :selected="filteredSelect"
    >
      <template #default="props">
        <multi-subpoena-sign
          :model="filteredSelect"
          process-key="milBaseMassSignProcess"
          label="Подписание"
          title="Подписание:"
          @done="onReload"
        />
      </template>
    </r-selection-filter>
  </div>
</template>

<script lang="ts">
import { Component, PropSync, Prop, Vue } from 'vue-property-decorator';
import MultiSubpoenaSign from '@/recruits/components/dialogs/MultiSubpoenaSign.vue';
import RSelectionFilter from '@/recruits/components/common/r-selection-filter.vue';
import { SubpoenaListResponseV1 } from '@/recruits/openapi/subpoena-service';

@Component({
  components: {
    MultiSubpoenaSign,
    RSelectionFilter,
  },
})
export default class ListButtons extends Vue {
  @PropSync('selected')
  selectedItems: string[];

  @Prop({ type: Array, default: () => [] }) data: SubpoenaListResponseV1[];

  get filteredSelect() {
    return this.data.length
      ? this.data.filter((sub: SubpoenaListResponseV1) => {
          return (
            ['3.7', '3.13'].includes(sub.status) &&
            this.selectedItems.includes(sub.id)
          );
        })
      : [];
  }

  public onReload(): void {
    this.$emit('onReload');
  }
}
</script>

<style lang="scss">
.ButtonsBlock {
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  gap: 16px;
}
</style>
