<template>
  <DetailTabPage
    :load="load"
    :showHead="false"
  >
    <template #extraTabs="{ content, tabCurrentId }">
    </template>
    <template #title="{ content }">
      <view class="d-flex flex-col">
        <view class="d-flex flex-row justify-between">
          <view class="d-flex flex-col">
            <text class="size-lll font-bold color-text-content">{{ content.title }}</text>
            <text class="size-base color-text-content-second mt-2">{{ content.birthplace || content.desc }}</text>
            <RoundTags
              :tags="content.tags"
              :tags2="[
                content.age as string,
                content.nation as string
              ]"
            />
          </view>
          <image 
            class="width-150 height-150 radius-base flex-shrink-0" 
            :src="content.image" mode="aspectFill"
          />
        </view>
      </view> 
    </template>
    <template #titleExtra="{ content }">
      <IntroBlock
        small
        :descItems="[
          {
            label: '民族',
            value: content.nation,
          },
          {
            label: '性别',
            value: content.gender == '1'? '男' : '女', 
          },
          {
            label: '出生日期',
            value: content.dateBirth,
          }, 
          {
            label: '出生地区',
            value: content.birthplace,
          },
          {
            label: '传承项目',
            value: content.associationMeList[0]?.title,
          }, 
          {
            label: '公布批次',
            value: content.batchText,
          },
        ]"
      />
    </template>
  </DetailTabPage>
</template>
<script setup lang="ts">
import type { TabControlItem } from "@/common/composeabe/TabControl";
import type { Ref } from "vue";
import RoundTags from "@/pages/parts/RoundTags.vue";
import InheritorContent from "@/api/inheritor/InheritorContent";
import IntroBlock from "@/pages/article/common/IntroBlock.vue";
import DetailTabPage from "@/pages/article/common/DetailTabPage.vue";

async function load(id: number, tabsArray: Ref<TabControlItem[]>) {
  const d = await InheritorContent.getContentDetail(id);
  return d;
}
</script>
