<template>
  <DetailTabPage
    :load="load"
    :extraTabs="[
      {
        id: 5,
        name: '传习所',
        visible: true,
      },
      {
        id: 6,
        name: '传承人',
        visible: true,
      },
      {
        id: 7,
        name: '作品(产品)',
        visible: true,
      }
    ]"
  >
    <template #extraTabs="{ content, tabCurrentId }">
      <template v-if="tabCurrentId==5">
        <!-- 非遗传习中心 -->
        <CommonListPage 
          :showSearch="false"
          :hasBg="false"
          :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'ichSitesList')"
          :detailsParams="{
            mainBodyColumnId: SeminarContent.mainBodyColumnId,
            modelId: SeminarContent.modelId,
          }"
        />
      </template>
      <template v-else-if="tabCurrentId==6">
        <!-- 非遗传承人 -->
        <CommonListPage 
          :showSearch="false"
          :hasBg="false"
          :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'inheritorsList')"
          detailsPage="/pages/inhert/inheritor/details"
          :detailsParams="{
            mainBodyColumnId: InheritorContent.mainBodyColumnId,
            modelId: InheritorContent.modelId,
          }"
        />
      </template>
      <template v-else-if="tabCurrentId==7">
        <!-- 非遗产品(作品) -->
        <CommonListPage 
          :showSearch="false"
          :hasBg="false"
          :load="(page: number, pageSize: number) => loadSubList(page, pageSize, content, 'associationMeList')"
          detailsPage="/pages/inhert/intangible/details"
          :detailsParams="{
            mainBodyColumnId: ProductsContent.mainBodyColumnId,
            modelId: ProductsContent.modelId,
          }"
        />
      </template>
    </template>
    <template #titleEnd="{ content }">
      <u-tag 
        v-if="content.levelText"
        :text="content.levelText"
        size="mini" plain color="#d9492e"
        class="flex-shrink-0"
      />
    </template>
    <template #titleExtra="{ content }">
      <view class="d-flex flex-col">
        <text class="color-text-content-second size-s">
          <text class="iconfont icon-place mr-2"></text>
          {{ content.address || content.regionText }}
        </text>
        <text class="color-text-content-second size-s">
          <text class="iconfont icon-go mr-2"></text>
          {{ content.ichTypeText || '非遗项目' }}
        </text>
      </view>
    </template>
  </DetailTabPage>
</template>
<script setup lang="ts">
import DetailTabPage from "@/pages/article/common/DetailTabPage.vue";
import ProjectsContent from "@/api/inheritor/ProjectsContent";
import CommonListPage from "@/pages/article/common/CommonListPage.vue";
import type { TabControlItem } from "@/common/composeabe/TabControl";
import type { Ref } from "vue";
import InheritorContent from "@/api/inheritor/InheritorContent";
import ProductsContent from "@/api/inheritor/ProductsContent";
import SeminarContent from "@/api/inheritor/SeminarContent";

async function load(id: number, tabsArray: Ref<TabControlItem[]>) {
  const d = await ProjectsContent.getContentDetail(id);
  tabsArray.value[4].visible = Boolean(d.ichSitesList && (d.ichSitesList as any[]).length > 0);
  tabsArray.value[5].visible = Boolean(d.inheritorsList && (d.inheritorsList as any[]).length > 0);
  tabsArray.value[6].visible = Boolean(d.associationMeList && (d.associationMeList as any[]).length > 0);
  return d;
}
async function loadSubList(page: number, pageSize: number, content: any, subList: string) {
  return (content[subList] as any[] || [])
    .slice((page - 1) * pageSize, page * pageSize)
}

</script>

<style lang="scss">

</style>
