<template>
  <!-- TAB分页的详情页 -->
  <view class="d-flex flex-col bg-base">
    <SimplePageContentLoader :loader="loader">
      <template v-if="loader.content.value">
        <view class="d-flex flex-col">

          <!-- 轮播大图 -->
          <ImageSwiper 
            v-if="showHead" 
            :images="loader.content.value.images"
          />

          <!-- 标题区域 -->
          <view class="d-flex flex-col mt-3 p-3">
            <slot name="title" :content="loader.content.value">
              <view class="d-flex flex-col">
                <view class="d-flex flex-row align-center">
                  <text :class="'size-lll font-songti font-bold color-text-content flex-shrink-1 mr-2' + (props.showDeadBox && loader.content.value.titleBox ? ' border-all-text' : '')">
                    {{ loader.content.value.title }}
                  </text>
                  <slot name="titleEnd" :content="loader.content.value" />
                </view>
                <text class="size-base color-text-content-second mt-2">{{ loader.content.value.desc }}</text>
              </view>
            </slot>
            <slot name="titleExtra" :content="loader.content.value" />
          </view>

          <!-- 内容切换标签 -->
          <view class="ml-2 mr-2">
            <Tabs
              :tabs="props.tabs" 
              v-model:currentIndex="tabCurrentIndex"
              :autoScroll="true"
              :autoItemWidth="false"
              :defaultIndicatorWidth="100"
              :width="710"
              class="top-tab"
            />
          </view>
          <view class="d-flex flex-col radius-l bg-light p-25 mt-3" style="min-height:70vh">
            <slot name="extraTabs" :tabCurrentId="tabCurrentId" :content="loader.content.value" />
          </view>
          <ContentNote />
        </view>
        <LikeFooter :content="loader.content.value">
          <template #left>
            <ArticleCorrect :content="loader.content.value" />
          </template>
        </LikeFooter>
      </template>
    </SimplePageContentLoader>
  </view>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { useSimplePageContentLoader } from "@/common/composeabe/SimplePageContentLoader";
import { useLoadQuerys } from "@/common/composeabe/LoadQuerys";
import SimplePageContentLoader from "@/common/components/SimplePageContentLoader.vue";
import ImageSwiper from "@/pages/parts/ImageSwiper.vue";
import ContentNote from "@/pages/parts/ContentNote.vue";
import Tabs from "@/components/nav/Tabs.vue";
import LikeFooter from "@/pages/parts/LikeFooter.vue";
import ArticleCorrect from "@/pages/parts/ArticleCorrect.vue";
import type { GetContentDetailItem } from "@/api/CommonContent";
import type { DetailTabPageProps } from "./DetailTabPage";

const props = withDefaults(defineProps<DetailTabPageProps>(), {
  tabs: () => [],
  showHead: true,
  showDeadBox: false,
})

const emit = defineEmits([
  "tabChange",
  "loaded"
])

const tabCurrentIndex = ref(0);
const tabCurrentId = computed(() => {
  return props.tabs.filter((item) => item.visible)[tabCurrentIndex.value]?.id ?? -1;
})

const emptyContent = computed(() => {
  return !(loader.content.value?.intro as string || '').trim() && !(loader.content.value?.content || '').trim();
})

const loader = useSimplePageContentLoader<
  GetContentDetailItem, 
  { id: number }
>(async (params) => {
  if (!params)
    throw new Error("!params");
  if (!props.load)
    throw new Error("!props.load");

  const d = await props.load(params.id);

  if (d.title)
    uni.setNavigationBarTitle({ title: d.title });
  setTimeout(() => {
    if (emptyContent.value) {
      if (d.video)
        tabCurrentIndex.value = 1;
      else if (d.video)
        tabCurrentIndex.value = 2;
    }
  }, 200);
  emit("loaded", d);
  return d;
});

useLoadQuerys({ id : 0 }, (p) => loader.loadData(p));

defineExpose({
  async load(params: { id: number }) {
    await loader.loadData(params, true);
    return loader.content.value;
  },
  getPageShareData() {
    const content = loader.content.value;
    if (!content)
      return {};
    const res = {
      title: content.title,
      imageUrl: content.image,
    };
    return res;
  } 
})
</script>

<style lang="scss">

</style>
