<template>
  <PageWrapper dense fixed-height contentFullHeight>
    <div v-if="desktop.hasCustomDesktop" class="h-full bg-white rounded-2xl">
      <a-spin :spinning="spinning" :delay="delayTime">
        <DesktopHome
          v-if="desktop.hasCustomDesktop"
          :list="desktop.list"
          :isMenu="true"
          :background="desktop.background"
        />
      </a-spin>
    </div>
    <div class="h-full overflow-auto" v-else>
      <GrowCard :loading="loading" class="enter-y" />
      <SiteAnalysis class="!my-10px enter-y" :loading="loading" />
      <div class="md:flex enter-y">
        <VisitRadar class="md:w-1/3 w-full" :loading="loading" />
        <VisitSource class="md:w-1/3 !md:mx-10px !md:my-0 !my-4 w-full" :loading="loading" />
        <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { reactive, onActivated, ref, watch } from 'vue';
  import GrowCard from './components/GrowCard.vue';
  import SiteAnalysis from './components/SiteAnalysis.vue';
  import VisitSource from './components/VisitSource.vue';
  import VisitRadar from './components/VisitRadar.vue';
  import SalesProductPie from './components/SalesProductPie.vue';
  import DesktopHome from '/@/views/generator/desktop/components/DesktopHome.vue';
  import { useUserStore } from '/@/store/modules/user';
  import { PageWrapper } from '/@/components/Page';
  import { backgroundInfo } from '../../generator/desktop/components/designer/config/info';
  // import { useTabs } from '/@/hooks/web/useTabs';
  // import { useTitle } from '@vueuse/core';

  const loading = ref(true);
  const desktop = reactive({ hasCustomDesktop: false, list: [], background: backgroundInfo });

  const spinning = ref<boolean>(true);
  const delayTime = 500;
  setTimeout(() => {
    loading.value = false;
    spinning.value = false;
  }, 1000);

  const userStore = useUserStore();
  const userInfo = userStore.getUserInfo;
  // const { setTitle } = useTabs();

  watch(
    () => userInfo.desktopSchema,
    (v) => {
      getList(v);
    },
    {
      deep: true,
    },
  );
  onActivated(() => {
    desktop.hasCustomDesktop = false;
    setTimeout(() => {
      if (userInfo.desktopSchema?.jsonContent) {
        desktop.list = JSON.parse(userInfo.desktopSchema.jsonContent);
        if (userInfo.desktopSchema.background) {
          desktop.background = JSON.parse(userInfo.desktopSchema.background);
        } else {
          desktop.background = backgroundInfo;
        }
        desktop.hasCustomDesktop = true;
      }
    }, 1);
  });
  getList(userInfo.desktopSchema);
  function getList(desktopSchema) {
    if (desktopSchema?.jsonContent) {
      desktop.list = JSON.parse(desktopSchema.jsonContent);
      if (desktopSchema.background) {
        desktop.background = JSON.parse(desktopSchema.background);
      } else {
        desktop.background = backgroundInfo;
      }
      //设置Tab标题
      // setTitle(desktopSchema.name);
      // console.log('setTitle: ', desktopSchema.name);
      //设置浏览器标题
      // useTitle(` ${desktopSchema.name} `);
      desktop.hasCustomDesktop = true;
    }
  }
</script>
<style scoped>
  .ant-spin-nested-loading,
  .ant-spin-container {
    height: 100%;
  }
</style>
