import { Component, Watch } from 'vue-property-decorator';
import Vue from 'vue';
import { QSpinnerGears } from 'quasar';

@Component({
  components: {
    QSpinnerGears,
  },
})
export default class LayoutIndex extends Vue {
  private counter = 0;

  @Watch('counter', {
    immediate: true,
  })
  private counterHandler() {
    if (this.loadingIsActive) {
      this.$q.loading.show({
        // @ts-ignore
        spinner: QSpinnerGears,
        spinnerColor: 'primary',
        spinnerSize: 50,
      });
    } else {
      this.$q.loading.hide();
    }
  }

  private get loadingIsActive(): boolean {
    return this.counter !== 0;
  }

  private changeLoadCount(inc: number): void {
    this.counter += inc;
  }
}
