<template>
  <div class="d-flex results align-content-stretch flex-wrap">
    <scan-result-component v-for="(result, id) in data.results"
                           v-bind:key="id" v-bind:id="id" v-bind:result="result" />
  </div>
</template>

<style>
  .results {
    margin: -0.5rem;
  }
</style>

<script lang="ts">
import Vue from 'vue';

import ScanResult from '~/models/scan-result';

export default Vue.extend({
  async asyncData({params, $axios}) {
    return { data: await $axios.$get<ScanResult>(`results/${params.id}`) }
  },

  created() {
    this.timer = setInterval(this.getData, 1000 * 5);
  },

  beforeDestroy() {
    clearInterval(this.timer);
  },

  methods: {
    async getData() {
      this.data = await this.$axios.$get<ScanResult>(`results/${this.$route.params.id}`);
    }
  },

  data() {
    return {
      data: null as ScanResult | null,
      timer: 0 as any
    }
  }
});
</script>
