<template>
  <div>
    <q-card class="RequestLd" v-if="requestedLdFlag">
      <q-card-section class="RequestLd-AttentionContent">
        <q-icon
          class="RequestLd-AttentionContent__Icon"
          name="pgs-file-search"
        />
        <p class="RequestLd-AttentionContent__Header">Запрос личного дела</p>
        <div class="RequestLd-AttentionContent__Noty">
          {{ requestMessage }}
        </div>
      </q-card-section>
      <q-card-actions class="RequestLd-AttentionButtons">
        <r-btn class="RequestLd-AttentionButton" label="Отмена" v-close-popup />
        <r-btn
          class="RequestLd-AttentionButton"
          label="Запросить"
          :action="true"
          @click="sendRequestLd"
        />
      </q-card-actions>
    </q-card>
    <q-card v-else class="RequestLd">
      <q-card-section class="RequestLd-AttentionContent">
        <q-icon
          class="RequestLd-AttentionContent__Icon"
          name="pgs-double-check"
        />
        <p class="RequestLd-AttentionContent__Header">
          Запрос на личные дела {{ selectedItems.length }} граждан успешно
          отправлен
        </p>
      </q-card-section>
      <q-card-actions class="RequestLd-AttentionButtons__One">
        <r-btn
          class="RequestLd-AttentionButton"
          label="Продолжить"
          @click="() => (requestedLdFlag = true)"
          v-close-popup
        />
      </q-card-actions>
    </q-card>
  </div>
</template>

<i18n>
{
  "ru": {
    "RequestInit": {
      "message": "| Будет отправлен запрос на получение личного дела по {n} выбранному гражданину | Будут отправлены запросы на получение личного дела по {n} выбранным гражданам"
    }
  }
}
</i18n>

<script lang="ts">
import ProcessStarter from '@/mixins/ProcessStarter';
import { MilitaryRegistrationItem } from '@/recruits/openapi/person-registry';
import { Component, PropSync, Mixins } from 'vue-property-decorator';

@Component({})
export default class PersonalFileRequest extends Mixins(ProcessStarter) {
  @PropSync('selected')
  selectedItems: MilitaryRegistrationItem['processTraceId'][];

  requestedLdFlag = true;

  get requestMessage(): string {
    return this.$tc('RequestInit.message', this.selectedItems.length);
  }

  async sendRequestLd(): Promise<void> {
    const {
      //
      sub: userId,
      name: fullName,
      domain_id: orgId,
      realm: orgFullName,
    } = this.$store.getters['oidcClient/currentUser'] || {};
    // const [, orgFullName] = realm.match(/(.*)\./) || [];

    // FIXME: понять надо ли нам traceId
    const { traceId } = await this.$store.dispatch(
      'wf/processes/dispatchProcess',
      {
        processKey: 'milBaseUserActionDistribute',
        syncMode: false,
        utStepMode: false,
        data: {
          processTraceIds: this.selectedItems,
          currentUserInfo: {
            orgId,
            fullName,
            userId,
            orgFullName,
          },
          actionType: 'privateFileRequest',
        },
      }
    );

    this.registerListener((message, removeListener) => {
      if (traceId !== message.traceId) return;
      if (message.body.type === 'finish') {
        removeListener();
        this.selectedItems = [];
        this.onReload();
      }
    });
  }

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

<style lang="scss">
.RequestLd {
  &-AttentionContent {
    * {
      margin: 0;
      padding: 0;
    }
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 40px;
    &__Icon {
      color: #1491cf;
      font-size: 40px;
      margin-bottom: 10px;
    }
    &__Header {
      font-family: 'Golos Text', sans-serif;
      font-style: normal;
      font-weight: 500;
      font-size: 20px;
      line-height: 24px;
      text-align: center;
      letter-spacing: -0.015em;
      color: #015e98;
      margin-bottom: 24px;
    }
    &__Noty {
      font-family: 'Golos UI', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      text-align: center;
      color: rgba(2, 12, 18, 0.9);
    }
  }
  &-AttentionButtons {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    &__One {
      justify-content: flex-end;
    }
  }
  &-AttentionButton {
    padding: 0 10px;
  }
}
</style>
