<template>
  <div>
    <v-container grid-list-md justify="center">
      <v-banner>
        <h4>Gestion des imprimantes </h4>         
      </v-banner>
      <v-container align="center">
        <v-layout row>
          <v-btn align="left" @click="home_all">Home all</v-btn>
        </v-layout>
        <v-layout row>
          <v-flex v-for="item of printers" :key="item.id">
            <PrinterCard :bus="the_bus" :infos="item"></PrinterCard>
          </v-flex>
        </v-layout>
      </v-container>
    </v-container>
  </div>
</template>
<script>
import PrinterCard from "@/components/PrinterCard"
import axios from 'axios'
import { bus } from '../main'
export default {
    components: {
      PrinterCard
    },
    data() {
      return {
        no_load: false,
        the_bus: bus
      }
    },
    mounted() {
      this.$store.dispatch('load_queues')
      .then((resp) => {
        this.start_reload()
      })
    },
    beforeDestroy() {
      this.stop_reload()
    },
    
    methods: {
      home_all() {
        axios.get('/printers/home_all')
      },
      load() {
        if (this.no_load) return;
        this.$store.dispatch("load_printers")
        .then((resp) => {
          setTimeout(() => bus.$emit('refresh'), 500);
        })
        setTimeout(this.load, 6000);
      },
      stop_reload() {
        this.no_load = true;
      },
      start_reload() {
        this.no_load = false;
        this.load()
      }
    },
    computed: {
        printers() {
            return this.$store.state.printers
        }
    }
}
</script>