<template>
  <div class="record-header">
    <div class="row details-bar q-px-md q-pt-md">
      <div class="q-pr-xs">
        <q-btn
          class="back-button q-px-xs"
          dense
          icon="pgs-arrow-left"
          size="sm"
          @click="$router.push({ name: 'archive' })"
        />
      </div>
      <div>
        <div class="row header-details">
          <div class="col-shrink source">
            <span>Сведения о гражданине</span>
          </div>
        </div>
      </div>
      <div style="flex-grow: 1" />
      <div class="archiving-reason">
        Причина архивации:
        <span>{{ data.archivingReason }}</span>
      </div>
      <r-btn
        v-if="displayUnarchiveButton"
        class="q-ml-sm"
        action
        :loading="processLoading"
        label="Извлечь из архива"
        @click="unarchive"
      >
        <template v-slot:loading>
          <upload-status
            class="inline-loader"
            status="pending"
            :inline="true"
            :label-size="12"
            :size="24"
            :line-width="2"
          />
        </template>
      </r-btn>
    </div>
    <p class="record-title q-pt-xs q-px-md q-pb-xs q-pr-sm">
      <q-skeleton v-if="loading" height="32px" />
      <template v-else>
        {{ fio }}
      </template>
    </p>
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator';
import { ArchivedRecruitV3 } from '@/recruits/openapi/person-archive';
import ReturnToParentView from '@mixins/ReturnToParentView';
import StatusBox from '@/recruits/components/common/status-box/index.vue';
import ProcessStarter from '@/mixins/ProcessStarter';
import UploadStatus from '@/components/common/upload-status/index.vue';

@Component({
  components: { StatusBox, UploadStatus },
})
export default class RecordHeader extends Mixins(
  ReturnToParentView,
  ProcessStarter
) {
  @Prop({ default: () => ({}) }) data: ArchivedRecruitV3;

  @Prop({ default: false }) loading: boolean;
  @Prop({ default: 'milBaseRouteProcess' }) declare processKey: string;

  public readonly recruitId: string = this.$route.params.id;
  public readonly formModel = {
    redirectUrl: `/records/archive`,
    archiveId: this.recruitId,
    actionType: 'extractFromArchive',
  };

  public processLoading = false;

  get fio(): string {
    return this.data?.recruit?.mainInfo?.fullName ?? '';
  }

  async unarchive(): Promise<void> {
    try {
      this.processLoading = true;
      const traceId = await this.startProcess(this.formModel);
      this.registerListener((message, removeListener) => {
        if (traceId !== message.traceId) return;
        removeListener();
        this.processLoading = false;
      });
    } catch (error) {
      this.processLoading = false;
      console.error(error);
    }
  }

  get displayUnarchiveButton(): boolean {
    return (
      this.data.archivingReason === 'Снятие с учёта' &&
      this.$AC.haveScope(this.$AC.scopes.MILITARY_RECRUIT_SPECIALIST)
    );
  }
}
</script>

<style lang="scss" scoped>
.record-header {
  background-color: rgb(237, 243, 247);
  display: flex;
  flex-flow: column;
  .record-title {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: rgba(2, 12, 18, 0.9);
    margin-top: 6px;
    margin-bottom: 8px;
  }
}

.details-bar {
  display: flex;
  flex-flow: row;

  .back-button {
    border: 1px solid rgba(1, 72, 116, 0.18) !important;
    border-radius: 24px !important;
    color: #1491cf !important;
  }

  .header-details {
    gap: 8px;

    > div {
      overflow-x: hidden;
      font-family: 'Golos Text', sans-serif;
      font-style: normal;
      font-weight: 600;
      font-size: 12px;
      line-height: 16px;

      &.source {
        display: inline-flex;
        text-align: center;
        padding-left: 4px;
        font-family: 'Golos Text', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 26px;
        color: rgba(2, 12, 18, 0.58);
      }
    }
  }
}

.archiving-reason {
  color: rgba(2, 12, 18, 0.58);
  padding: 6px;
  span {
    font-weight: bold;
    color: rgba(2, 12, 18, 0.9);
  }
}

.inline-loader {
  background-color: inherit;
}
</style>
