<template>
  <template v-if="pageDefine">
    <view v-for="(tab, i) in tabsDefine" :key="tab.title">
      <view v-show="currentTab === i">
        <Home v-if="tab.type === 'home' && pageDefine" 
          :pageDefine="pageDefine" 
          :pageContentDefine="pageContentDefine" 
        />
        <FlexCol v-else-if="tab.type === 'list'">
          <StatusBarSpace backgroundColor="background.page" />
          <NavBar leftButton="custom" backgroundColor="background.page">
            <template #left>
              <Image
                v-if="tab.pageHeadImage"
                :src="tab.pageHeadImage"
                :width="tab.pageHeadImageWidth"
                mode="widthFix"
                :innerStyle="{ 
                  marginLeft: '30rpx', marginTop: '30rpx' ,
                  ...(tab.pageHeadImageStyle || {}),
                }"
              />
            </template>
          </NavBar>
          <CommonCategoryList :pageConfigName="tab.pageConfigName" />
          <Height :height="150" />
        </FlexCol>
        <User v-else-if="tab.type === 'user'" />
      </view>
    </view>
  </template>
  <LoadingPage v-else />
  <TabBar
    v-model:selectedTabIndex="currentTab"
    :fixed="!isEditorPreview"
    xbarSpace
    :innerStyle="{
      zIndex: 999 ,
      boxShadow: '0 -2rpx 4rpx rgba(0, 0, 0, 0.1)',
      backdropFilter: 'blur(10px)',
      backgroundColor: 'rgba(246, 242, 231, 0.7)',
    }"
  >
    <TabBarItem 
      v-for="tab in tabsDefine"
      :key="tab.title"
      :icon="tab.icon"
      :activeIcon="tab.activeIcon"
      :hump="tab.hump"
      :humpHeight="tab.humpHeight"
      :humpSpace="tab.humpSpace"
      :iconSize="tab.iconSize"
      :text="tab.title"
    />
  </TabBar>
</template>

<script setup lang="ts">
import { computed, inject, ref } from 'vue';
import { onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app';
import { injectCommonCategory } from '../article/data/CommonCategoryGlobalLoader';
import { type IHomeCommonCategoryHomeDefine } from '../article/data/CommonCategoryDefine';
import TabBar from '@/components/nav/TabBar.vue';
import TabBarItem from '@/components/nav/TabBarItem.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import NavBar from '@/components/nav/NavBar.vue';
import Image from '@/components/basic/Image.vue';
import Height from '@/components/layout/space/Height.vue';
import CommonCategoryList from '../article/data/CommonCategoryList.vue';
import Home from './home.vue';
import User from '../user/index.vue';
import LoadingPage from '@/components/display/loading/LoadingPage.vue';

const commonCategory = injectCommonCategory();
const pageDefine = computed(() => commonCategory.value.page.find((p) => p.name === 'home'));
const pageContentDefine = computed(() => pageDefine.value?.content as IHomeCommonCategoryHomeDefine);
const isEditorPreview = inject('editorPreviewMark', false);

const tabsDefine = computed(() => pageContentDefine.value?.props.tabs.filter((item) => item.visible !== false));
const currentTab = ref(0);

onShareTimeline(() => {
  return {}; 
})
onShareAppMessage(() => {
  return {}; 
})
</script>

<style lang="scss">
</style>