<script setup>
import Forge from "@/components/forge/Forge.vue";
import DashboardStat from "./components/DashboardStat.vue";
import DashboardElecChart from "./components/DashboardElecChart.vue";
import DashboardSysCard from "./components/DashboardSysCard.vue";
import DashboardSysProgress from "./components/DashboardSysProgress.vue";
import { getDashboardInit } from "@/apis/dashboard";
import { onMounted, ref, provide, watch } from "vue";

const initialData = ref(null);
// const forgeData = ref([]);
const init = async () => {
  const res = await getDashboardInit();
  initialData.value = res.data;
};

onMounted(() => {
  init();
});

const intervalOption = ref({});
const currentIntervalType = ref("");

const openModal = (type) => {
  currentIntervalType.value = type;
  dashboard_more.showModal();
};

const decideIntervalOption = (option) => {
  intervalOption.value[currentIntervalType.value] = option;
};

provide("dashboard_items", {
  initialData,
  // forgeData,
  openModal,
  decideIntervalOption,
  intervalOption,
  currentIntervalType,
});
</script>

<template>
  <div class="flex flex-wrap items-center">
    <!-- 建築圖 -->
    <div class="w-full xl:w-1/3">
      <div class="area-img-box">
        <Forge />
      </div>
    </div>

    <div class="w-full xl:w-2/3">
      <!-- 用電數據 -->
      <DashboardStat />
      <!-- 用電圖表 -->
      <DashboardElecChart />
    </div>

    <!-- 設備小卡 -->
    <div class="w-full lg:w-2/3">
      <DashboardSysCard />
    </div>
    <!--狀態、進度-->
    <div class="w-full lg:w-1/3">
      <DashboardSysProgress />
    </div>
  </div>
</template>

<style lang="css" scoped>
.area-img-box {
  @apply border border-light-info bg-dark-info w-full h-[400px] block relative rounded-sm mb-4;
}

.area-img-box::before {
  @apply absolute left-0 right-0 -top-[4px] m-auto h-[8px] w-[140px] bg-no-repeat z-10;
  content: "";
  background: url(@ASSET/img/area-img-box-line-top.png) center center;
}

.area-img-box::after {
  @apply absolute left-0 right-0 -bottom-[4px] m-auto h-[8px] w-[140px] bg-no-repeat z-10;
  content: "";
  background: url(@ASSET/img/area-img-box-line-bottom.png) center center;
}
</style>
