<template>
  <div :key="key" class="BaseCard">
    <record-header
      @reloadRecord="key++"
      :data="data"
      :loading="loading"
      class="BaseCard__Record"
    />

    <redesigned-tabs
      :clickHandler="tabClickHandler"
      :current-tab="$route.name"
      :tabs="tabs"
      dense
      class="BaseCard__Tabs"
    />
    <keep-alive>
      <router-view :data="data" :loading="loading" @refresh="loadData" />
    </keep-alive>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import ReturnToParentView from '@mixins/ReturnToParentView';
import { PersonApi } from '@openapi/idm';
import { Account } from '@interfaces/entities/Account';
import { Tab } from '@/interfaces/base/BaseTabs';
import ProcessApiError from '@/recruits/components/dialogs/ProcessApiError.vue';
import RecordHeader from './header/index.vue';

const personApi = new PersonApi();

@Component({
  components: {
    ProcessApiError,
    RecordHeader,
  },
})
export default class AccountCard extends mixins(ReturnToParentView) {
  data: Account | null = null;
  private loading = false;

  private key = 0;

  // т.к. мы отказались от vuex хранения карточки для сотрудника, то common потерял смысл
  // Если встречаем common.id его заменяем на this.$route.params.id
  // Для переноса еще карточек если нужны будут, т.к. оставил остальные из пгс
  // common.active не имеет смысла, т.к. за управление открытыми вкладками отвечает роутер
  public tabClickHandler(selectedTab: Tab): void {
    if (this.$route.name !== selectedTab.path) {
      this.$router.replace({
        name: selectedTab.path,
        params: { id: this.$route.params.id },
      });
    }
  }

  private get tabs(): Tab[] {
    return [
      {
        label: 'Основные данные',
        name: 'account-basic',
        isVisible: true,
        badge: false,
      },
      {
        label: 'Учётная запись',
        name: 'account-organizations',
        isVisible: true,
        badge: false,
      },
      {
        label: 'Роли',
        name: 'account-roles',
        isVisible: true,
        badge: false,
      },
    ].map((tab) => ({
      name: tab.label,
      path: tab.name,
      visible: tab.isVisible === undefined || tab.isVisible,
      alert: tab.badge ?? false,
    }));
  }

  loadData(): void {
    this.loading = true;
    this.$store
      .dispatch('idm/accounts/dispatchAccount', {
        data: {
          expand: 'person,roles,user-domain,region',
        },
        id: this.$route.params.id,
      })
      .then((data) => {
        const tempData: Account = JSON.parse(JSON.stringify(data));
        if (data['user-domain']) {
          tempData.userDomain = data['user-domain'];
        }
        personApi
          .getCredentials(data.person?.id)
          .then(({ data: credentials }) => {
            tempData.credentials = credentials;
            this.data = tempData;
            this.loading = false;
          })
          .catch((e) => {
            this.loading = false;
            this.data = tempData;
            console.log(e);
          });
      })
      .catch((e) => {
        this.loading = false;
        console.log(e);
      });
  }

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