<template>
  <div :key="data.id" class="BaseCard">
    <div class="BaseCard__Header">
      <record-header :data="data" :loading="loading" class="BaseCard__Record" />
      <redesigned-tabs
        :clickHandler="tabClickHandler"
        :current-tab="$route.name"
        :tabs="tabs"
        dense
        class="BaseCard__Tabs"
      />
    </div>
    <keep-alive>
      <router-view :model="data" :loading="loading" @refresh="refresh" />
    </keep-alive>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import RecordHeader from './header/index.vue';
import { Tab } from '@/interfaces/base/BaseTabs';
import { Organization } from '@openapi/idm';
import { Route } from 'vue-router';

interface EmptyData {
  id: string;
}

@Component({
  components: { RecordHeader },
})
export default class OrganizationRecord extends Vue {
  public data: Organization | EmptyData = { id: '' };
  public loading = true;

  // т.к. мы отказались от vuex хранения карточки для организации , то common потерял смысл
  // Если встречаем common.id его заменяем на this.$route.params.id
  // Для переноса еще карточек если нужны будут, т.к. оставил остальные из пгс
  // common.active не имеет смысла, т.к. за управление открытыми вкладками отвечает роутер
  get tabs(): Tab[] {
    return [
      {
        label: 'Основные данные',
        name: 'organization-basic',
        isVisible: true,
        badge: false,
      },
      {
        label: 'Организационная структура',
        name: 'organization-departments',
        isVisible: true,
        badge: false,
      },
      {
        label: 'Сотрудники',
        name: 'organization-accounts',
        isVisible: true,
        badge: false,
      },
      {
        label: 'График работы',
        name: 'organization-calendar',
        isVisible: true,
        badge: 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 },
      });
    }
  }

  // метод обновления страницы
  public async refresh(): Promise<void> {
    this.loading = true;
    this.data = { id: '' };
    const organization = await this.$store.dispatch(
      'idm/organizations/getOrganization',
      {
        id: this.$route.params.id,
        opts: {
          expand: ['parent', 'calendar'],
        },
      }
    );
    this.data = organization;
    this.loading = false;
  }

  @Watch('$route', { immediate: true, deep: true })
  private handlerRoute(
    oldRoute: Route | undefined,
    newRoute: Route | undefined
  ): void {
    if (oldRoute?.params?.id !== newRoute?.params?.id) {
      this.refresh();
    }
  }
}
</script>

<style lang="scss" scoped>
.BaseCard {
  position: relative;

  &__Header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #edf3f7;
  }

  &__Record {
    min-height: 100px;
  }

  &__Tabs {
    border-top: 1px solid rgba(1, 72, 116, 0.11);
    border-bottom: 1px solid rgba(1, 72, 116, 0.11);
  }
}
</style>
