<template>
  <div>
    <div class="header">
      <div class="sky-background">
        <router-view name="masthead" @data-loading="onDataLoading" />
      </div>
      <div v-if="Array.isArray(tabs) && tabs.length" class="row bordered">
        <div class="col-12">
          <redesigned-tabs
            :clickHandler="tabClickHandler"
            :current-tab="currentTab"
            :tabs="tabs"
            dense
          />
        </div>
      </div>
    </div>
    <div>
      <router-view :data="data" :loading="loading"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  background-color: rgba(53, 126, 172, 0.05);

  .bordered {
    border-top: 1px solid rgba(1, 72, 116, 0.11);
  }

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

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

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

  public data: any = {};
  public loading = 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 },
      });
    }
  }

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

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

  private getTabs(): Array<Tab> {
    // аккумулировать всю мету в один объект
    const routeMeta = this.$route.matched.reduce((acc, next) => {
      Object.assign(acc, next.meta);
      return acc;
    }, {} as any);
    const result =
      routeMeta.tabs?.map((t: any) => {
        let visible = true;
        if (typeof(t.isVisible) === 'function') {
          visible = t.isVisible(this.data);
        } else if (typeof(t.isVisible) === 'boolean') {
          visible = t.isVisible;
        }
        let badge = undefined;
        if (typeof(t.badge) === 'function') {
          badge = t.badge(this.data);
        } else {
          badge = t.badge;
        }
        const tabProps = { ...t };
        delete tabProps.isVisible;
        return {
          ...tabProps,
          // Закладки, у которых есть условия видимости, по умолчанию скрываем
          visible,
          alert: (badge != null) ? badge : false,
        };
      }) || [];
    return result;
  }
}
</script>
