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

import EcommerceCongratulationsJohn from '@/views/dashboards/ecommerce/EcommerceCongratulationsJohn.vue'
import EcommerceEarningReports from '@/views/dashboards/ecommerce/EcommerceEarningReports.vue'
import EcommerceExpensesRadialBarCharts from '@/views/dashboards/ecommerce/EcommerceExpensesRadialBarCharts.vue'
import EcommerceGeneratedLeads from '@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue'
import EcommerceInvoiceTable from '@/views/dashboards/ecommerce/EcommerceInvoiceTable.vue'
import EcommerceOrder from '@/views/dashboards/ecommerce/EcommerceOrder.vue'
import EcommercePopularProducts from '@/views/dashboards/ecommerce/EcommercePopularProducts.vue'
import EcommerceRevenueReport from '@/views/dashboards/ecommerce/EcommerceRevenueReport.vue'
import EcommerceStatistics from '@/views/dashboards/ecommerce/EcommerceStatistics.vue'
import EcommerceTotalProfitLineCharts from '@/views/dashboards/ecommerce/EcommerceTotalProfitLineCharts.vue'
import EcommerceTransactions from '@/views/dashboards/ecommerce/EcommerceTransactions.vue'

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

  await nextTick()
})
</script>
<template>
  <div class="grid-stack">
    <div class="grid-stack-item" gs-w="8" gs-h="4" gs-max-h="4" gs-x="0" gs-y="0">
      <div class="grid-stack-item-content">
        <EcommerceCongratulationsJohn />
      </div>
    </div>

    <div class="grid-stack-item" gs-w="4" gs-h="4" gs-max-h="4" gs-x="8" gs-y="0">
      <div class="grid-stack-item-content">
        <EcommerceStatistics />
      </div>
    </div>

    <div class="grid-stack-item" gs-w="7" gs-h="3" gs-max-h="3" gs-x="0" gs-y="4">
      <div class="grid-stack-item-content">
        <EcommerceTotalProfitLineCharts />
      </div>
    </div>

    <div class="grid-stack-item" gs-w="5" gs-h="3" gs-max-h="3" gs-x="7" gs-y="4">
      <div class="grid-stack-item-content">
        <EcommerceExpensesRadialBarCharts />
      </div>
    </div>

    <div class="grid-stack-item" gs-w="3" gs-h="5" gs-max-h="5" gs-x="0" gs-y="7">
      <div class="grid-stack-item-content">
        <EcommerceGeneratedLeads />
      </div>
    </div>

    <div class="grid-stack-item" gs-w="6" gs-h="5" gs-max-h="5" gs-x="3" gs-y="7">
      <div class="grid-stack-item-content">
        <EcommerceRevenueReport />
      </div>
    </div>

    <div class="grid-stack-item" gs-w="3" gs-h="3" gs-max-h="3" gs-x="9" gs-y="7">
      <div class="grid-stack-item-content">
        <EcommerceOrder />
      </div>
    </div>

    <div class="grid-stack-item" gs-w="4" gs-h="10" gs-max-h="10" gs-x="0" gs-y="12">
      <div class="grid-stack-item-content">
        <EcommerceEarningReports />
      </div>
    </div>

    <div class="grid-stack-item" gs-w="4" gs-h="10" gs-max-h="10" gs-x="4" gs-y="12">
      <div class="grid-stack-item-content">
        <EcommercePopularProducts />
      </div>
    </div>

    <div class="grid-stack-item" gs-w="4" gs-h="4" gs-max-h="4" gs-x="8" gs-y="12">
      <div class="grid-stack-item-content">
        <EcommerceTransactions />
      </div>
    </div>

    <div class="grid-stack-item" gs-w="12" gs-h="6" gs-max-h="6" gs-x="0" gs-y="16">
      <div class="grid-stack-item-content">
        <EcommerceInvoiceTable />
      </div>
    </div>
  </div>
</template>