<template>
  <div>
    <r-btn
      class="DopButton-Button"
      label="Запросить личное дело"
      icon="pgs-file-search"
      @click="() => (isOpened = true)"
    />
    <q-dialog v-model="isOpened">
      <q-card class="RequestLd" v-if="firstStep">
        <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">
            Будет отправлен запрос на получение личного дела по гражданину
          </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">
            Запрос на личное дело гражданина успешно отправлен
          </p>
        </q-card-section>
        <q-card-actions class="RequestLd-AttentionButtons__One">
          <r-btn
            class="RequestLd-AttentionButton"
            label="Продолжить"
            @click="onFinish"
            v-close-popup
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

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

@Component
export default class PersonalFileRequestSingle extends Mixins(ProcessStarter) {
  @Prop({ default: () => [] })
  declare readonly model: RecruitV3;

  firstStep = true;

  isOpened = false;

  async sendRequestLd(): Promise<void> {
    if (
      !(
        this.model.privateFile &&
        this.model.privateFile.length &&
        this.model.privateFile[0].id
      )
    ) {
      this.$q.notify({
        color: 'negative',
        message: 'Личное дело не найдено',
      });
      return;
    }

    const {
      sub: userId,
      name: fullName,
      domain_id: orgId,
      realm: orgFullName,
    } = this.$store.getters['oidcClient/currentUser'] || {};
    const { traceId } = await this.$store.dispatch(
      'wf/processes/dispatchProcess',
      {
        processKey: 'milBaseUserActionDistribute',
        syncMode: false,
        utStepMode: false,
        data: {
          processTraceIds: [this.model.currentPrivateFile?.processTraceId],
          currentUserInfo: {
            orgId,
            fullName,
            userId,
            orgFullName,
          },
          actionType: 'privateFileRequest',
        },
      }
    );

    this.registerListener((message, removeListener) => {
      if (traceId !== message.traceId) return;
      if (message.body.type === 'finish') {
        removeListener();
        this.firstStep = false;
      }
    });
  }

  onFinish(): void {
    this.isOpened = false;
    this.$emit('done');
  }
}
</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>
