<template>
  <q-page
    padding
    style="grid-auto-rows: 1fr;"
    class="fit row justify-around items-start q-col-gutter-sm"
  >
    <div
      v-for="(item, index) in widgets"
      :key="index"
      class="col-4 full-height col-sm-6 col-xs-12"
    >
      <component v-bind:is="item" />
    </div>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from '@vue/composition-api';
import { AsyncComponentPromise } from 'vue/types/options';
export default defineComponent({
  name: 'Dashboard',
  setup(_, { root }) {
    const widgets = ref<Array<AsyncComponentPromise>>([]);
    onMounted(() => {
      console.log('mounted!');
      root.$flaschengeistPlugins.widgets.forEach(widget =>
        widgets.value.push(widget.widget)
      );
    });

    return {
      widgets
    };
  }
});
</script>