<template>
  <div 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="init" />
    </keep-alive>
  </div>
</template>

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

const departmentApi = new DepartmentApi();

@Component({
  components: { RecordHeader },
})
export default class DepartmentRecord extends Vue {
  public data: Department | Record<never, never> = {};
  public loading = true;

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

  async init(): Promise<void> {
    try {
      const { data } = await departmentApi.getDepartment(
        this.$route.params.id,
        'parent,calendar'
      );
      this.data = data;
    } catch (e) {
      console.log(e);
    } finally {
      this.loading = false;
    }
  }

  async mounted(): Promise<void> {
    await this.init();
  }
}
</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>
