<template>
  <div class="dashboard-page bg-page">
    <template v-if="loading">
      <div class="row items-center justify-center full-width bg-surface" style="height: 80vh">
        <q-spinner-dots color="primary" />
      </div>
    </template>
    <template v-else>
      <DashboardHeaderBar :data="headerBar" />
      <DashboardSummaryInfos :data="summaryInfos" />
      <DashboardPriceSuggest :data="priceSuggestion"/>
      <DashboardScrollAreaSchedules />
      <DashboardSolicitations :data="solicitations"/>
      <DashboardNextSchedules :data="nextSchedules" />
      <DashboardOpportunities :data="opportunities"/>
    </template>
  </div>
</template>

<script setup>
import DashboardHeaderBar from 'src/components/dashboard/DashboardHeaderBar.vue';
import DashboardSummaryInfos from 'src/components/dashboard/DashboardSummaryInfos.vue';
import DashboardPriceSuggest from 'src/components/dashboard/DashboardPriceSuggest.vue';
import DashboardScrollAreaSchedules from 'src/components/dashboard/DashboardScrollAreaSchedules.vue';
import DashboardSolicitations from 'src/components/dashboard/DashboardSolicitations.vue';
import DashboardNextSchedules from 'src/components/dashboard/DashboardNextSchedules.vue';
import DashboardOpportunities from 'src/components/dashboard/DashboardOpportunities.vue';
import { onMounted, ref } from 'vue';
import { dadosDashboard } from 'src/api/dashboard';

const headerBar = ref({});
const summaryInfos = ref({});
const priceSuggestion = ref({});
const solicitations = ref([]);
const nextSchedules = ref([]);
const opportunities = ref([]);

const loading = ref(true);
onMounted( async () => {
  const response = await dadosDashboard();
  if(response) {
    headerBar.value = response.headerBar;
    summaryInfos.value = response.summaryInfos;
    priceSuggestion.value = response.priceSuggested;
    solicitations.value = response.solicitations;
    nextSchedules.value = response.nextSchedules;
    opportunities.value = response.opportunities;
  }
  loading.value = false;
});
</script>

<style scoped>
.dashboard-page {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}
</style>
