<template>
  <div
    class="row items-center justify-content relative-position"
    style="width: fit-content"
  >
    <q-btn @click="onTestClick" :disable="loading" unelevated color="primary">
      Тестировать запрос
    </q-btn>
    <q-linear-progress
      v-if="progress"
      :value="progress"
      class="absolute-top z-top no-pointer-events fit"
      color="green-2"
      style="opacity: 0.5"
    />
  </div>
</template>

<script lang="ts">
// @ts-ignore
import VJsonEditor from 'v-jsoneditor';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component({
  components: {
    VJsonEditor,
  },
})
export default class TestRequest extends Vue {
  @Prop() clazz: string;
  @Prop() json: any;

  progress = 0;
  interval: ReturnType<typeof setTimeout> = setTimeout(() => {}, 0);
  loading = false;

  async onTestClick() {
    const interagencyData = {
      className: this.clazz,
      object: this.json,
    };
    this.progress = 0;
    this.interval = setInterval(() => {
      this.progress = Math.min(1, this.progress + 0.0125);
    }, Math.random() * 1000);
    this.loading = true;
    await this.$store.dispatch(
      'registryService/interagencies/testChildRequest',
      interagencyData
    );
    this.stopLoading();
  }

  stopLoading() {
    clearInterval(this.interval);
    this.progress = 0;
    this.loading = false;
  }
}
</script>

<style scoped></style>
