<script setup>
import { onMounted, nextTick } from 'vue'
import { GridStack } from 'gridstack'

import ProjectActivityBarChart from "@/components/ProjectActivityBarChart.vue";
import AnalysisCard from "@/components/AnalysisCard.vue";
import CostOverview from "@/components/CostOverview.vue";
import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
import GanttChart from './gantt.vue'

onMounted(async () => {
  const grid = GridStack.init({
    column: 12,
    cellHeight: '110',
    float: true,
    draggable: { handle: '.grid-stack-item-content' },
    resizable: true,
    maxRow: 20,
  })

  await nextTick()
})
</script>

<template>
  <div class="grid-stack">
    <div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
      <div class="grid-stack-item-content">
        <GeneratedLeadsCard :progress="32" />
      </div>
    </div>
    <div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
      <div class="grid-stack-item-content">
        <GeneratedLeadsCard :donut-colors="['primary']" :progress="71" />
      </div>
    </div>
    <div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
      <div class="grid-stack-item-content">
        <GeneratedLeadsCard :donut-colors="['warning']" :progress="32" />
      </div>
    </div>
    <div class="grid-stack-item" gs-w="8" gs-h="7" gs-max-h="7">
      <div class="grid-stack-item-content">
        <ProjectActivityBarChart />
      </div>
    </div>
    <div class="grid-stack-item" gs-w="4" gs-h="7" gs-max-h="7">
      <div class="grid-stack-item-content">
        <AnalysisCard />
      </div>
    </div>
    <div class="grid-stack-item" gs-w="12" gs-h="8" gs-max-h="8">
      <div class="grid-stack-item-content">
        <GanttChart />
      </div>
    </div>
  </div>
</template>

<style>
.grid-stack-item-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid-stack-item-content>* {
  flex: 1;
  margin-bottom: 3.2rem;
}

.grid-stack-item:has(GanttChart) {
  height: 100vh !important;
}

.grid-stack-item:has(GanttChart) .grid-stack-item-content {
  height: 100vh;
}
</style>