<template>
  <div class="Tabs">
    <div class="Tabs__Header">
      <div>
        <router-view
          name="masthead"
          @data-loading="onDataLoading"
          :refresh="refresh"
        />
      </div>
      <div v-if="Array.isArray(tabs) && tabs.length" class="Tabs__Fields">
        <div class="Tabs__FieldsBlock">
          <redesigned-tabs
            :clickHandler="tabClickHandler"
            :current-tab="currentTab"
            :tabs="tabs"
            dense
          />
        </div>
      </div>
    </div>
    <div>
      <router-view :data="data" :loading="loading" @refresh="refreshData" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Tabs {
  &__Header {
    background-color: rgba(53, 126, 172, 0.05);
  }
  &__Fields {
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-top: 1px solid rgba(1, 72, 116, 0.11);
    border-bottom: 1px solid rgba(1, 72, 116, 0.11);
  }
  &__FieldaBlock {
    width: 100%;
  }
}
</style>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { Tab } from '@interfaces/base/BaseTabs';
import { SubpoenaOneResponseV3 } from '@/recruits/openapi/subpoena-service';

interface INestedTab {
  name: string;
  path: string;
  visible: boolean;
}

interface ITab extends Tab {
  tabs: INestedTab[];
}

@Component({})
export default class SubpoenaCardWithTabsLayout extends Vue {
  public currentTab: string = this.$route.name || '';
  public tabs: Array<Tab> = this.getTabs();

  public data: SubpoenaOneResponseV3 = {};
  public loading = false;
  public refresh = false;

  // Этот @Watch может и не нужен,
  // но только пока tabClickHandler $router.'replace()' вместо 'push()' использует

  public tabClickHandler(selectedTab: Tab): void {
    if (this.$route.name !== selectedTab.path) {
      // .replace() вместо .push() что бы в истории не оставались записи о переключении закладок,
      // что бы кнопка 'назад' возвращалась к списку, а не на предыдущую закладку
      this.$router.replace({
        name: selectedTab.path,
        params: { id: this.$route.params.id },
      });
    }
  }

  refreshData() {
    this.refresh = true;
  }

  public onDataLoading({
    data,
    loading,
  }: {
    data: SubpoenaOneResponseV3;
    loading: boolean;
  }) {
    this.data = data;
    this.loading = loading;
    this.refresh = false;
    this.tabs = this.getTabs();
  }

  // поэтому пусть будет, на всякий случай, так как никому не вредит
  @Watch('$route', { immediate: true })
  private routeWatcher(to: { name: string }): void {
    this.currentTab = to.name;
  }

  private getTabs(): Array<INestedTab> {
    // аккумулировать всю мету в один объект
    const routeMeta = this.$route.matched.reduce((acc, next) => {
      Object.assign(acc, next.meta);
      return acc;
    }, {} as ITab);
    const result =
      routeMeta.tabs?.map((t: INestedTab) => {
        const visible = true;
        const tabProps = { ...t };
        return {
          ...tabProps,
          // Закладки, у которых есть условия видимости, по умолчанию скрываем
          visible,
        };
      }) || [];
    return result;
  }
}
</script>
