<template>
  <div class="archive-record">
    <record-header :data="data" :loading="loading" />
    <redesigned-tabs
      :clickHandler="tabClickHandler"
      :current-tab="$route.name"
      :tabs="tabs"
      dense
    />
    <router-view :data="data" :loading="loading" />
  </div>
</template>

<script lang="ts">
import {
  PersonArchiveApi,
  ArchivedRecruitV3,
} from '@/recruits/openapi/person-archive';
import { Component, Vue } from 'vue-property-decorator';
import RecordHeader from './header.vue';
import { isDecisionSigned } from '@/recruits/utils';
import { isEmpty } from 'lodash';
import { Tab } from '@/interfaces/base/BaseTabs';

@Component({
  components: { RecordHeader },
})
export default class ArchiveRecord extends Vue {
  ArchiveApi = new PersonArchiveApi();

  public data?: ArchivedRecruitV3 = {};
  public loading = true;

  get tabs(): Tab[] {
    return [
      {
        label: 'Личные сведения',
        name: 'archive-recruit-personal',
      },
      {
        label: 'Подробные сведения',
        name: 'archive-recruit-details',
      },
      {
        label: 'Личное дело',
        name: 'archive-recruit-pf-requests',
        isVisible: !isEmpty(this.data?.recruit?.privateFile),
        badge: this.data?.recruit?.status === '7.1' ? 'yellow-10' : false,
      },
      {
        label: 'Решения',
        name: 'archive-recruit-attached-decision',
        badge: this.data?.decisions?.militaryCommissarDecisions?.some(
          (decision) => !isDecisionSigned(decision)
        )
          ? 'yellow-10'
          : false,
      },
      {
        label: 'История',
        name: 'archive-recruit-history',
      },
      {
        label: 'Документы',
        name: 'archive-recruit-attached-documents',
        alert: this.data?.recruit?.systemDocuments?.some(
          ({ status }) => status === 'formed'
        )
          ? 'yellow-10'
          : false,
      },
    ].map((tab) => ({
      name: tab.label,
      path: tab.name,
      visible: tab.isVisible === undefined || tab.isVisible,
      alert: tab.badge ?? false,
    }));
  }

  public tabClickHandler(selectedTab: Tab): void {
    if (this.$route.name !== selectedTab.path) {
      this.$router.replace({
        name: selectedTab.path,
        params: { id: this.$route.params.id },
      });
    }
  }

  async mounted(): Promise<void> {
    const res = await this.ArchiveApi.getRecruitInfoForArchiveV3(
      this.$route.params.id
    );
    this.data = res.data;
    this.loading = false;
  }
}
</script>

<style lang="scss" scoped>
.redesigned-tab-bar {
  background-color: rgb(237, 243, 247);
  border-top: 1px solid rgba(1, 72, 116, 0.11);
  border-bottom: 1px solid rgba(1, 72, 116, 0.11);
}
</style>
