<template>
  <div class="h-screen px-[3rem] custom-bg overflow-auto leading-[1]">
    <HeaderStatic />
    <TabStatic class="mt-[3rem]" />
    <SixStatistics class="mt-[3rem]" />
    <div class="mt-[3rem] grid grid-cols-2 gap-[2.75rem]">
      <ChargingRanking />
      <WinCustomer />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { asyncComponentConfig } from "@/composables/useLazyLoad";
  import { useFetchAllData } from "./composables/useFetchData";
  import SixStatistics from "./appComponents/SixStatistics.vue";
  import ChargingRanking from "./appComponents/ChargingRanking.vue";
  import WinCustomer from "./appComponents/WinCustomer.vue";
  import { usePlatformType } from "@/utils/device";
  import { useUserStore } from "@/store/user";
  import { getRequest } from "@/api/customFetch";
  import { getUserInfoUrl } from "@/api/fetchUrl";

  useFetchAllData();
  const router = useRouter();

  const HeaderStatic = defineAsyncComponent({
    ...asyncComponentConfig,
    loader: () => import("./appComponents/HeaderStatic.vue"),
  });

  const TabStatic = defineAsyncComponent({
    ...asyncComponentConfig,
    loader: () => import("./appComponents/TabStatic.vue"),
  });

  const userStore = useUserStore();
  const getUserInfo = () => {
    const accessToken = userStore.getAccessToken;
    getRequest(getUserInfoUrl(), {}, { headers: { Authorization: `Bearer ${accessToken}` } }).then((resp) => {
      if (resp.code === 401) {
        router.push("/login");
      }
    });
  };

  onBeforeMount(() => {
    const { isMobile } = usePlatformType();
    // 跳转到首页
    if (!isMobile) {
      router.push("/");
    }
    getUserInfo()
  });
</script>

<style lang="scss" scoped>
  .custom-bg {
    background-image: url("/images/main-bg.png");
    background-position: center;
    background-size: cover;
  }
</style>
