<template>
  <div class="main-bg flex flex-col scrollbar-hide h-screen overflow-auto">
    <header class="relative flex items-center">
      <SvgComponent :content="headerSvg" class="w-full h-[98px]" />
      <SvgComponent :content="titleSvg" class="w-[50%] h-[69px] absolute top-0 left-50% translate-x-[-50%]" />
      <div class="absolute top-[25%] right-[24px] translate-y-[-25%] z-1 flex items-center justify-center w-max">
        <div class="text-[#45A2FF] text-[14px]">{{ year }}-{{ month }}-{{ day }}&nbsp;{{ weekday }}</div>
        <DigitalWatch class="ml-[10px]" />
      </div>
    </header>
    <div class="flex items-center justify-end pr-[24px] cursor-pointer mb-[13px]" @click="updateAllData">
      <SvgIcon name="circle" class="text-[14px] text-[#C0EEFF] transition-all duration-300"/>
      <div class="text-[#C0EEFF] text-[12px] ml-[5px]">数据更新时间:{{ formatDatetime(updateTime) }}</div>
    </div>

    <div class="grid grid-rows-[210px_358px_320px] gap-y-5 w-full min-h-[928px] gap-[20px] flex-1 overflow-auto mb-[27px]">
      <div class="flex items-center px-[24px] justify-start">
        <PaymentTotal />
        <TodayPayment class="ml-[20px]" />
        <GainTotal class="ml-[20px]" />
        <GainToday class="ml-[20px]" />
        <LossStatic class="ml-[20px]" />
      </div>
      <div class="flex items-center px-[24px] justify-start">
        <OperatingTrends class="" />
        <AskSection class="ml-[20px]" />
      </div>
      <div class="flex items-center px-[24px] overflow-x-auto">
        <StudentSource />
        <OnLineStatus class="ml-[20px]" />
        <OfflineStatus class="ml-[20px]" />
        <SixStatistics class="ml-[20px]" />
        <ChargingRanking class="ml-[20px]" />
        <WinCustomer class="ml-[20px]" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import SvgComponent from "@/components/SvgComponent.vue";
  import SvgIcon from "@/components/svg-icon/SvgIcon.vue";

  import DigitalWatch from "@/components/watch/DigitalWatch.vue";
  import PaymentTotal from "@/views/components/PaymentTotal.vue";
  import TodayPayment from "@/views/components/TodayPayment.vue";
  import GainTotal from "@/views/components/GainTotal.vue";
  import GainToday from "@/views/components/GainToday.vue";
  import LossStatic from "@/views/components/LossStatic.vue";
  import OperatingTrends from "@/views/components/OperatingTrends.vue";
  import AskSection from "@/views/components/AskSection.vue";
  import StudentSource from "@/views/components/StudentSource.vue";
  import OnLineStatus from "@/views/components/OnlineStatus.vue";
  import OfflineStatus from "@/views/components/OfflineStatus.vue";
  import SixStatistics from "@/views/components/SixStatistics.vue";
  import ChargingRanking from "./components/ChargingRanking.vue";
  import WinCustomer from "./components/WinCustomer.vue";

  import { useDate } from "@/composables/useDate";
  import {useFetchAllData} from "./composables/useFetchData"
  import { runImmediatelyAll, updateTime } from "@/composables/usePolling";
  import { formatDatetime } from "@/utils/date";

  const { year, month, day, weekday, formateTime } = useDate();


  const headerSvg = ref("");
  const headerBackgroundSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/header-background.svg?raw");
    headerSvg.value = svg;
  };

  const titleSvg = ref("");
  const headerTitleSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/header-title.svg?raw");
    titleSvg.value = svg;
  };


  useFetchAllData()

  const updateAllData = () => {
    runImmediatelyAll()
  }

  onBeforeMount(() => {
    formateTime();
    headerBackgroundSvg();
    headerTitleSvg();
  });
</script>

<style scoped lang="scss">
  .main-bg {
    background-image: url("/images/main-bg.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    overflow-y: auto;
  }
</style>
