<template>
  <div class="masthead">
    <div class="row details-bar q-px-md q-pt-md">
      <div class="q-pr-xs">
        <q-btn
          class="back-button q-px-xs"
          icon="pgs-arrow-left"
          dense
          size="sm"
          @click="returnToParentViews({ name: 'reports' })"
        />
      </div>
      <div>
        <div class="row header-details">
          <div class="col-shrink supertitle">
            <span>К списку отчетов</span>
          </div>
        </div>
      </div>
      <div style="flex-grow: 1" />
      <div>
        <div class="row action-buttons justify-end q-gutter-sm">
<!--          <q-btn-->
<!--            icon="pgs-refresh"-->
<!--            class="redesigned-outline-btn align-button"-->
<!--            label="Актуализировать"-->
<!--            @click="refresh"-->
<!--            :loading="loading"-->
<!--            :disabled="loading"-->
<!--          />-->
          <q-btn
            icon="pgs-plus"
            class="redesigned-action-btn align-button"
            label="Создать отчет"
            @click="createReport"
            :loading="loading"
            :disabled="loading"
          />        
        </div>
      </div>
    </div>

    <div class="row q-px-md q-pb-sm">
      <div class="col">
        <div class="title-bar">
          <span class="title q-pt-xs q-pb-xs q-pr-sm">
            <q-skeleton v-if="loading" height="32px" />
            <template v-else>
              {{ data.name }}
            </template>
          </span>
        </div>
      </div>
    </div>

    <create-report-dialog
      v-model="showCreateReportDialog"
      title="Создание отчета"
      :base-report="data"
      @creating="creatingReportCallback"
    />

  </div>
</template>

<style lang="scss" scoped>
.masthead {
  background-color: rgb(237, 243, 247);
  .action-buttons {
    .align-button {
      height: 34px;
      text-transform: initial;
      &::v-deep {
        .q-btn__content {
          flex-wrap: nowrap;
          > i {
            margin-top: -2px;
            transform: scaleX(-1);
          }
          > span {
            margin-top: -4px;
          }
        }
      }
    }    
  }
}

.title-bar {
  display: flex;
  flex-flow: column;
  span.title {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: rgba(2, 12, 18, 0.9);
  }
}

.details-bar {
  display: flex;
  flex-flow: row;

  .back-button {
    border: 1px solid rgba(1, 72, 116, 0.18) !important;
    border-radius: 24px !important;
    color: #1491cf !important;
  }

  .header-details {
    > div {
      overflow-x: hidden;
      font-family: 'Golos Text', sans-serif;
      font-style: normal;
      font-weight: 600;
      font-size: 12px;
      line-height: 16px;
      padding: 0 8px 0px 8px;
      margin-bottom: 8px;

      &.supertitle {
        display: inline-flex;
        align-items: center;
        text-align: center;

        font-family: 'Golos Text';
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 26px;
        color: rgba(2, 12, 18, 0.58);
      }

    }
  }
}


</style>

<script lang="ts">
import { Component, Emit, Mixins, Watch } from 'vue-property-decorator';

import ReturnToParentView from '@mixins/ReturnToParentView';
import RefreshKeyInterceptor from '@/recruits/mixins/refresh-key-interceptor';

import CreateReportDialog from '@/recruits/components/reports/list/dialogs/create-report.vue';

import { fetchBaseReport } from '../definitions';

@Component({
  components: {
    CreateReportDialog,
  },
})
export default class Masthead extends Mixins(
  ReturnToParentView,
  RefreshKeyInterceptor,
) {
  public loading = false;
  protected isCreating = false;
  protected auto = false;

  public data: any = {};

  public showCreateReportDialog = false;

  @Watch('loading')
  @Emit('data-loading')
  private loadingWatcher(): { loading: boolean; data: any } {
    return {
      loading: this.loading,
      data: this.data,
    };
  }

  protected async fetchReport() {
    this.loading = true;
    try {
      this.data = await fetchBaseReport(this.$route.params.id);
    } catch(error) {
      console.error(`Произошла ошибка при загрузке базового отчета ${this.$route.params.id}`, error);
    } finally {
      this.loading = false;
    }
  }

  refresh(): void {
    this.fetchReport();
    // TODO: fetchReport вообще неочём, тут главное список обновить
  }

  created(): void {
    this.fetchReport();
  }

  createReport(): void {
    this.showCreateReportDialog = true;
  }

  creatingReportCallback(promise: Promise<any>): void {
    this.isCreating = true;
    // let go = true;
    // window.setTimeout(() => (go = false), 2000); // если ждём меньше пары секунд
    promise
      .then((report) => {
        // if (go && report.id) {
        //   return this.goToCard(report.id);
        // }
        const auto = !!report.auto?.enabled;
        auto !== this.auto ? (this.auto = auto) : this.fetchReport();
      })
      .finally(() => (this.isCreating = false));
  }
}
</script>
