<script setup>
import CrmActivityTimeline from '@/views/dashboards/crm/CrmActivityTimeline.vue'
import CrmDeveloperMeetup from '@/views/dashboards/crm/CrmDeveloperMeetup.vue'
import CrmMeetingSchedule from '@/views/dashboards/crm/CrmMeetingSchedule.vue'
import CrmRevenueReport from '@/views/dashboards/crm/CrmRevenueReport.vue'
import CrmSalesOverview from '@/views/dashboards/crm/CrmSalesOverview.vue'
import CrmTotalGrowthCharts from '@/views/dashboards/crm/CrmTotalGrowthCharts.vue'
import CrmTotalSales from '@/views/dashboards/crm/CrmTotalSales.vue'
import CrmTransactions from '@/views/dashboards/crm/CrmTransactions.vue'
import CrmUpgradeYourPlan from '@/views/dashboards/crm/CrmUpgradeYourPlan.vue'
import CrmWeeklySales from '@/views/dashboards/crm/CrmWeeklySales.vue'
import illustration1 from '@images/cards/illustration-1.png'
import illustration2 from '@images/cards/illustration-2.png'
import { useStore } from 'vuex'
const store = useStore()
const cardStatisticsWithImages = [
  {
    title: 'Total Meetings',
    subtitle: 'Year of 2021',
    stats: '13k',
    change: 15.6,
    // image: illustration1,
    color: 'primary',
  },
  {
    title: 'Orders',
    subtitle: 'Year of 2021',
    stats: '13k',
    change: 15.6,
    // image: illustration1,
    color: 'primary',
  },
  {
    title: 'New Patients',
    subtitle: 'Year of 2021',
    stats: '13k',
    change: 15.6,
    // image: illustration1,
    color: 'primary',
  },
  {
    title: 'New Providers',
    subtitle: 'Last Week',
    stats: '24.5k',
    change: -20,
    // image: illustration2,
    color: 'secondary',
  },
]

// const statistic = {
//   title: 'New Project',
//   color: 'primary',
//   icon: 'ri-file-word-2-line',
//   stats: '862',
//   change: -18,
//   subtitle: 'Yearly Project'
// }
// onMounted(() => {
//   store.dispatch('updateIsLoading', false)
// })
</script>

<template>
  <section>
    <VRow class="match-height">
      <VCol
        v-for="statistics in cardStatisticsWithImages"
        :key="statistics.title"
        class="pt-8 pt-sm-3"
        cols="12"
        md="3"
        sm="6"
      
      >
        <CardStatisticsWithImages v-bind="statistics" />
      </VCol>
      <VCol
        cols="12"
        sm="8"
        md="12"
      >
        <CrmWeeklySales />
      </VCol>
   

      <VCol
        cols="12"
        md="6"
        style="display: none;"
      >
        <CrmActivityTimeline />
      </VCol>
      <VCol
        cols="12"
        md="6"
      >
        <CrmMeetingSchedule />
      </VCol>
    </VRow>
  </section>
</template>
