<template>
  <div class="container-fluid bg-color">
    <div class="row">
      <div class="col-12">
        <div class="main-dashboard firefox-scrollbar">
          <div class="search-dashboard d-flex justify-content-center">
            <div class="col-md-8 col-xl-7 col-xxl-5">
              <search-dashboard></search-dashboard>
            </div>
          </div>
          <main-section-dashboard></main-section-dashboard>
          <chart></chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "pinia";
import { useCommonStore } from "~/stores/commonStore";
import { clearBodyClass } from "@manuals/utilities";

export default {
  beforeMount() {
    clearBodyClass();
  },
  mounted() {
    this.setBodyClass("default-dashboard");
  },
  destroyed() {
    clearBodyClass();
  },
  methods: {
    ...mapActions(useCommonStore, ["setBodyClass"]),
  },
  components: {
    SearchDashboard: defineAsyncComponent(()=>
      import("@/components/dashboard/default/SearchDashboard.vue")
    ),
    MainSectionDashboard: defineAsyncComponent(()=>
      import("@/components/dashboard/default/MainSectionDashboard.vue")
    ),
    Chart: defineAsyncComponent(()=>
      import("@/components/dashboard/default/Chart.vue")
    ),
  },
};
</script>

<style lang="scss" scoped>
.bg-color {
  background: #f0f0f0;
}
.main-dashboard {
  height: calc(100vh - 4em);
  overflow: auto;
  // background-image: linear-gradient(to top, #D0D0D0 0%, #199C9C 30%);
  // background: #f0f0f0;
}
</style>